Strona w przebudowie<\/title>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin \/>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600&display=swap\" rel=\"stylesheet\" media=\"print\" onload=\"this.media='all'\" \/>\r\n <noscript><link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600&display=swap\" rel=\"stylesheet\" \/><\/noscript>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Abril+Fatface&family=Anton&family=Bebas+Neue&family=Cormorant+Garamond:ital,wght@0,400;0,700;1,400;1,700&family=DM+Serif+Display:ital@0;1&family=Oswald:wght@300;700&family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=Roboto+Mono:wght@400;700&family=UnifrakturMaguntia&display=swap\" rel=\"stylesheet\" \/>\r\n\r\n<style>\r\n* {\r\n box-sizing: border-box;\r\n }\r\n\r\n :root {\r\n --bg: #f6f6f6;\r\n --text: #111;\r\n --muted: #77736c;\r\n --soft: #aaa49a;\r\n --line: rgba(17, 17, 17, .12);\r\n\r\n --serif: Georgia, \"Times New Roman\", Times, serif;\r\n --sans: -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", Arial, sans-serif;\r\n --inter: \"Inter\", -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", Arial, sans-serif;\r\n\r\n --page-x: clamp(20px, 4vw, 48px);\r\n --main-top: clamp(72px, 10vw, 140px);\r\n --main-bottom: clamp(72px, 9vw, 120px);\r\n\r\n --logo-box-width: 116px;\r\n --logo-box-height: 38px;\r\n --logo-gap: clamp(24px, 3.4vw, 48px);\r\n --logo-gray: #96918a;\r\n }\r\n\r\n html {\r\n min-height: 100%;\r\n background: var(--bg);\r\n }\r\n\r\n body {\r\n margin: 0;\r\n min-height: 100svh;\r\n background: var(--bg);\r\n color: var(--text);\r\n font-family: var(--sans);\r\n overflow-x: hidden;\r\n -webkit-font-smoothing: antialiased;\r\n text-rendering: geometricPrecision;\r\n }\r\n\r\n a {\r\n color: inherit;\r\n }\r\n\r\n .page {\r\n min-height: 100svh;\r\n display: grid;\r\n grid-template-rows: 1fr;\r\n }\r\n\r\n main {\r\n width: min(calc(100% - (var(--page-x) * 2)), 1320px);\r\n margin: 0 auto;\r\n align-self: start;\r\n padding: var(--main-top) 0 var(--main-bottom);\r\n }\r\n\r\n .grid {\r\n display: grid;\r\n grid-template-columns: minmax(260px, 430px) minmax(500px, 620px);\r\n justify-content: space-between;\r\n gap: clamp(80px, 14vw, 220px);\r\n align-items: start;\r\n }\r\n\r\n .grid > *,\r\n .hero,\r\n .info,\r\n .services,\r\n .clients {\r\n min-width: 0;\r\n }\r\n\r\n .hero {\r\n padding-right: 0;\r\n max-width: 430px;\r\n }\r\n\r\n h1 {\r\n margin: 0;\r\n font-family: var(--serif);\r\n font-size: clamp(42px, 6.2vw, 88px);\r\n line-height: .98;\r\n font-weight: 400;\r\n letter-spacing: -.075em;\r\n }\r\n\r\n h1 span {\r\n display: block;\r\n font-style: italic;\r\n letter-spacing: -.085em;\r\n }\r\n\r\n .contact {\r\n width: min(100%, 320px);\r\n margin-top: clamp(38px, 5vw, 64px);\r\n padding-top: clamp(18px, 2.4vw, 28px);\r\n }\r\n\r\n .intro {\r\n margin: 0 0 26px;\r\n color: var(--muted);\r\n font-size: clamp(13px, 1.1vw, 14px);\r\n line-height: 1.68;\r\n letter-spacing: -.01em;\r\n }\r\n\r\n .socials {\r\n display: flex;\r\n align-items: center;\r\n gap: 18px;\r\n }\r\n\r\n .social-link {\r\n width: 22px;\r\n height: 22px;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: var(--muted);\r\n text-decoration: none;\r\n transition:\r\n color .18s ease,\r\n transform .18s ease;\r\n }\r\n\r\n .social-link:hover {\r\n color: var(--text);\r\n transform: translateY(-1px);\r\n }\r\n\r\n .social-link svg {\r\n width: 17px;\r\n height: 17px;\r\n display: block;\r\n fill: currentColor;\r\n }\r\n\r\n .info {\r\n align-self: start;\r\n justify-self: end;\r\n width: min(100%, 620px);\r\n overflow: hidden;\r\n }\r\n\r\n .panel {\r\n padding-top: clamp(18px, 2.4vw, 28px);\r\n }\r\n\r\n .section-title {\r\n margin: 0 0 24px;\r\n color: var(--soft);\r\n font-size: 9px;\r\n font-weight: 400;\r\n line-height: 1.4;\r\n letter-spacing: .14em;\r\n text-align: left;\r\n text-transform: uppercase;\r\n }\r\n\r\n .services__list {\r\n margin: 0;\r\n padding: 0;\r\n list-style: none;\r\n display: grid;\r\n grid-template-columns: repeat(3, minmax(0, 1fr));\r\n column-gap: clamp(22px, 2.8vw, 40px);\r\n row-gap: clamp(24px, 2.6vw, 34px);\r\n }\r\n\r\n .service {\r\n display: grid;\r\n grid-template-columns: 24px 1fr;\r\n gap: 12px;\r\n align-items: baseline;\r\n color: var(--text);\r\n font-family: var(--sans);\r\n font-size: clamp(14px, 1.05vw, 16px);\r\n line-height: 1.28;\r\n font-weight: 400;\r\n letter-spacing: -.035em;\r\n transition:\r\n color .18s ease,\r\n transform .18s ease;\r\n }\r\n\r\n .service::before {\r\n content: attr(data-no);\r\n color: var(--soft);\r\n font-size: 10px;\r\n font-weight: 500;\r\n line-height: 1.3;\r\n letter-spacing: .08em;\r\n }\r\n\r\n .service:hover {\r\n color: #000;\r\n transform: translateX(4px);\r\n }\r\n\r\n .clients {\r\n width: 100%;\r\n margin-top: clamp(56px, 6vw, 84px);\r\n padding: 28px 0 0;\r\n overflow: hidden;\r\n border-top: 1px solid var(--line);\r\n background: transparent;\r\n }\r\n\r\n .clients__label {\r\n margin: 0 0 24px;\r\n color: var(--soft);\r\n font-size: 9px;\r\n font-weight: 400;\r\n line-height: 1.4;\r\n letter-spacing: .14em;\r\n text-align: left;\r\n text-transform: uppercase;\r\n }\r\n\r\n .clients__marquee {\r\n width: 100%;\r\n overflow: hidden;\r\n -webkit-mask-image: none;\r\n mask-image: none;\r\n }\r\n\r\n .clients__track {\r\n display: flex;\r\n width: max-content;\r\n max-width: none;\r\n animation: logoScroll 64s linear infinite;\r\n will-change: transform;\r\n transform: translate3d(0, 0, 0);\r\n }\r\n\r\n .clients__group {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--logo-gap);\r\n padding-right: var(--logo-gap);\r\n }\r\n\r\n .clients__logo {\r\n width: var(--logo-box-width);\r\n height: var(--logo-box-height);\r\n min-width: var(--logo-box-width);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: var(--logo-gray);\r\n background: transparent;\r\n }\r\n\r\n .clients__logo img,\r\n .clients__logo svg {\r\n display: block;\r\n width: var(--logo-w, 92px);\r\n height: var(--logo-h, 26px);\r\n max-width: 100%;\r\n max-height: 100%;\r\n object-fit: contain;\r\n background: transparent;\r\n opacity: .52;\r\n transform: none;\r\n transition: none;\r\n }\r\n\r\n .clients__logo img {\r\n filter: grayscale(1) saturate(0) brightness(.78) contrast(.9);\r\n }\r\n\r\n .clients__logo svg {\r\n color: var(--logo-gray);\r\n }\r\n\r\n .clients__logo--blend img {\r\n mix-blend-mode: multiply;\r\n }\r\n\r\n .clients__text-logo {\r\n width: var(--logo-w, 92px);\r\n height: var(--logo-h, 26px);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: currentColor;\r\n opacity: .52;\r\n text-align: center;\r\n white-space: nowrap;\r\n }\r\n\r\n .clients__logo--playboy {\r\n --logo-w: 48px;\r\n --logo-h: 25px;\r\n }\r\n\r\n .clients__logo--esquire {\r\n --logo-w: 84px;\r\n --logo-h: 23px;\r\n }\r\n\r\n .clients__logo--cosmo {\r\n --logo-w: 96px;\r\n --logo-h: 23px;\r\n }\r\n\r\n .clients__logo--arp {\r\n width: 142px;\r\n min-width: 142px;\r\n --logo-w: 132px;\r\n --logo-h: 38px;\r\n }\r\n\r\n .clients__logo--pes {\r\n width: 150px;\r\n min-width: 150px;\r\n --logo-w: 140px;\r\n --logo-h: 38px;\r\n }\r\n\r\n .clients__logo--pes .clients__text-logo {\r\n white-space: normal;\r\n font-size: 11px;\r\n font-weight: 600;\r\n line-height: 1.15;\r\n letter-spacing: .01em;\r\n text-transform: uppercase;\r\n }\r\n\r\n .clients__logo--nck {\r\n width: 154px;\r\n min-width: 154px;\r\n height: 48px;\r\n --logo-w: 146px;\r\n --logo-h: 44px;\r\n }\r\n\r\n .clients__logo--nck svg {\r\n overflow: visible;\r\n }\r\n\r\n .nck-mark,\r\n .nck-text {\r\n fill: currentColor;\r\n }\r\n\r\n .clients__logo--bit {\r\n --logo-w: 84px;\r\n --logo-h: 25px;\r\n }\r\n\r\n .clients__logo--btt {\r\n width: 138px;\r\n min-width: 138px;\r\n --logo-w: 128px;\r\n --logo-h: 38px;\r\n }\r\n\r\n .clients__logo--sans {\r\n --logo-w: 98px;\r\n --logo-h: 27px;\r\n }\r\n\r\n .clients__logo--crosscore {\r\n --logo-w: 78px;\r\n --logo-h: 31px;\r\n }\r\n\r\n .clients__logo--crosscore img {\r\n filter: grayscale(1) saturate(0) brightness(.68) contrast(.9);\r\n opacity: .58;\r\n }\r\n\r\n .clients__logo--agora {\r\n --logo-w: 84px;\r\n --logo-h: 25px;\r\n }\r\n\r\n .clients__logo--bok {\r\n width: 118px;\r\n min-width: 118px;\r\n --logo-w: 108px;\r\n --logo-h: 34px;\r\n }\r\n\r\n .clients__logo--medicover {\r\n width: 124px;\r\n min-width: 124px;\r\n --logo-w: 112px;\r\n --logo-h: 32px;\r\n }\r\n\r\n .clients__logo--bazaar {\r\n --logo-w: 118px;\r\n --logo-h: 26px;\r\n }\r\n\r\n .clients__logo--bazaar .clients__text-logo {\r\n font-family: var(--serif);\r\n font-size: 17px;\r\n font-weight: 400;\r\n line-height: 1.25;\r\n letter-spacing: .02em;\r\n text-transform: uppercase;\r\n }\r\n\r\n .project-contact {\r\n width: 100%;\r\n margin-top: clamp(64px, 8vw, 112px);\r\n padding-top: 30px;\r\n border-top: 1px solid var(--line);\r\n }\r\n\r\n .project-contact__layout {\r\n display: grid;\r\n grid-template-columns: repeat(2, minmax(0, 1fr));\r\n gap: clamp(48px, 9vw, 140px);\r\n align-items: start;\r\n }\r\n\r\n .project-contact__intro {\r\n min-width: 0;\r\n max-width: 520px;\r\n }\r\n\r\n .project-contact__intro .section-title {\r\n margin-bottom: 24px;\r\n }\r\n\r\n .project-contact__title {\r\n margin: 0;\r\n font-family: var(--serif);\r\n font-size: clamp(38px, 5.2vw, 76px);\r\n font-weight: 400;\r\n line-height: .98;\r\n letter-spacing: -.07em;\r\n }\r\n\r\n .project-contact__title span {\r\n display: block;\r\n font-style: italic;\r\n letter-spacing: -.08em;\r\n }\r\n\r\n .project-contact__copy {\r\n max-width: 420px;\r\n margin: 24px 0 0;\r\n color: var(--muted);\r\n font-size: clamp(13px, 1.05vw, 14px);\r\n line-height: 1.68;\r\n letter-spacing: -.01em;\r\n }\r\n\r\n .contact-form {\r\n min-width: 0;\r\n width: 100%;\r\n border-top: 1px solid var(--text);\r\n padding-top: 18px;\r\n }\r\n\r\n .contact-form .wpcf7,\r\n .contact-form .wpcf7-form {\r\n width: 100%;\r\n margin: 0;\r\n }\r\n\r\n .contact-form .wpcf7-form > p:empty,\r\n .contact-form .message-builder > p:empty {\r\n display: none;\r\n }\r\n\r\n .message-builder {\r\n width: 100%;\r\n padding: clamp(16px, 2.2vw, 22px);\r\n border: 1px solid var(--line);\r\n border-radius: 24px;\r\n background: var(--bg);\r\n display: grid;\r\n gap: 18px;\r\n }\r\n\r\n .builder-head {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n gap: 18px;\r\n padding-bottom: 14px;\r\n border-bottom: 1px solid var(--line);\r\n color: var(--muted);\r\n font-size: 9px;\r\n line-height: 1.4;\r\n letter-spacing: .14em;\r\n text-transform: uppercase;\r\n }\r\n\r\n .builder-counter {\r\n flex: 0 0 auto;\r\n font-variant-numeric: tabular-nums;\r\n }\r\n\r\n .builder-progress {\r\n width: 100%;\r\n height: 1px;\r\n overflow: hidden;\r\n background: var(--line);\r\n }\r\n\r\n .builder-progress-bar {\r\n display: block;\r\n width: 20%;\r\n height: 100%;\r\n background: var(--text);\r\n transition: width .22s ease;\r\n }\r\n\r\n .builder-step {\r\n display: none;\r\n gap: 12px;\r\n }\r\n\r\n .builder-step.is-active {\r\n display: grid;\r\n }\r\n\r\n .builder-label {\r\n color: var(--muted);\r\n font-size: 9px;\r\n line-height: 1.4;\r\n letter-spacing: .14em;\r\n text-transform: uppercase;\r\n }\r\n\r\n .builder-hint {\r\n margin: -2px 0 2px;\r\n color: var(--soft);\r\n font-size: 11px;\r\n line-height: 1.5;\r\n }\r\n\r\n .builder-options {\r\n display: grid;\r\n gap: 8px;\r\n }\r\n\r\n .builder-option,\r\n .builder-nav,\r\n .builder-submit,\r\n .contact-form .wpcf7-submit {\r\n appearance: none;\r\n -webkit-appearance: none;\r\n outline: none;\r\n box-shadow: none;\r\n text-decoration: none;\r\n }\r\n\r\n .builder-option,\r\n .builder-nav {\r\n width: 100%;\r\n min-height: 44px;\r\n border: 1px solid var(--line);\r\n border-radius: 999px;\r\n background: transparent;\r\n color: var(--text);\r\n padding: 11px 16px;\r\n font-family: var(--sans);\r\n font-size: 10px;\r\n line-height: 1.25;\r\n letter-spacing: .08em;\r\n text-align: center;\r\n text-transform: uppercase;\r\n cursor: pointer;\r\n transition:\r\n background-color .16s ease,\r\n border-color .16s ease,\r\n color .16s ease,\r\n opacity .16s ease;\r\n }\r\n\r\n .builder-option:hover,\r\n .builder-option:focus-visible,\r\n .builder-option.is-active,\r\n .builder-nav:hover,\r\n .builder-nav:focus-visible {\r\n border-color: var(--text);\r\n background: var(--text);\r\n color: var(--bg);\r\n }\r\n\r\n .builder-fields {\r\n display: grid;\r\n gap: 16px;\r\n }\r\n\r\n .builder-field {\r\n display: grid;\r\n gap: 7px;\r\n margin: 0;\r\n }\r\n\r\n .builder-field .wpcf7-form-control-wrap {\r\n display: block;\r\n width: 100%;\r\n }\r\n\r\n .builder-input,\r\n .builder-textarea,\r\n .builder-preview-text {\r\n width: 100%;\r\n margin: 0;\r\n padding: 11px 0;\r\n border: 0;\r\n border-bottom: 1px solid var(--line);\r\n border-radius: 0;\r\n outline: 0;\r\n background: transparent;\r\n color: var(--text);\r\n font-family: var(--sans);\r\n font-size: 13px;\r\n font-weight: 400;\r\n line-height: 1.5;\r\n letter-spacing: 0;\r\n box-shadow: none;\r\n appearance: none;\r\n -webkit-appearance: none;\r\n transition: border-color .16s ease;\r\n }\r\n\r\n .builder-input:focus,\r\n .builder-textarea:focus,\r\n .builder-preview-text:focus {\r\n border-bottom-color: var(--text);\r\n }\r\n\r\n .builder-input::placeholder,\r\n .builder-textarea::placeholder {\r\n color: var(--soft);\r\n opacity: 1;\r\n }\r\n\r\n .builder-textarea {\r\n min-height: 112px;\r\n resize: vertical;\r\n }\r\n\r\n .builder-preview {\r\n display: grid;\r\n gap: 10px;\r\n padding-top: 14px;\r\n border-top: 1px solid var(--line);\r\n }\r\n\r\n .builder-preview-text {\r\n min-height: 190px;\r\n resize: vertical;\r\n color: var(--muted);\r\n font-size: 12px;\r\n line-height: 1.58;\r\n }\r\n\r\n .builder-final-note {\r\n color: var(--muted);\r\n font-size: 10px;\r\n line-height: 1.5;\r\n }\r\n\r\n .builder-antirobot {\r\n min-height: 44px;\r\n padding: 10px 12px;\r\n border: 1px solid var(--line);\r\n border-radius: 14px;\r\n background: transparent;\r\n transition:\r\n border-color .16s ease,\r\n background-color .16s ease;\r\n }\r\n\r\n .builder-antirobot .wpcf7-form-control-wrap,\r\n .builder-antirobot .wpcf7-form-control,\r\n .builder-antirobot .wpcf7-list-item {\r\n display: block;\r\n width: 100%;\r\n margin: 0;\r\n }\r\n\r\n .builder-antirobot label {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n width: 100%;\r\n color: var(--text);\r\n font-size: 11px;\r\n line-height: 1.4;\r\n cursor: pointer;\r\n }\r\n\r\n .builder-antirobot input[type=\"checkbox\"] {\r\n width: 18px;\r\n height: 18px;\r\n flex: 0 0 18px;\r\n margin: 0;\r\n accent-color: var(--text);\r\n cursor: pointer;\r\n }\r\n\r\n .message-builder.has-antirobot-confirmation .builder-antirobot {\r\n border-color: var(--text);\r\n }\r\n\r\n .builder-antirobot .wpcf7-not-valid-tip {\r\n margin-top: 7px;\r\n }\r\n\r\n .builder-hidden-fields {\r\n display: none !important;\r\n }\r\n\r\n .builder-captcha {\r\n min-height: 0;\r\n overflow: hidden;\r\n }\r\n\r\n .builder-captcha .cf-turnstile,\r\n .builder-captcha .wpcf7-turnstile,\r\n .builder-captcha [data-sitekey],\r\n .builder-captcha iframe {\r\n max-width: 100%;\r\n }\r\n\r\n .builder-actions {\r\n display: grid;\r\n grid-template-columns: repeat(2, minmax(0, 1fr));\r\n gap: 8px;\r\n padding-top: 14px;\r\n border-top: 1px solid var(--line);\r\n }\r\n\r\n .builder-actions > p,\r\n .builder-submit-wrap > p {\r\n display: contents;\r\n margin: 0;\r\n }\r\n\r\n .builder-prev:disabled {\r\n opacity: .28;\r\n pointer-events: none;\r\n }\r\n\r\n .builder-submit-wrap {\r\n display: none;\r\n min-width: 0;\r\n }\r\n\r\n .message-builder.is-final .builder-next {\r\n display: none;\r\n }\r\n\r\n .message-builder.is-final .builder-submit-wrap {\r\n display: block;\r\n }\r\n\r\n .contact-form .wpcf7-submit {\r\n width: 100%;\r\n min-height: 44px;\r\n margin: 0;\r\n padding: 11px 16px;\r\n border: 1px solid var(--text);\r\n border-radius: 999px;\r\n background: var(--text);\r\n color: var(--bg);\r\n font-family: var(--sans);\r\n font-size: 10px;\r\n line-height: 1.25;\r\n letter-spacing: .08em;\r\n text-transform: uppercase;\r\n cursor: pointer;\r\n transition:\r\n background-color .16s ease,\r\n border-color .16s ease,\r\n color .16s ease,\r\n opacity .16s ease;\r\n }\r\n\r\n .contact-form .wpcf7-submit:hover,\r\n .contact-form .wpcf7-submit:focus-visible {\r\n background: transparent;\r\n color: var(--text);\r\n }\r\n\r\n .contact-form .wpcf7-submit:disabled {\r\n cursor: wait;\r\n opacity: .48;\r\n }\r\n\r\n .contact-form .wpcf7-spinner {\r\n position: absolute;\r\n margin: 12px 0 0 12px;\r\n }\r\n\r\n .contact-form .wpcf7-not-valid-tip {\r\n margin-top: 6px;\r\n color: #8b3f35;\r\n font-size: 10px;\r\n line-height: 1.45;\r\n }\r\n\r\n .contact-form .wpcf7 form .wpcf7-response-output {\r\n margin: 10px 0 0;\r\n padding: 11px 13px;\r\n border: 1px solid var(--line);\r\n border-radius: 14px;\r\n color: var(--muted);\r\n font-size: 10px;\r\n line-height: 1.5;\r\n }\r\n\r\n @media (max-width: 760px) {\r\n .project-contact__layout {\r\n grid-template-columns: 1fr;\r\n gap: 46px;\r\n }\r\n\r\n .project-contact__intro {\r\n max-width: 620px;\r\n margin: 0 auto;\r\n text-align: center;\r\n }\r\n\r\n .project-contact__intro .section-title {\r\n text-align: center;\r\n }\r\n\r\n .project-contact__copy {\r\n margin-right: auto;\r\n margin-left: auto;\r\n }\r\n\r\n .contact-form {\r\n max-width: 620px;\r\n margin: 0 auto;\r\n }\r\n }\r\n\r\n @media (max-width: 520px) {\r\n .project-contact {\r\n margin-top: 52px;\r\n padding-top: 24px;\r\n }\r\n\r\n .message-builder {\r\n padding: 14px;\r\n border-radius: 20px;\r\n }\r\n\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n .builder-progress-bar,\r\n .builder-option,\r\n .builder-nav,\r\n .contact-form .wpcf7-submit {\r\n transition: none;\r\n }\r\n }\r\n\r\n .builder-spam-trap {\r\n position: absolute !important;\r\n left: -10000px !important;\r\n top: auto !important;\r\n width: 1px !important;\r\n height: 1px !important;\r\n overflow: hidden !important;\r\n opacity: 0 !important;\r\n pointer-events: none !important;\r\n }\r\n\r\n .contact-form .message-builder {\r\n min-height: 0 !important;\r\n padding: 14px !important;\r\n gap: 12px !important;\r\n }\r\n\r\n .contact-form .builder-head {\r\n padding-bottom: 10px !important;\r\n }\r\n\r\n .contact-form .builder-progress {\r\n margin: 0 !important;\r\n }\r\n\r\n .contact-form .builder-step,\r\n .contact-form .builder-step.is-active,\r\n .contact-form .builder-fields,\r\n .contact-form .builder-field {\r\n min-height: 0 !important;\r\n height: auto !important;\r\n }\r\n\r\n .contact-form .builder-step.is-active {\r\n gap: 9px !important;\r\n align-content: start !important;\r\n }\r\n\r\n .contact-form .builder-fields {\r\n display: grid !important;\r\n gap: 10px !important;\r\n align-items: start !important;\r\n }\r\n\r\n .contact-form .builder-step[data-step=\"4\"] .builder-fields {\r\n grid-template-columns: 1fr !important;\r\n }\r\n\r\n .contact-form .builder-step[data-step=\"5\"] .builder-fields {\r\n grid-template-columns: repeat(3, minmax(0, 1fr)) !important;\r\n }\r\n\r\n .contact-form .builder-field {\r\n display: grid !important;\r\n align-content: start !important;\r\n gap: 5px !important;\r\n margin: 0 !important;\r\n padding: 0 !important;\r\n }\r\n\r\n .contact-form .builder-field br,\r\n .contact-form .builder-actions br,\r\n .contact-form .builder-forward-wrap br,\r\n .contact-form .builder-submit-wrap br {\r\n display: none !important;\r\n }\r\n\r\n .contact-form .builder-input {\r\n width: 100% !important;\r\n height: 40px !important;\r\n min-height: 40px !important;\r\n max-height: 40px !important;\r\n margin: 0 !important;\r\n padding: 7px 0 !important;\r\n line-height: 1.3 !important;\r\n }\r\n\r\n .contact-form .builder-textarea {\r\n width: 100% !important;\r\n height: 76px !important;\r\n min-height: 76px !important;\r\n max-height: 120px !important;\r\n margin: 0 !important;\r\n padding: 7px 0 !important;\r\n line-height: 1.4 !important;\r\n resize: vertical !important;\r\n }\r\n\r\n .contact-form .builder-preview {\r\n gap: 6px !important;\r\n padding-top: 10px !important;\r\n }\r\n\r\n .contact-form .builder-preview-text {\r\n width: 100% !important;\r\n height: 104px !important;\r\n min-height: 104px !important;\r\n max-height: 104px !important;\r\n margin: 0 !important;\r\n padding: 7px 0 !important;\r\n line-height: 1.4 !important;\r\n resize: none !important;\r\n }\r\n\r\n .contact-form .builder-final-note {\r\n margin: 0 !important;\r\n }\r\n\r\n .contact-form .builder-antirobot,\r\n .contact-form .builder-captcha {\r\n margin: 0 !important;\r\n }\r\n\r\n .contact-form .builder-actions {\r\n display: grid !important;\r\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\r\n gap: 8px !important;\r\n align-items: stretch !important;\r\n margin: 0 !important;\r\n padding-top: 10px !important;\r\n }\r\n\r\n .contact-form .builder-forward-wrap {\r\n display: block !important;\r\n min-width: 0 !important;\r\n width: 100% !important;\r\n margin: 0 !important;\r\n padding: 0 !important;\r\n }\r\n\r\n .contact-form .builder-nav,\r\n .contact-form .builder-submit-wrap,\r\n .contact-form .wpcf7-submit {\r\n width: 100% !important;\r\n min-width: 0 !important;\r\n margin: 0 !important;\r\n }\r\n\r\n .contact-form .builder-nav,\r\n .contact-form .wpcf7-submit {\r\n min-height: 40px !important;\r\n height: 40px !important;\r\n padding: 8px 12px !important;\r\n }\r\n\r\n .contact-form .builder-submit-wrap {\r\n display: none !important;\r\n }\r\n\r\n .contact-form .message-builder.is-final .builder-next {\r\n display: none !important;\r\n }\r\n\r\n .contact-form .message-builder.is-final .builder-submit-wrap {\r\n display: block !important;\r\n }\r\n\r\n .contact-form .wpcf7-spinner {\r\n position: absolute !important;\r\n margin: 9px 0 0 8px !important;\r\n }\r\n\r\n @media (max-width: 760px) {\r\n .project-contact__layout {\r\n grid-template-columns: 1fr !important;\r\n gap: 34px !important;\r\n }\r\n\r\n .contact-form .builder-step[data-step=\"4\"] .builder-fields,\r\n .contact-form .builder-step[data-step=\"5\"] .builder-fields {\r\n grid-template-columns: 1fr !important;\r\n }\r\n }\r\n\r\n @media (max-width: 420px) {\r\n .contact-form .message-builder {\r\n padding: 12px !important;\r\n }\r\n\r\n .contact-form .builder-actions {\r\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\r\n gap: 6px !important;\r\n }\r\n\r\n .contact-form .builder-nav,\r\n .contact-form .wpcf7-submit {\r\n min-height: 38px !important;\r\n height: 38px !important;\r\n padding: 7px 8px !important;\r\n font-size: 9px !important;\r\n }\r\n }\r\n\r\n .contact-form .builder-options,\r\n .contact-form .builder-step[data-step=\"1\"] .builder-options,\r\n .contact-form .builder-step[data-step=\"2\"] .builder-options,\r\n .contact-form .builder-step[data-step=\"3\"] .builder-options {\r\n display: grid !important;\r\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\r\n column-gap: 16px !important;\r\n row-gap: 14px !important;\r\n width: 100% !important;\r\n }\r\n\r\n .contact-form .builder-option,\r\n .contact-form .builder-step[data-step=\"1\"] .builder-option,\r\n .contact-form .builder-step[data-step=\"2\"] .builder-option,\r\n .contact-form .builder-step[data-step=\"3\"] .builder-option {\r\n width: 100% !important;\r\n min-width: 0 !important;\r\n min-height: 46px !important;\r\n height: auto !important;\r\n padding: 10px 12px !important;\r\n white-space: normal !important;\r\n overflow-wrap: anywhere !important;\r\n line-height: 1.25 !important;\r\n }\r\n\r\n .contact-form .builder-actions {\r\n display: grid !important;\r\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\r\n gap: 10px !important;\r\n }\r\n\r\n @media (max-width: 520px) {\r\n .contact-form .builder-options,\r\n .contact-form .builder-step[data-step=\"1\"] .builder-options,\r\n .contact-form .builder-step[data-step=\"2\"] .builder-options,\r\n .contact-form .builder-step[data-step=\"3\"] .builder-options {\r\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\r\n column-gap: 8px !important;\r\n row-gap: 8px !important;\r\n }\r\n\r\n .contact-form .builder-option,\r\n .contact-form .builder-step[data-step=\"1\"] .builder-option,\r\n .contact-form .builder-step[data-step=\"2\"] .builder-option,\r\n .contact-form .builder-step[data-step=\"3\"] .builder-option {\r\n min-height: 42px !important;\r\n padding: 8px 6px !important;\r\n font-size: 8.5px !important;\r\n letter-spacing: .05em !important;\r\n }\r\n\r\n .contact-form .builder-actions {\r\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\r\n gap: 8px !important;\r\n }\r\n }\r\n\r\n body .contact-form .builder-options,\r\n body .contact-form .builder-step[data-step=\"1\"] .builder-options,\r\n body .contact-form .builder-step[data-step=\"2\"] .builder-options,\r\n body .contact-form .builder-step[data-step=\"3\"] .builder-options {\r\n display: grid !important;\r\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\r\n grid-auto-flow: row !important;\r\n column-gap: 18px !important;\r\n row-gap: 16px !important;\r\n width: 100% !important;\r\n min-width: 0 !important;\r\n margin: 0 !important;\r\n padding: 0 !important;\r\n }\r\n\r\n body .contact-form .builder-options > p,\r\n body .contact-form .builder-options > span,\r\n body .contact-form .builder-options > div:not(.builder-option),\r\n body .contact-form .builder-options .wpcf7-form-control-wrap {\r\n display: contents !important;\r\n margin: 0 !important;\r\n padding: 0 !important;\r\n }\r\n\r\n body .contact-form .builder-options br,\r\n body .contact-form .builder-options > p > br,\r\n body .contact-form .builder-options > span > br {\r\n display: none !important;\r\n }\r\n\r\n body .contact-form .builder-options .builder-option,\r\n body .contact-form .builder-step[data-step=\"1\"] .builder-option,\r\n body .contact-form .builder-step[data-step=\"2\"] .builder-option,\r\n body .contact-form .builder-step[data-step=\"3\"] .builder-option {\r\n display: flex !important;\r\n grid-column: auto !important;\r\n width: 100% !important;\r\n min-width: 0 !important;\r\n max-width: none !important;\r\n min-height: 46px !important;\r\n height: auto !important;\r\n align-items: center !important;\r\n justify-content: center !important;\r\n margin: 0 !important;\r\n padding: 10px 12px !important;\r\n white-space: normal !important;\r\n overflow-wrap: anywhere !important;\r\n line-height: 1.25 !important;\r\n }\r\n\r\n body .contact-form .builder-actions {\r\n display: grid !important;\r\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\r\n column-gap: 12px !important;\r\n width: 100% !important;\r\n }\r\n\r\n body .contact-form .builder-actions > p,\r\n body .contact-form .builder-actions > span,\r\n body .contact-form .builder-forward-wrap {\r\n min-width: 0 !important;\r\n width: 100% !important;\r\n margin: 0 !important;\r\n }\r\n\r\n @media (max-width: 520px) {\r\n body .contact-form .builder-options,\r\n body .contact-form .builder-step[data-step=\"1\"] .builder-options,\r\n body .contact-form .builder-step[data-step=\"2\"] .builder-options,\r\n body .contact-form .builder-step[data-step=\"3\"] .builder-options {\r\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\r\n column-gap: 10px !important;\r\n row-gap: 10px !important;\r\n }\r\n\r\n body .contact-form .builder-options .builder-option,\r\n body .contact-form .builder-step[data-step=\"1\"] .builder-option,\r\n body .contact-form .builder-step[data-step=\"2\"] .builder-option,\r\n body .contact-form .builder-step[data-step=\"3\"] .builder-option {\r\n min-height: 42px !important;\r\n padding: 8px 6px !important;\r\n font-size: 8.5px !important;\r\n letter-spacing: .045em !important;\r\n }\r\n\r\n body .contact-form .builder-actions {\r\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\r\n column-gap: 8px !important;\r\n }\r\n }\r\n\r\n @keyframes logoScroll {\r\n from {\r\n transform: translate3d(0, 0, 0);\r\n }\r\n\r\n to {\r\n transform: translate3d(-50%, 0, 0);\r\n }\r\n }\r\n\r\n @media (max-width: 1100px) {\r\n :root {\r\n --main-top: clamp(66px, 9vw, 104px);\r\n }\r\n\r\n .grid {\r\n grid-template-columns: minmax(240px, 380px) minmax(430px, 540px);\r\n gap: clamp(64px, 9vw, 120px);\r\n }\r\n\r\n .hero {\r\n max-width: 380px;\r\n }\r\n\r\n .info {\r\n width: min(100%, 540px);\r\n }\r\n }\r\n\r\n @media (max-width: 900px) {\r\n .grid {\r\n grid-template-columns: 1fr;\r\n justify-items: center;\r\n gap: 0;\r\n text-align: center;\r\n }\r\n\r\n .hero {\r\n width: 100%;\r\n max-width: 620px;\r\n padding-right: 0;\r\n }\r\n\r\n .contact {\r\n margin-right: auto;\r\n margin-left: auto;\r\n }\r\n\r\n .socials {\r\n justify-content: center;\r\n }\r\n\r\n .info {\r\n justify-self: center;\r\n width: 100%;\r\n max-width: 620px;\r\n margin-top: clamp(52px, 8vw, 72px);\r\n }\r\n\r\n .services {\r\n width: 100%;\r\n max-width: 620px;\r\n margin-right: auto;\r\n margin-left: auto;\r\n }\r\n\r\n .services__list {\r\n max-width: 620px;\r\n margin-right: auto;\r\n margin-left: auto;\r\n justify-items: center;\r\n }\r\n\r\n .section-title {\r\n text-align: center;\r\n }\r\n\r\n .service {\r\n display: inline-grid;\r\n grid-template-columns: auto auto;\r\n justify-content: center;\r\n gap: 12px;\r\n text-align: center;\r\n }\r\n\r\n .service:hover {\r\n transform: none;\r\n }\r\n\r\n .clients {\r\n margin-top: clamp(48px, 9vw, 68px);\r\n padding-top: 26px;\r\n }\r\n\r\n .clients__label {\r\n margin-bottom: 24px;\r\n text-align: center;\r\n }\r\n }\r\n\r\n @media (max-width: 720px) {\r\n :root {\r\n --page-x: 24px;\r\n --main-top: clamp(58px, 12vw, 84px);\r\n --main-bottom: clamp(60px, 12vw, 88px);\r\n }\r\n\r\n h1 {\r\n font-size: clamp(44px, 13vw, 72px);\r\n line-height: 1;\r\n }\r\n\r\n .contact {\r\n margin-top: clamp(34px, 9vw, 52px);\r\n padding-top: 18px;\r\n }\r\n\r\n .intro {\r\n margin-left: auto;\r\n margin-right: auto;\r\n margin-bottom: 24px;\r\n line-height: 1.65;\r\n }\r\n\r\n .info {\r\n width: 100%;\r\n max-width: 100%;\r\n margin-top: clamp(58px, 12vw, 82px);\r\n overflow: hidden;\r\n }\r\n\r\n .section-title {\r\n margin-bottom: 24px;\r\n }\r\n\r\n .services__list {\r\n display: grid;\r\n width: 100%;\r\n max-width: 360px;\r\n margin-right: auto;\r\n margin-left: auto;\r\n grid-template-columns: 1fr 1fr;\r\n column-gap: 22px;\r\n row-gap: 24px;\r\n justify-items: start;\r\n }\r\n\r\n .service {\r\n display: grid;\r\n grid-template-columns: 18px 1fr;\r\n width: 100%;\r\n gap: 8px;\r\n font-size: clamp(12px, 3.4vw, 14px);\r\n line-height: 1.32;\r\n letter-spacing: -.02em;\r\n text-align: left;\r\n }\r\n\r\n .service::before {\r\n font-size: 8px;\r\n line-height: 1.4;\r\n }\r\n\r\n .clients {\r\n width: 100%;\r\n max-width: 100%;\r\n margin-top: 46px;\r\n padding-top: 26px;\r\n overflow: hidden;\r\n }\r\n\r\n .clients__label {\r\n margin-bottom: 24px;\r\n text-align: center;\r\n }\r\n\r\n .clients__track {\r\n max-width: none;\r\n }\r\n }\r\n\r\n @media (max-width: 720px) {\r\n .contact-form {\r\n margin-top: 46px;\r\n padding-top: 26px;\r\n }\r\n\r\n .contact-form__intro {\r\n margin-right: auto;\r\n margin-left: auto;\r\n text-align: center;\r\n }\r\n }\r\n\r\n @media (max-width: 520px) {\r\n :root {\r\n --page-x: 18px;\r\n --logo-box-width: 90px;\r\n --logo-box-height: 34px;\r\n --logo-gap: 18px;\r\n }\r\n\r\n main {\r\n padding-top: 56px;\r\n }\r\n\r\n h1 {\r\n font-size: clamp(42px, 14vw, 62px);\r\n line-height: 1;\r\n letter-spacing: -.065em;\r\n }\r\n\r\n h1 span {\r\n letter-spacing: -.075em;\r\n }\r\n\r\n .contact,\r\n .panel {\r\n padding-top: 16px;\r\n }\r\n\r\n .contact {\r\n margin-top: 34px;\r\n }\r\n\r\n .intro {\r\n margin-bottom: 24px;\r\n }\r\n\r\n .services__list {\r\n max-width: 330px;\r\n column-gap: 20px;\r\n row-gap: 22px;\r\n }\r\n\r\n .service {\r\n grid-template-columns: 16px 1fr;\r\n gap: 7px;\r\n font-size: clamp(11.5px, 3.35vw, 13px);\r\n line-height: 1.34;\r\n }\r\n\r\n .clients {\r\n margin-top: 44px;\r\n padding-top: 24px;\r\n }\r\n\r\n .clients__track {\r\n animation-duration: 52s;\r\n }\r\n\r\n .clients__logo--playboy {\r\n --logo-w: 42px;\r\n --logo-h: 23px;\r\n }\r\n\r\n .clients__logo--esquire {\r\n --logo-w: 70px;\r\n --logo-h: 21px;\r\n }\r\n\r\n .clients__logo--cosmo,\r\n .clients__logo--sans,\r\n\r\n .clients__logo--arp {\r\n width: 112px;\r\n min-width: 112px;\r\n --logo-w: 104px;\r\n --logo-h: 31px;\r\n }\r\n\r\n .clients__logo--pes {\r\n width: 118px;\r\n min-width: 118px;\r\n --logo-w: 110px;\r\n --logo-h: 32px;\r\n }\r\n\r\n .clients__logo--pes .clients__text-logo {\r\n font-size: 9px;\r\n }\r\n\r\n .clients__logo--nck {\r\n width: 126px;\r\n min-width: 126px;\r\n height: 42px;\r\n --logo-w: 120px;\r\n --logo-h: 38px;\r\n }\r\n\r\n .clients__logo--crosscore {\r\n --logo-w: 64px;\r\n --logo-h: 27px;\r\n }\r\n\r\n .clients__logo--agora,\r\n .clients__logo--bit {\r\n --logo-w: 70px;\r\n --logo-h: 21px;\r\n }\r\n\r\n .clients__logo--btt {\r\n width: 112px;\r\n min-width: 112px;\r\n --logo-w: 104px;\r\n --logo-h: 31px;\r\n }\r\n\r\n .clients__logo--bok {\r\n width: 96px;\r\n min-width: 96px;\r\n --logo-w: 88px;\r\n --logo-h: 28px;\r\n }\r\n\r\n .clients__logo--medicover {\r\n width: 98px;\r\n min-width: 98px;\r\n --logo-w: 88px;\r\n --logo-h: 26px;\r\n }\r\n\r\n .clients__logo--bazaar {\r\n --logo-w: 92px;\r\n --logo-h: 22px;\r\n }\r\n\r\n .clients__logo--bazaar .clients__text-logo {\r\n font-size: 13px;\r\n }\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n .clients__marquee {\r\n -webkit-mask-image: none;\r\n mask-image: none;\r\n }\r\n\r\n .clients__track {\r\n animation: none;\r\n width: 100%;\r\n transform: none;\r\n }\r\n\r\n .clients__group {\r\n width: 100%;\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n row-gap: 24px;\r\n padding: 0 20px;\r\n }\r\n\r\n .clients__group[aria-hidden=\"true\"] {\r\n display: none;\r\n }\r\n\r\n .social-link,\r\n .service {\r\n transition: none;\r\n }\r\n }\r\n\r\n @media (min-width: 1200px) {\r\n main {\r\n width: 100vw;\r\n max-width: none;\r\n margin: 0;\r\n padding: var(--main-top) clamp(24px, 2.5vw, 48px) var(--main-bottom);\r\n }\r\n\r\n .grid {\r\n width: 100%;\r\n grid-template-columns: 430px 620px;\r\n justify-content: space-between;\r\n gap: 0;\r\n }\r\n\r\n .hero {\r\n max-width: 430px;\r\n justify-self: start;\r\n }\r\n\r\n .info {\r\n width: 620px;\r\n justify-self: end;\r\n }\r\n\r\n h1 {\r\n font-size: clamp(64px, 6.2vw, 96px);\r\n line-height: .96;\r\n }\r\n\r\n .contact {\r\n width: min(100%, 320px);\r\n }\r\n }\r\n\r\nbody .contact-form .builder-actions {\r\n display: grid !important;\r\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\r\n align-items: stretch !important;\r\n gap: 10px !important;\r\n}\r\n\r\nbody .contact-form .builder-action-slot {\r\n display: flex !important;\r\n width: 100% !important;\r\n min-width: 0 !important;\r\n height: 100% !important;\r\n margin: 0 !important;\r\n padding: 0 !important;\r\n align-items: stretch !important;\r\n}\r\n\r\nbody .contact-form .builder-action-slot--forward {\r\n position: relative !important;\r\n}\r\n\r\nbody .contact-form .builder-action-slot .builder-nav,\r\nbody .contact-form .builder-action-slot .builder-submit-wrap,\r\nbody .contact-form .builder-action-slot .wpcf7-submit {\r\n width: 100% !important;\r\n min-width: 0 !important;\r\n margin: 0 !important;\r\n}\r\n\r\nbody .contact-form .builder-action-slot .builder-nav,\r\nbody .contact-form .builder-action-slot .wpcf7-submit {\r\n display: inline-flex !important;\r\n height: 40px !important;\r\n min-height: 40px !important;\r\n padding: 8px 12px !important;\r\n align-items: center !important;\r\n justify-content: center !important;\r\n line-height: 1 !important;\r\n}\r\n\r\nbody .contact-form .builder-submit-wrap {\r\n position: relative !important;\r\n height: 40px !important;\r\n}\r\n\r\nbody .contact-form .builder-submit-wrap > p {\r\n display: contents !important;\r\n}\r\n\r\nbody .contact-form .builder-submit-wrap .wpcf7-spinner {\r\n position: absolute !important;\r\n top: 50% !important;\r\n right: 12px !important;\r\n left: auto !important;\r\n margin: 0 !important;\r\n transform: translateY(-50%) !important;\r\n pointer-events: none !important;\r\n}\r\n\r\nbody .contact-form .message-builder:not(.is-final) .builder-submit-wrap {\r\n display: none !important;\r\n}\r\n\r\nbody .contact-form .message-builder.is-final .builder-next {\r\n display: none !important;\r\n}\r\n\r\nbody .contact-form .message-builder.is-final .builder-submit-wrap {\r\n display: block !important;\r\n}\r\n\r\n@media (max-width: 420px) {\r\n body .contact-form .builder-actions {\r\n gap: 8px !important;\r\n }\r\n\r\n body .contact-form .builder-action-slot .builder-nav,\r\n body .contact-form .builder-action-slot .wpcf7-submit,\r\n body .contact-form .builder-submit-wrap {\r\n height: 38px !important;\r\n min-height: 38px !important;\r\n }\r\n}\r\n\r\n.works-loop {\r\n width: 100%;\r\n margin-top: clamp(56px, 7vw, 96px);\r\n padding-top: 24px;\r\n border-top: 1px solid var(--line);\r\n overflow: hidden;\r\n}\r\n\r\n.works-loop__header {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 20px;\r\n margin-bottom: 20px;\r\n}\r\n\r\n.works-loop__header .section-title {\r\n margin: 0;\r\n}\r\n\r\n.works-loop__controls {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n}\r\n\r\n.works-loop__arrow {\r\n appearance: none;\r\n -webkit-appearance: none;\r\n width: 42px;\r\n height: 42px;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n border: 1px solid var(--line);\r\n border-radius: 50%;\r\n background: transparent;\r\n color: var(--text);\r\n font-family: var(--sans);\r\n font-size: 18px;\r\n line-height: 1;\r\n cursor: pointer;\r\n transition: border-color .16s ease, background-color .16s ease, color .16s ease;\r\n}\r\n\r\n.works-loop__arrow:hover,\r\n.works-loop__arrow:focus-visible {\r\n border-color: var(--text);\r\n background: var(--text);\r\n color: var(--bg);\r\n outline: none;\r\n}\r\n\r\n.works-loop__viewport {\r\n width: 100%;\r\n min-width: 0;\r\n overflow-x: auto;\r\n overflow-y: hidden;\r\n -webkit-overflow-scrolling: touch;\r\n overscroll-behavior-inline: contain;\r\n scroll-snap-type: x mandatory;\r\n scrollbar-width: none;\r\n cursor: grab;\r\n touch-action: pan-x pan-y;\r\n}\r\n\r\n.works-loop__viewport::-webkit-scrollbar {\r\n display: none;\r\n}\r\n\r\n.works-loop__viewport.is-dragging {\r\n cursor: grabbing;\r\n scroll-snap-type: none;\r\n user-select: none;\r\n}\r\n\r\n.works-loop__track {\r\n display: flex;\r\n align-items: flex-start;\r\n width: max-content;\r\n max-width: none;\r\n gap: clamp(10px, 1.2vw, 16px);\r\n padding-right: var(--page-x);\r\n}\r\n\r\n.works-loop__item {\r\n position: relative;\r\n flex: 0 0 clamp(250px, 28vw, 410px);\r\n width: clamp(250px, 28vw, 410px);\r\n aspect-ratio: 16 \/ 9;\r\n overflow: hidden;\r\n background: #171717;\r\n scroll-snap-align: start;\r\n scroll-snap-stop: always;\r\n contain: layout paint;\r\n}\r\n\r\n.works-loop__thumbnail,\r\n.works-loop__item iframe {\r\n position: absolute;\r\n inset: 0;\r\n display: block;\r\n width: 100%;\r\n height: 100%;\r\n border: 0;\r\n}\r\n\r\n.works-loop__thumbnail {\r\n z-index: 1;\r\n object-fit: cover;\r\n object-position: center center;\r\n background: #171717;\r\n transform: none;\r\n}\r\n\r\n.works-loop__item iframe {\r\n z-index: 4;\r\n background: #111;\r\n}\r\n\r\nbody .works-loop .works-loop__item {\r\n position: relative !important;\r\n aspect-ratio: 16 \/ 9 !important;\r\n overflow: hidden !important;\r\n}\r\n\r\nbody .works-loop .works-loop__item > img.works-loop__thumbnail,\r\nbody .works-loop .works-loop__item > iframe {\r\n position: absolute !important;\r\n inset: 0 !important;\r\n display: block !important;\r\n width: 100% !important;\r\n height: 100% !important;\r\n min-width: 100% !important;\r\n min-height: 100% !important;\r\n max-width: none !important;\r\n max-height: none !important;\r\n margin: 0 !important;\r\n padding: 0 !important;\r\n border: 0 !important;\r\n aspect-ratio: auto !important;\r\n}\r\n\r\nbody .works-loop .works-loop__item > img.works-loop__thumbnail {\r\n object-fit: cover !important;\r\n object-position: center center !important;\r\n}\r\n\r\n.works-loop__item::after {\r\n content: \"\";\r\n position: absolute;\r\n inset: 0;\r\n z-index: 5;\r\n pointer-events: none;\r\n box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);\r\n}\r\n\r\n.works-loop__play {\r\n position: absolute;\r\n inset: 0;\r\n z-index: 3;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 100%;\r\n padding: 0;\r\n border: 0;\r\n background: transparent;\r\n color: #fff;\r\n font: inherit;\r\n text-decoration: none;\r\n cursor: pointer;\r\n -webkit-tap-highlight-color: transparent;\r\n}\r\n\r\n.works-loop__play-icon {\r\n position: relative;\r\n width: 54px;\r\n height: 54px;\r\n display: block;\r\n border: 1px solid rgba(255, 255, 255, .82);\r\n border-radius: 50%;\r\n background: rgba(0, 0, 0, .42);\r\n transition: transform .16s ease, background-color .16s ease;\r\n}\r\n\r\n.works-loop__play-icon::after {\r\n content: \"\";\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n margin-left: 2px;\r\n transform: translate(-50%, -50%);\r\n border-top: 7px solid transparent;\r\n border-bottom: 7px solid transparent;\r\n border-left: 11px solid currentColor;\r\n}\r\n\r\n.works-loop__play:hover .works-loop__play-icon,\r\n.works-loop__play:focus-visible .works-loop__play-icon {\r\n transform: scale(1.06);\r\n background: rgba(0, 0, 0, .68);\r\n}\r\n\r\n.works-loop__play:focus-visible {\r\n outline: 2px solid #fff;\r\n outline-offset: -4px;\r\n}\r\n\r\n.works-loop__status {\r\n position: absolute;\r\n left: 12px;\r\n bottom: 10px;\r\n z-index: 2;\r\n color: rgba(255, 255, 255, .78);\r\n font-size: 9px;\r\n line-height: 1.3;\r\n letter-spacing: .1em;\r\n text-transform: uppercase;\r\n pointer-events: none;\r\n}\r\n\r\n@media (max-width: 720px) {\r\n .works-loop {\r\n margin-top: 48px;\r\n padding-top: 20px;\r\n }\r\n\r\n .works-loop__header {\r\n margin-bottom: 16px;\r\n }\r\n\r\n .works-loop__controls {\r\n display: none;\r\n }\r\n\r\n .works-loop__track {\r\n gap: 10px;\r\n padding-right: 18px;\r\n }\r\n\r\n .works-loop__item {\r\n flex-basis: min(82vw, 330px);\r\n width: min(82vw, 330px);\r\n }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n .works-loop__viewport {\r\n scroll-behavior: auto !important;\r\n }\r\n\r\n .works-loop__arrow,\r\n .works-loop__play-icon {\r\n transition: none;\r\n }\r\n}\r\n\r\n.construction-title {\r\n position: relative;\r\n left: 50%;\r\n width: 100vw;\r\n max-width: none;\r\n margin: 0 0 clamp(56px, 7vw, 96px) -50vw;\r\n padding: 0 var(--page-x);\r\n text-align: center;\r\n font-family: var(--serif);\r\n font-weight: 400;\r\n font-size: clamp(58px, 9.5vw, 168px);\r\n line-height: .9;\r\n letter-spacing: -.075em;\r\n white-space: normal;\r\n}\r\n\r\n.construction-title span {\r\n display: inline;\r\n font-family: var(--serif);\r\n font-style: italic;\r\n letter-spacing: -.085em;\r\n}\r\n\r\n@media (max-width: 720px) {\r\n .construction-title {\r\n font-size: clamp(48px, 14vw, 82px);\r\n line-height: .94;\r\n margin-bottom: 48px;\r\n }\r\n}\r\n\r\n.page {\r\n width: 100%;\r\n min-width: 0;\r\n max-width: 100%;\r\n grid-template-columns: minmax(0, 1fr);\r\n overflow-x: hidden;\r\n overflow-x: clip;\r\n}\r\n\r\nmain,\r\n.grid,\r\n.hero,\r\n.info,\r\n.clients,\r\n.clients__marquee,\r\n.works-loop,\r\n.works-loop__viewport,\r\n.project-contact,\r\n.project-contact__layout {\r\n min-width: 0;\r\n max-width: 100%;\r\n}\r\n\r\n@media (max-width: 900px) {\r\n main {\r\n width: calc(100% - (var(--page-x) * 2)) !important;\r\n max-width: 100% !important;\r\n margin-right: auto !important;\r\n margin-left: auto !important;\r\n }\r\n\r\n .grid,\r\n .project-contact__layout {\r\n width: 100% !important;\r\n grid-template-columns: minmax(0, 1fr) !important;\r\n }\r\n\r\n .hero,\r\n .info,\r\n .services,\r\n .clients,\r\n .works-loop,\r\n .project-contact,\r\n .contact-form {\r\n width: 100% !important;\r\n max-width: 100% !important;\r\n }\r\n}\r\n\r\n.construction-title {\r\n margin-bottom: clamp(34px, 4vw, 56px) !important;\r\n}\r\n\r\nmain > .grid {\r\n width: min(100%, 980px) !important;\r\n margin: 0 auto !important;\r\n grid-template-columns: minmax(0, 1fr) !important;\r\n justify-content: center !important;\r\n justify-items: center !important;\r\n gap: clamp(52px, 6vw, 82px) !important;\r\n text-align: center !important;\r\n}\r\n\r\nmain > .grid .hero {\r\n width: 100% !important;\r\n max-width: 100% !important;\r\n justify-self: center !important;\r\n padding: 0 !important;\r\n text-align: center !important;\r\n}\r\n\r\nmain > .grid .contact {\r\n width: min(100%, 440px) !important;\r\n margin: 0 auto !important;\r\n padding-top: 0 !important;\r\n text-align: center !important;\r\n}\r\n\r\nmain > .grid .intro {\r\n margin-right: auto !important;\r\n margin-left: auto !important;\r\n text-align: center !important;\r\n}\r\n\r\nmain > .grid .socials {\r\n justify-content: center !important;\r\n}\r\n\r\nmain > .grid .info {\r\n width: min(100%, 900px) !important;\r\n max-width: 900px !important;\r\n margin: 0 auto !important;\r\n justify-self: center !important;\r\n overflow: hidden !important;\r\n text-align: center !important;\r\n}\r\n\r\nmain > .grid .services {\r\n width: 100% !important;\r\n max-width: 820px !important;\r\n margin: 0 auto !important;\r\n}\r\n\r\nmain > .grid .section-title,\r\nmain > .grid .clients__label {\r\n text-align: center !important;\r\n}\r\n\r\nmain > .grid .services__list {\r\n width: 100% !important;\r\n max-width: 760px !important;\r\n margin-right: auto !important;\r\n margin-left: auto !important;\r\n justify-items: center !important;\r\n}\r\n\r\nmain > .grid .service {\r\n display: inline-grid !important;\r\n grid-template-columns: auto auto !important;\r\n justify-content: center !important;\r\n text-align: center !important;\r\n}\r\n\r\nmain > .grid .clients {\r\n width: 100% !important;\r\n max-width: 900px !important;\r\n margin-right: auto !important;\r\n margin-left: auto !important;\r\n}\r\n\r\n@media (max-width: 720px) {\r\n .construction-title {\r\n margin-bottom: 30px !important;\r\n }\r\n\r\n main > .grid {\r\n gap: 44px !important;\r\n }\r\n\r\n main > .grid .services__list {\r\n max-width: 360px !important;\r\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\r\n justify-items: center !important;\r\n }\r\n\r\n main > .grid .service {\r\n width: 100% !important;\r\n grid-template-columns: auto auto !important;\r\n justify-content: center !important;\r\n text-align: center !important;\r\n }\r\n}\r\n\r\nmain > .construction-title {\r\n text-align: center !important;\r\n}\r\n\r\nmain > .grid {\r\n display: flex !important;\r\n flex-direction: column !important;\r\n align-items: center !important;\r\n justify-content: flex-start !important;\r\n width: min(100%, 1120px) !important;\r\n max-width: 1120px !important;\r\n margin-right: auto !important;\r\n margin-left: auto !important;\r\n gap: clamp(58px, 6vw, 86px) !important;\r\n text-align: center !important;\r\n}\r\n\r\nmain > .grid > .hero,\r\nmain > .grid > .info {\r\n width: 100% !important;\r\n max-width: 100% !important;\r\n margin-right: auto !important;\r\n margin-left: auto !important;\r\n justify-self: auto !important;\r\n align-self: auto !important;\r\n text-align: center !important;\r\n}\r\n\r\nmain > .grid .contact {\r\n width: min(100%, 520px) !important;\r\n margin-right: auto !important;\r\n margin-left: auto !important;\r\n text-align: center !important;\r\n}\r\n\r\nmain > .grid .intro,\r\nmain > .grid .section-title,\r\nmain > .grid .clients__label {\r\n text-align: center !important;\r\n}\r\n\r\nmain > .grid .socials {\r\n justify-content: center !important;\r\n}\r\n\r\nmain > .grid .services {\r\n width: min(100%, 900px) !important;\r\n max-width: 900px !important;\r\n margin-right: auto !important;\r\n margin-left: auto !important;\r\n}\r\n\r\nmain > .grid .services__list {\r\n width: min(100%, 820px) !important;\r\n max-width: 820px !important;\r\n margin-right: auto !important;\r\n margin-left: auto !important;\r\n justify-items: center !important;\r\n}\r\n\r\nmain > .grid .service {\r\n justify-content: center !important;\r\n text-align: center !important;\r\n}\r\n\r\nmain > .grid .clients {\r\n width: min(100%, 1040px) !important;\r\n max-width: 1040px !important;\r\n margin-right: auto !important;\r\n margin-left: auto !important;\r\n text-align: center !important;\r\n}\r\n\r\nmain > .grid .clients__marquee {\r\n width: 100% !important;\r\n margin-right: auto !important;\r\n margin-left: auto !important;\r\n}\r\n\r\nmain > .works-loop {\r\n width: min(100%, 1180px) !important;\r\n max-width: 1180px !important;\r\n margin-right: auto !important;\r\n margin-left: auto !important;\r\n}\r\n\r\nmain > .works-loop .works-loop__header {\r\n flex-direction: column !important;\r\n align-items: center !important;\r\n justify-content: center !important;\r\n gap: 14px !important;\r\n text-align: center !important;\r\n}\r\n\r\nmain > .works-loop .works-loop__header .section-title {\r\n width: 100% !important;\r\n text-align: center !important;\r\n}\r\n\r\nmain > .works-loop .works-loop__controls {\r\n justify-content: center !important;\r\n}\r\n\r\nmain > .works-loop .works-loop__viewport {\r\n width: 100% !important;\r\n margin-right: auto !important;\r\n margin-left: auto !important;\r\n}\r\n\r\n@media (max-width: 720px) {\r\n main > .grid {\r\n gap: 46px !important;\r\n }\r\n\r\n main > .grid .services__list {\r\n width: min(100%, 380px) !important;\r\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\r\n }\r\n\r\n main > .works-loop .works-loop__header {\r\n gap: 12px !important;\r\n }\r\n}\r\n\r\nmain > .grid .info {\r\n display: grid !important;\r\n grid-template-columns: minmax(280px, .82fr) minmax(0, 1.18fr) !important;\r\n align-items: start !important;\r\n gap: clamp(44px, 6vw, 88px) !important;\r\n width: min(100%, 1120px) !important;\r\n max-width: 1120px !important;\r\n overflow: visible !important;\r\n}\r\n\r\nmain > .grid .services,\r\nmain > .grid .clients {\r\n width: 100% !important;\r\n max-width: none !important;\r\n margin: 0 !important;\r\n}\r\n\r\nmain > .grid .clients {\r\n padding-top: 0 !important;\r\n border-top: 0 !important;\r\n overflow: hidden !important;\r\n}\r\n\r\nmain > .grid .services__list {\r\n width: 100% !important;\r\n max-width: 440px !important;\r\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\r\n column-gap: clamp(24px, 3vw, 42px) !important;\r\n row-gap: 24px !important;\r\n}\r\n\r\nmain > .grid .service {\r\n display: flex !important;\r\n width: 100% !important;\r\n align-items: center !important;\r\n justify-content: center !important;\r\n grid-template-columns: none !important;\r\n gap: 0 !important;\r\n text-align: center !important;\r\n}\r\n\r\nmain > .grid .service::before {\r\n content: none !important;\r\n display: none !important;\r\n}\r\n\r\nmain > .works-loop {\r\n width: min(100%, 1440px) !important;\r\n max-width: 1440px !important;\r\n overflow: visible !important;\r\n}\r\n\r\nmain > .works-loop .works-loop__header {\r\n display: block !important;\r\n margin-bottom: 18px !important;\r\n}\r\n\r\nmain > .works-loop .works-loop__carousel {\r\n display: grid !important;\r\n grid-template-columns: 44px minmax(0, 1fr) 44px !important;\r\n align-items: center !important;\r\n gap: clamp(10px, 1.2vw, 18px) !important;\r\n width: 100% !important;\r\n}\r\n\r\nmain > .works-loop .works-loop__arrow {\r\n display: inline-flex !important;\r\n position: relative !important;\r\n z-index: 8 !important;\r\n flex: 0 0 auto !important;\r\n}\r\n\r\nmain > .works-loop .works-loop__viewport {\r\n min-width: 0 !important;\r\n width: 100% !important;\r\n}\r\n\r\nmain > .works-loop .works-loop__track {\r\n gap: clamp(8px, .8vw, 12px) !important;\r\n padding-right: 0 !important;\r\n}\r\n\r\nmain > .works-loop .works-loop__item {\r\n flex: 0 0 clamp(190px, 17vw, 250px) !important;\r\n width: clamp(190px, 17vw, 250px) !important;\r\n}\r\n\r\n@media (max-width: 900px) {\r\n main > .grid .info {\r\n grid-template-columns: minmax(0, 1fr) !important;\r\n gap: 46px !important;\r\n width: 100% !important;\r\n }\r\n\r\n main > .grid .services,\r\n main > .grid .clients {\r\n width: min(100%, 620px) !important;\r\n margin-right: auto !important;\r\n margin-left: auto !important;\r\n }\r\n\r\n main > .grid .clients {\r\n padding-top: 26px !important;\r\n border-top: 1px solid var(--line) !important;\r\n }\r\n}\r\n\r\n@media (max-width: 720px) {\r\n main > .grid .services__list {\r\n width: min(100%, 380px) !important;\r\n max-width: 380px !important;\r\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\r\n column-gap: 12px !important;\r\n row-gap: 16px !important;\r\n }\r\n\r\n main > .works-loop .works-loop__carousel {\r\n grid-template-columns: 36px minmax(0, 1fr) 36px !important;\r\n gap: 8px !important;\r\n }\r\n\r\n main > .works-loop .works-loop__arrow {\r\n width: 36px !important;\r\n height: 36px !important;\r\n font-size: 16px !important;\r\n }\r\n\r\n main > .works-loop .works-loop__item {\r\n flex-basis: min(62vw, 260px) !important;\r\n width: min(62vw, 260px) !important;\r\n }\r\n}\r\n\r\n:root {\r\n --section-width: 1240px;\r\n}\r\n\r\nmain > .construction-title,\r\nmain > .grid,\r\nmain > .works-loop,\r\nmain > .project-contact {\r\n width: min(100%, var(--section-width)) !important;\r\n max-width: var(--section-width) !important;\r\n margin-right: auto !important;\r\n margin-left: auto !important;\r\n}\r\n\r\nmain > .construction-title {\r\n position: static !important;\r\n left: auto !important;\r\n padding-right: 0 !important;\r\n padding-left: 0 !important;\r\n font-size: clamp(58px, 8vw, 128px) !important;\r\n text-align: center !important;\r\n}\r\n\r\nmain > .grid .hero,\r\nmain > .grid .contact,\r\nmain > .grid .info {\r\n width: 100% !important;\r\n max-width: 100% !important;\r\n}\r\n\r\nmain > .grid .info {\r\n display: flex !important;\r\n flex-direction: column !important;\r\n align-items: stretch !important;\r\n gap: clamp(38px, 4.5vw, 60px) !important;\r\n overflow: hidden !important;\r\n}\r\n\r\nmain > .grid .services,\r\nmain > .grid .clients {\r\n width: 100% !important;\r\n max-width: 100% !important;\r\n margin-right: auto !important;\r\n margin-left: auto !important;\r\n}\r\n\r\nmain > .grid .services__list {\r\n width: 100% !important;\r\n max-width: 100% !important;\r\n display: grid !important;\r\n grid-template-columns: repeat(3, minmax(0, 1fr)) !important;\r\n column-gap: clamp(28px, 4vw, 64px) !important;\r\n row-gap: 22px !important;\r\n align-items: center !important;\r\n justify-items: stretch !important;\r\n}\r\n\r\nmain > .grid .service {\r\n display: flex !important;\r\n width: 100% !important;\r\n min-height: 34px !important;\r\n align-items: center !important;\r\n justify-content: center !important;\r\n padding: 0 8px !important;\r\n text-align: center !important;\r\n}\r\n\r\nmain > .grid .service::before {\r\n content: none !important;\r\n display: none !important;\r\n}\r\n\r\nmain > .grid .clients {\r\n padding-top: 30px !important;\r\n border-top: 1px solid var(--line) !important;\r\n}\r\n\r\nmain > .works-loop {\r\n overflow: visible !important;\r\n}\r\n\r\nmain > .works-loop .works-loop__carousel {\r\n width: 100% !important;\r\n grid-template-columns: 48px minmax(0, 1fr) 48px !important;\r\n gap: clamp(12px, 1.5vw, 22px) !important;\r\n}\r\n\r\nmain > .works-loop .works-loop__track {\r\n gap: clamp(12px, 1.2vw, 18px) !important;\r\n}\r\n\r\nmain > .works-loop .works-loop__item {\r\n flex: 0 0 clamp(300px, 28vw, 380px) !important;\r\n width: clamp(300px, 28vw, 380px) !important;\r\n}\r\n\r\nmain > .project-contact .project-contact__layout {\r\n width: 100% !important;\r\n max-width: 100% !important;\r\n}\r\n\r\n@media (max-width: 900px) {\r\n main > .construction-title,\r\n main > .grid,\r\n main > .works-loop,\r\n main > .project-contact {\r\n width: 100% !important;\r\n max-width: 100% !important;\r\n }\r\n\r\n main > .grid .info {\r\n gap: 42px !important;\r\n }\r\n\r\n main > .grid .services__list {\r\n grid-template-columns: repeat(3, minmax(0, 1fr)) !important;\r\n column-gap: 18px !important;\r\n }\r\n\r\n main > .works-loop .works-loop__item {\r\n flex-basis: clamp(280px, 42vw, 340px) !important;\r\n width: clamp(280px, 42vw, 340px) !important;\r\n }\r\n}\r\n\r\n@media (max-width: 720px) {\r\n main > .construction-title {\r\n font-size: clamp(48px, 14vw, 82px) !important;\r\n }\r\n\r\n main > .grid .services__list {\r\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\r\n column-gap: 12px !important;\r\n row-gap: 16px !important;\r\n }\r\n\r\n main > .grid .clients {\r\n padding-top: 26px !important;\r\n }\r\n\r\n main > .works-loop .works-loop__carousel {\r\n grid-template-columns: 38px minmax(0, 1fr) 38px !important;\r\n gap: 8px !important;\r\n }\r\n\r\n main > .works-loop .works-loop__item {\r\n flex-basis: min(74vw, 320px) !important;\r\n width: min(74vw, 320px) !important;\r\n }\r\n}\r\n\r\nmain > .construction-title,\r\nmain > .grid,\r\nmain > .works-loop,\r\nmain > .project-contact {\r\n width: 100% !important;\r\n max-width: none !important;\r\n margin-right: 0 !important;\r\n margin-left: 0 !important;\r\n}\r\n\r\nmain > .grid,\r\nmain > .grid > .hero,\r\nmain > .grid > .info,\r\nmain > .grid .services,\r\nmain > .grid .clients,\r\nmain > .grid .clients__marquee,\r\nmain > .project-contact .project-contact__layout {\r\n width: 100% !important;\r\n max-width: none !important;\r\n}\r\n\r\nmain > .grid .contact {\r\n width: 100% !important;\r\n max-width: none !important;\r\n}\r\n\r\nmain > .grid .intro {\r\n max-width: 560px !important;\r\n margin-right: auto !important;\r\n margin-left: auto !important;\r\n}\r\n\r\nmain > .grid .services__list {\r\n width: 100% !important;\r\n max-width: none !important;\r\n grid-template-columns: repeat(3, minmax(0, 1fr)) !important;\r\n}\r\n\r\nmain > .grid .clients {\r\n width: 100% !important;\r\n max-width: none !important;\r\n}\r\n\r\n@media (min-width: 901px) {\r\n main > .works-loop {\r\n overflow: visible !important;\r\n }\r\n\r\n main > .works-loop .works-loop__carousel {\r\n display: block !important;\r\n width: 100% !important;\r\n }\r\n\r\n main > .works-loop .works-loop__arrow {\r\n display: none !important;\r\n }\r\n\r\n main > .works-loop .works-loop__viewport {\r\n width: 100% !important;\r\n overflow: visible !important;\r\n scroll-snap-type: none !important;\r\n cursor: default !important;\r\n touch-action: auto !important;\r\n }\r\n\r\n main > .works-loop .works-loop__track {\r\n display: grid !important;\r\n grid-template-columns: repeat(4, minmax(0, 1fr)) !important;\r\n gap: clamp(12px, 1.25vw, 22px) !important;\r\n width: 100% !important;\r\n max-width: none !important;\r\n padding: 0 !important;\r\n transform: none !important;\r\n }\r\n\r\n main > .works-loop .works-loop__item {\r\n width: 100% !important;\r\n min-width: 0 !important;\r\n max-width: none !important;\r\n flex: none !important;\r\n scroll-snap-align: none !important;\r\n }\r\n}\r\n\r\n@media (min-width: 901px) and (max-width: 1250px) {\r\n main > .works-loop .works-loop__track {\r\n grid-template-columns: repeat(3, minmax(0, 1fr)) !important;\r\n }\r\n}\r\n\r\n@media (max-width: 900px) {\r\n main > .works-loop .works-loop__carousel {\r\n display: grid !important;\r\n grid-template-columns: 38px minmax(0, 1fr) 38px !important;\r\n gap: 8px !important;\r\n }\r\n\r\n main > .works-loop .works-loop__arrow {\r\n display: inline-flex !important;\r\n }\r\n\r\n main > .works-loop .works-loop__viewport {\r\n overflow-x: auto !important;\r\n overflow-y: hidden !important;\r\n scroll-snap-type: x mandatory !important;\r\n cursor: grab !important;\r\n }\r\n\r\n main > .works-loop .works-loop__track {\r\n display: flex !important;\r\n width: max-content !important;\r\n gap: 12px !important;\r\n }\r\n\r\n main > .works-loop .works-loop__item {\r\n flex: 0 0 min(74vw, 340px) !important;\r\n width: min(74vw, 340px) !important;\r\n }\r\n}\r\n\r\n@media (min-width: 901px) {\r\n main > .works-loop .works-loop__carousel {\r\n display: block !important;\r\n width: 100% !important;\r\n }\r\n\r\n main > .works-loop .works-loop__arrow,\r\n main > .works-loop .works-loop__controls {\r\n display: none !important;\r\n }\r\n\r\n main > .works-loop .works-loop__viewport {\r\n width: 100% !important;\r\n overflow-x: auto !important;\r\n overflow-y: hidden !important;\r\n -webkit-overflow-scrolling: touch !important;\r\n overscroll-behavior-inline: contain !important;\r\n scroll-snap-type: x mandatory !important;\r\n scrollbar-width: none !important;\r\n cursor: grab !important;\r\n touch-action: pan-x pan-y !important;\r\n }\r\n\r\n main > .works-loop .works-loop__viewport::-webkit-scrollbar {\r\n display: none !important;\r\n }\r\n\r\n main > .works-loop .works-loop__viewport.is-dragging {\r\n cursor: grabbing !important;\r\n scroll-snap-type: none !important;\r\n }\r\n\r\n main > .works-loop .works-loop__track {\r\n --video-strip-gap: 16px;\r\n display: flex !important;\r\n width: 100% !important;\r\n max-width: none !important;\r\n gap: var(--video-strip-gap) !important;\r\n padding: 0 !important;\r\n transform: none !important;\r\n }\r\n\r\n main > .works-loop .works-loop__item {\r\n flex: 0 0 calc(25% - 12px) !important;\r\n width: calc(25% - 12px) !important;\r\n min-width: 0 !important;\r\n max-width: none !important;\r\n scroll-snap-align: start !important;\r\n scroll-snap-stop: always !important;\r\n }\r\n}\r\n\r\n@media (min-width: 901px) {\r\n main > .works-loop {\r\n overflow: visible !important;\r\n }\r\n\r\n main > .works-loop .works-loop__carousel {\r\n display: block !important;\r\n width: 100% !important;\r\n }\r\n\r\n main > .works-loop .works-loop__arrow,\r\n main > .works-loop .works-loop__controls {\r\n display: none !important;\r\n }\r\n\r\n main > .works-loop .works-loop__viewport {\r\n width: 100% !important;\r\n overflow: visible !important;\r\n scroll-snap-type: none !important;\r\n cursor: default !important;\r\n touch-action: auto !important;\r\n }\r\n\r\n main > .works-loop .works-loop__track {\r\n display: grid !important;\r\n grid-template-columns: repeat(4, minmax(0, 1fr)) !important;\r\n gap: clamp(12px, 1.25vw, 22px) !important;\r\n width: 100% !important;\r\n max-width: none !important;\r\n padding: 0 !important;\r\n transform: none !important;\r\n }\r\n\r\n main > .works-loop .works-loop__item {\r\n width: 100% !important;\r\n min-width: 0 !important;\r\n max-width: none !important;\r\n flex: none !important;\r\n scroll-snap-align: none !important;\r\n }\r\n}\r\n\r\n@media (max-width: 720px) {\r\n main > .works-loop {\r\n overflow: hidden !important;\r\n }\r\n\r\n main > .works-loop .works-loop__carousel {\r\n display: block !important;\r\n width: 100% !important;\r\n }\r\n\r\n main > .works-loop .works-loop__arrow,\r\n main > .works-loop .works-loop__controls {\r\n display: none !important;\r\n }\r\n\r\n main > .works-loop .works-loop__viewport {\r\n width: 100% !important;\r\n overflow-x: auto !important;\r\n overflow-y: hidden !important;\r\n -webkit-overflow-scrolling: touch !important;\r\n overscroll-behavior-inline: contain !important;\r\n scroll-snap-type: x mandatory !important;\r\n scrollbar-width: none !important;\r\n touch-action: pan-x pan-y !important;\r\n cursor: grab !important;\r\n }\r\n\r\n main > .works-loop .works-loop__viewport::-webkit-scrollbar {\r\n display: none !important;\r\n }\r\n\r\n main > .works-loop .works-loop__track {\r\n display: flex !important;\r\n width: max-content !important;\r\n max-width: none !important;\r\n gap: 10px !important;\r\n padding: 0 18px 0 0 !important;\r\n transform: none !important;\r\n }\r\n\r\n main > .works-loop .works-loop__item {\r\n flex: 0 0 clamp(145px, 43vw, 190px) !important;\r\n width: clamp(145px, 43vw, 190px) !important;\r\n min-width: 0 !important;\r\n max-width: none !important;\r\n scroll-snap-align: start !important;\r\n scroll-snap-stop: normal !important;\r\n }\r\n}\r\n\r\n@media (max-width: 720px) {\r\n main > .works-loop {\r\n overflow: visible !important;\r\n }\r\n\r\n main > .works-loop .works-loop__carousel {\r\n display: block !important;\r\n width: 100% !important;\r\n }\r\n\r\n main > .works-loop .works-loop__arrow,\r\n main > .works-loop .works-loop__controls {\r\n display: none !important;\r\n }\r\n\r\n main > .works-loop .works-loop__viewport {\r\n width: 100% !important;\r\n overflow: visible !important;\r\n scroll-snap-type: none !important;\r\n scrollbar-width: auto !important;\r\n touch-action: auto !important;\r\n cursor: default !important;\r\n }\r\n\r\n main > .works-loop .works-loop__track {\r\n display: grid !important;\r\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\r\n gap: 10px !important;\r\n width: 100% !important;\r\n max-width: none !important;\r\n padding: 0 !important;\r\n transform: none !important;\r\n }\r\n\r\n main > .works-loop .works-loop__item {\r\n width: 100% !important;\r\n min-width: 0 !important;\r\n max-width: none !important;\r\n flex: none !important;\r\n scroll-snap-align: none !important;\r\n scroll-snap-stop: normal !important;\r\n }\r\n}\r\n\r\n.websites {\r\n width: 100%;\r\n margin-top: clamp(48px, 6vw, 80px);\r\n padding-top: 24px;\r\n border-top: 1px solid var(--line);\r\n font-family: var(--inter);\r\n overflow: hidden;\r\n}\r\n\r\n.websites__header {\r\n width: 100%;\r\n margin-bottom: 20px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 20px;\r\n}\r\n\r\n.websites__header .section-title {\r\n margin: 0;\r\n text-align: left;\r\n}\r\n\r\n.websites__controls {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n}\r\n\r\n.websites__arrow {\r\n appearance: none;\r\n -webkit-appearance: none;\r\n width: 42px;\r\n height: 42px;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n border: 1px solid var(--line);\r\n border-radius: 50%;\r\n background: transparent;\r\n color: var(--text);\r\n font-family: var(--sans);\r\n font-size: 18px;\r\n line-height: 1;\r\n cursor: pointer;\r\n transition: border-color .16s ease, background-color .16s ease, color .16s ease, opacity .16s ease;\r\n}\r\n\r\n.websites__arrow:hover,\r\n.websites__arrow:focus-visible {\r\n border-color: var(--text);\r\n background: var(--text);\r\n color: var(--bg);\r\n outline: none;\r\n}\r\n\r\n.websites__arrow:disabled {\r\n opacity: .28;\r\n cursor: default;\r\n pointer-events: none;\r\n}\r\n\r\n.websites__links {\r\n display: flex;\r\n align-items: stretch;\r\n gap: clamp(10px, 1.2vw, 16px);\r\n width: 100%;\r\n overflow-x: auto;\r\n overflow-y: hidden;\r\n padding: 0 0 8px;\r\n scrollbar-width: none;\r\n -webkit-overflow-scrolling: touch;\r\n overscroll-behavior-inline: contain;\r\n scroll-snap-type: x proximity;\r\n scroll-behavior: smooth;\r\n touch-action: pan-x pan-y;\r\n}\r\n\r\n.websites__links::-webkit-scrollbar {\r\n display: none;\r\n}\r\n\r\n.website-link {\r\n position: relative;\r\n isolation: isolate;\r\n flex: 0 0 clamp(220px, 21vw, 292px);\r\n width: clamp(220px, 21vw, 292px);\r\n aspect-ratio: .78;\r\n min-width: 0;\r\n overflow: hidden;\r\n border-radius: clamp(22px, 2.5vw, 30px);\r\n background: #f6f6f6;\r\n color: #000;\r\n text-decoration: none;\r\n scroll-snap-align: start;\r\n -webkit-tap-highlight-color: transparent;\r\n}\r\n\r\n.website-link::before {\r\n content: \"\";\r\n position: absolute;\r\n z-index: 0;\r\n left: 0;\r\n right: 0;\r\n top: 24%;\r\n bottom: 0;\r\n border-radius: clamp(22px, 2.5vw, 30px);\r\n background: #eeeeee;\r\n transition: top .62s cubic-bezier(.22,.78,.2,1);\r\n}\r\n\r\n.website-link::after {\r\n content: \"\";\r\n position: absolute;\r\n z-index: 0;\r\n left: 0;\r\n top: 15%;\r\n width: 48%;\r\n height: 15%;\r\n border-radius: clamp(22px, 2.5vw, 30px) clamp(22px, 2.5vw, 30px) clamp(26px, 2.8vw, 34px) 0;\r\n background: #eeeeee;\r\n transition: top .62s cubic-bezier(.22,.78,.2,1);\r\n}\r\n\r\n.website-link__number,\r\n.website-link__content,\r\n.website-link__arrow {\r\n position: absolute;\r\n z-index: 2;\r\n}\r\n\r\n.website-link__number {\r\n top: 29%;\r\n left: clamp(20px, 2.4vw, 28px);\r\n font-family: var(--inter);\r\n font-size: clamp(48px, 5.2vw, 66px);\r\n font-weight: 400;\r\n line-height: .9;\r\n letter-spacing: -.075em;\r\n font-variant-numeric: tabular-nums;\r\n transition: top .62s cubic-bezier(.22,.78,.2,1);\r\n}\r\n\r\n.website-link__arrow {\r\n top: 28.5%;\r\n right: clamp(18px, 2.2vw, 26px);\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 24px;\r\n height: 24px;\r\n font-size: clamp(19px, 2vw, 23px);\r\n font-weight: 300;\r\n line-height: 1;\r\n transition: top .62s cubic-bezier(.22,.78,.2,1), transform .32s ease;\r\n}\r\n\r\n.website-link__content {\r\n left: clamp(20px, 2.4vw, 28px);\r\n right: clamp(20px, 2.4vw, 28px);\r\n bottom: clamp(20px, 2.5vw, 28px);\r\n display: grid;\r\n gap: 7px;\r\n opacity: 1;\r\n transform: translateY(0);\r\n transition: opacity .24s ease, transform .42s cubic-bezier(.22,.78,.2,1);\r\n}\r\n\r\n.website-link__name {\r\n display: block;\r\n font-family: var(--inter);\r\n font-size: clamp(15px, 1.45vw, 19px);\r\n line-height: 1.12;\r\n font-weight: 500;\r\n letter-spacing: -.035em;\r\n}\r\n\r\n.website-link__description {\r\n display: -webkit-box;\r\n overflow: hidden;\r\n -webkit-box-orient: vertical;\r\n -webkit-line-clamp: 2;\r\n color: #777;\r\n font-family: var(--inter);\r\n font-size: clamp(11px, .95vw, 13px);\r\n font-weight: 400;\r\n line-height: 1.35;\r\n letter-spacing: -.01em;\r\n}\r\n\r\n.website-link--preview::before,\r\n.website-link--preview::after {\r\n z-index: 1;\r\n}\r\n\r\n.website-link--preview::before {\r\n top: 48%;\r\n}\r\n\r\n.website-link--preview::after {\r\n top: 40%;\r\n height: 14%;\r\n}\r\n\r\n.website-link__preview {\r\n position: absolute;\r\n z-index: 0;\r\n top: 10px;\r\n right: 10px;\r\n left: 10px;\r\n width: calc(100% - 20px);\r\n height: 55%;\r\n display: block;\r\n border-radius: clamp(16px, 2vw, 22px);\r\n object-fit: cover;\r\n object-position: 50% 26%;\r\n background: #ddd;\r\n transform: translateZ(0);\r\n}\r\n\r\n.website-link--preview .website-link__number {\r\n top: 54%;\r\n}\r\n\r\n.website-link--preview .website-link__arrow {\r\n top: 53.5%;\r\n}\r\n\r\n.website-link:hover,\r\n.website-link:focus-visible {\r\n outline: none;\r\n}\r\n\r\n.website-link:hover::before,\r\n.website-link:focus-visible::before {\r\n top: 58%;\r\n}\r\n\r\n.website-link:hover::after,\r\n.website-link:focus-visible::after {\r\n top: 50%;\r\n}\r\n\r\n.website-link:hover .website-link__number,\r\n.website-link:focus-visible .website-link__number {\r\n top: 61%;\r\n}\r\n\r\n.website-link:hover .website-link__arrow,\r\n.website-link:focus-visible .website-link__arrow {\r\n top: 60%;\r\n transform: translate(3px, -3px);\r\n}\r\n\r\n.website-link:hover .website-link__content,\r\n.website-link:focus-visible .website-link__content {\r\n opacity: 0;\r\n transform: translateY(14px);\r\n}\r\n\r\n@media (max-width: 720px) {\r\n .websites {\r\n margin-top: 46px;\r\n }\r\n\r\n .websites__header {\r\n justify-content: center;\r\n }\r\n\r\n .websites__header .section-title {\r\n text-align: center;\r\n }\r\n\r\n .websites__controls {\r\n display: none;\r\n }\r\n\r\n .websites__links {\r\n gap: 12px;\r\n scroll-snap-type: x mandatory;\r\n }\r\n\r\n .website-link {\r\n flex-basis: min(72vw, 270px);\r\n width: min(72vw, 270px);\r\n }\r\n}\r\n\r\n@media (max-width: 420px) {\r\n .website-link {\r\n flex-basis: min(78vw, 250px);\r\n width: min(78vw, 250px);\r\n }\r\n\r\n .website-link__number {\r\n left: 20px;\r\n font-size: clamp(46px, 15vw, 58px);\r\n }\r\n\r\n .website-link__arrow {\r\n right: 18px;\r\n font-size: 20px;\r\n }\r\n\r\n .website-link__content {\r\n left: 20px;\r\n right: 20px;\r\n bottom: 20px;\r\n }\r\n\r\n .website-link__name {\r\n font-size: 16px;\r\n }\r\n\r\n .website-link__description {\r\n font-size: 11.5px;\r\n }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n .websites__links {\r\n scroll-behavior: auto;\r\n }\r\n\r\n .websites__arrow,\r\n .website-link::before,\r\n .website-link::after,\r\n .website-link__number,\r\n .website-link__content,\r\n .website-link__arrow {\r\n transition: none !important;\r\n }\r\n}\r\n\r\n:root {\r\n --logo-box-width: 156px;\r\n --logo-box-height: 58px;\r\n --logo-gap: clamp(38px, 4.4vw, 66px);\r\n}\r\n\r\n.clients__logo img,\r\n.clients__logo svg,\r\n.clients__text-logo {\r\n transform: scale(1.38) !important;\r\n transform-origin: center center !important;\r\n}\r\n\r\n.clients__logo--arp,\r\n.clients__logo--pes,\r\n.clients__logo--nck,\r\n.clients__logo--btt,\r\n.clients__logo--bok,\r\n.clients__logo--medicover {\r\n height: 62px !important;\r\n}\r\n\r\n@media (max-width: 720px) {\r\n :root {\r\n --logo-box-width: 132px;\r\n --logo-box-height: 50px;\r\n --logo-gap: 30px;\r\n }\r\n\r\n .clients__logo img,\r\n .clients__logo svg,\r\n .clients__text-logo {\r\n transform: scale(1.32) !important;\r\n }\r\n}\r\n\r\n@media (max-width: 520px) {\r\n :root {\r\n --logo-box-width: 120px;\r\n --logo-box-height: 46px;\r\n --logo-gap: 26px;\r\n }\r\n\r\n .clients__logo img,\r\n .clients__logo svg,\r\n .clients__text-logo {\r\n transform: scale(1.28) !important;\r\n }\r\n\r\n .clients__logo--arp,\r\n .clients__logo--pes,\r\n .clients__logo--nck,\r\n .clients__logo--btt,\r\n .clients__logo--bok,\r\n .clients__logo--medicover {\r\n height: 54px !important;\r\n }\r\n}\r\n\r\nmain > .construction-title {\r\n font-family: var(--serif) !important;\r\n font-weight: 400 !important;\r\n letter-spacing: -.065em !important;\r\n -webkit-font-smoothing: antialiased;\r\n}\r\n\r\nmain > .construction-title span {\r\n font-family: var(--serif) !important;\r\n font-weight: 400 !important;\r\n letter-spacing: -.07em !important;\r\n}\r\n\r\n:root {\r\n --text: #050505;\r\n --muted: #4a4742;\r\n --soft: #6d6963;\r\n --line: rgba(0, 0, 0, .22);\r\n --logo-gray: #3f3d39;\r\n}\r\n\r\nmain > .construction-title,\r\n.project-contact__title {\r\n color: #000;\r\n}\r\n\r\n.section-title,\r\n.clients__label {\r\n color: #4a4742;\r\n}\r\n\r\n.service::before {\r\n color: #5b5751;\r\n}\r\n\r\n.social-link {\r\n color: #35322f;\r\n}\r\n\r\n.social-link:hover,\r\n.social-link:focus-visible {\r\n color: #000;\r\n}\r\n\r\n.clients__logo {\r\n color: #35322f;\r\n}\r\n\r\n.clients__logo img,\r\n.clients__logo svg,\r\n.clients__text-logo {\r\n opacity: .76 !important;\r\n}\r\n\r\n.clients__logo img {\r\n filter: grayscale(1) saturate(0) brightness(.48) contrast(1.08) !important;\r\n}\r\n\r\n.clients__logo--crosscore img {\r\n filter: grayscale(1) saturate(0) brightness(.42) contrast(1.1) !important;\r\n opacity: .8 !important;\r\n}\r\n\r\n.website-link {\r\n background: #050505;\r\n color: #f6f6f6;\r\n}\r\n\r\n.website-link::before,\r\n.website-link::after {\r\n background: #111;\r\n}\r\n\r\n.website-link__description {\r\n color: rgba(246, 246, 246, .64);\r\n}\r\n\r\n.websites__arrow,\r\n.works-loop__arrow {\r\n border-color: rgba(0, 0, 0, .34);\r\n}\r\n\r\n.websites__arrow:hover,\r\n.websites__arrow:focus-visible,\r\n.works-loop__arrow:hover,\r\n.works-loop__arrow:focus-visible {\r\n border-color: #050505;\r\n background: #050505;\r\n color: #f6f6f6;\r\n}\r\n\r\n.contact-form .message-builder {\r\n background: #0b0b0b !important;\r\n border-color: #0b0b0b !important;\r\n color: #f6f6f6;\r\n}\r\n\r\n.contact-form .builder-head,\r\n.contact-form .builder-label {\r\n color: rgba(246, 246, 246, .68);\r\n}\r\n\r\n.contact-form .builder-hint,\r\n.contact-form .builder-final-note,\r\n.contact-form .builder-preview-text {\r\n color: rgba(246, 246, 246, .52);\r\n}\r\n\r\n.contact-form .builder-head,\r\n.contact-form .builder-preview,\r\n.contact-form .builder-actions {\r\n border-color: rgba(255, 255, 255, .18) !important;\r\n}\r\n\r\n.contact-form .builder-progress {\r\n background: rgba(255, 255, 255, .18);\r\n}\r\n\r\n.contact-form .builder-progress-bar {\r\n background: #f6f6f6;\r\n}\r\n\r\n.contact-form .builder-option,\r\n.contact-form .builder-nav {\r\n border-color: rgba(255, 255, 255, .26) !important;\r\n color: #f6f6f6 !important;\r\n background: transparent !important;\r\n}\r\n\r\n.contact-form .builder-option:hover,\r\n.contact-form .builder-option:focus-visible,\r\n.contact-form .builder-option.is-active,\r\n.contact-form .builder-nav:hover,\r\n.contact-form .builder-nav:focus-visible {\r\n border-color: #f6f6f6 !important;\r\n background: #f6f6f6 !important;\r\n color: #050505 !important;\r\n}\r\n\r\n.contact-form .builder-input,\r\n.contact-form .builder-textarea,\r\n.contact-form .builder-preview-text {\r\n border-bottom-color: rgba(255, 255, 255, .24) !important;\r\n color: #f6f6f6 !important;\r\n}\r\n\r\n.contact-form .builder-input:focus,\r\n.contact-form .builder-textarea:focus,\r\n.contact-form .builder-preview-text:focus {\r\n border-bottom-color: #f6f6f6 !important;\r\n}\r\n\r\n.contact-form .builder-input::placeholder,\r\n.contact-form .builder-textarea::placeholder {\r\n color: rgba(246, 246, 246, .38) !important;\r\n}\r\n\r\n.contact-form .builder-antirobot {\r\n border-color: rgba(255, 255, 255, .24) !important;\r\n}\r\n\r\n.contact-form .builder-antirobot label {\r\n color: rgba(246, 246, 246, .78) !important;\r\n}\r\n\r\n.contact-form .builder-antirobot input[type=\"checkbox\"] {\r\n accent-color: #f6f6f6;\r\n}\r\n\r\n.contact-form .wpcf7-submit {\r\n border-color: #f6f6f6 !important;\r\n background: #f6f6f6 !important;\r\n color: #050505 !important;\r\n}\r\n\r\n.contact-form .wpcf7-submit:hover,\r\n.contact-form .wpcf7-submit:focus-visible {\r\n background: transparent !important;\r\n color: #f6f6f6 !important;\r\n}\r\n\r\n.contact-form .wpcf7 form .wpcf7-response-output {\r\n border-color: rgba(255, 255, 255, .22);\r\n color: rgba(246, 246, 246, .7);\r\n}\r\n\r\n.clients,\r\n.websites,\r\n.works-loop,\r\n.project-contact {\r\n border-top-color: rgba(0, 0, 0, .24) !important;\r\n}\r\n\r\nmain {\r\n padding-bottom: 0 !important;\r\n}\r\n\r\nmain > .project-contact {\r\n width: 100vw !important;\r\n max-width: none !important;\r\n margin-right: calc(50% - 50vw) !important;\r\n margin-left: calc(50% - 50vw) !important;\r\n padding: clamp(56px, 7vw, 96px)\r\n max(var(--page-x), calc((100vw - 1240px) \/ 2))\r\n clamp(64px, 8vw, 112px) !important;\r\n border-top: 0 !important;\r\n background: #050505 !important;\r\n color: #f6f6f6 !important;\r\n}\r\n\r\nmain > .project-contact .project-contact__layout {\r\n width: 100% !important;\r\n max-width: 1240px !important;\r\n margin: 0 auto !important;\r\n}\r\n\r\nmain > .project-contact .project-contact__title {\r\n color: #f6f6f6 !important;\r\n}\r\n\r\nmain > .project-contact .section-title {\r\n color: rgba(246, 246, 246, .56) !important;\r\n}\r\n\r\nmain > .project-contact .project-contact__copy {\r\n color: rgba(246, 246, 246, .68) !important;\r\n}\r\n\r\nmain > .project-contact .contact-form {\r\n border-top: 0 !important;\r\n padding-top: 0 !important;\r\n}\r\n\r\nmain > .project-contact .contact-form .message-builder {\r\n border: 0 !important;\r\n background: #0b0b0b !important;\r\n}\r\n\r\nmain > .project-contact .contact-form .builder-head {\r\n border-bottom: 0 !important;\r\n}\r\n\r\n@media (max-width: 760px) {\r\n main > .project-contact {\r\n padding-right: var(--page-x) !important;\r\n padding-left: var(--page-x) !important;\r\n }\r\n}\r\n\r\n@media (min-width: 901px) {\r\n main > .works-loop .works-loop__track {\r\n display: grid !important;\r\n grid-template-columns: repeat(5, minmax(0, 1fr)) !important;\r\n gap: clamp(10px, 1vw, 16px) !important;\r\n width: 100% !important;\r\n max-width: none !important;\r\n padding: 0 !important;\r\n transform: none !important;\r\n }\r\n\r\n main > .works-loop .works-loop__item {\r\n width: 100% !important;\r\n min-width: 0 !important;\r\n max-width: none !important;\r\n flex: none !important;\r\n scroll-snap-align: none !important;\r\n }\r\n}\r\n\r\n@media (min-width: 721px) {\r\n main > .grid .clients__label {\r\n text-align: left !important;\r\n }\r\n\r\n main > .works-loop .works-loop__header {\r\n align-items: flex-start !important;\r\n justify-content: flex-start !important;\r\n text-align: left !important;\r\n }\r\n\r\n main > .works-loop .works-loop__header .section-title {\r\n text-align: left !important;\r\n }\r\n}\r\n\r\n@media (max-width: 720px) {\r\n main > .grid .clients__label,\r\n main > .works-loop .works-loop__header,\r\n main > .works-loop .works-loop__header .section-title {\r\n text-align: center !important;\r\n }\r\n\r\n main > .works-loop .works-loop__header {\r\n align-items: center !important;\r\n justify-content: center !important;\r\n }\r\n}\r\n\r\n@media (min-width: 721px) {\r\n main > .construction-title {\r\n width: 100% !important;\r\n max-width: none !important;\r\n margin-right: 0 !important;\r\n margin-left: 0 !important;\r\n text-align: left !important;\r\n }\r\n\r\n main > .grid {\r\n width: 100% !important;\r\n max-width: none !important;\r\n margin-right: 0 !important;\r\n margin-left: 0 !important;\r\n align-items: stretch !important;\r\n text-align: left !important;\r\n }\r\n\r\n main > .grid > .hero,\r\n main > .grid > .info {\r\n width: 100% !important;\r\n max-width: none !important;\r\n margin-right: 0 !important;\r\n margin-left: 0 !important;\r\n text-align: left !important;\r\n }\r\n\r\n main > .grid .contact {\r\n width: 100% !important;\r\n max-width: none !important;\r\n margin-right: 0 !important;\r\n margin-left: 0 !important;\r\n text-align: left !important;\r\n }\r\n\r\n main > .grid .intro {\r\n max-width: 560px !important;\r\n margin-right: 0 !important;\r\n margin-left: 0 !important;\r\n text-align: left !important;\r\n }\r\n\r\n main > .grid .socials {\r\n justify-content: flex-start !important;\r\n }\r\n\r\n main > .grid .info {\r\n justify-items: stretch !important;\r\n }\r\n\r\n main > .grid .services {\r\n width: 100% !important;\r\n max-width: none !important;\r\n margin-right: 0 !important;\r\n margin-left: 0 !important;\r\n text-align: left !important;\r\n }\r\n\r\n main > .grid .services .section-title {\r\n text-align: left !important;\r\n }\r\n\r\n main > .grid .services__list {\r\n width: 100% !important;\r\n max-width: none !important;\r\n margin-right: 0 !important;\r\n margin-left: 0 !important;\r\n justify-items: start !important;\r\n }\r\n\r\n main > .grid .service {\r\n justify-content: start !important;\r\n text-align: left !important;\r\n }\r\n}\r\n\r\nmain > .grid .services {\r\n border-top: 1px solid var(--line) !important;\r\n padding-top: 30px !important;\r\n}\r\n\r\n@media (min-width: 721px) {\r\n main > .project-contact .project-contact__layout {\r\n width: 100% !important;\r\n max-width: none !important;\r\n margin: 0 !important;\r\n }\r\n\r\n main > .project-contact .project-contact__intro,\r\n main > .project-contact .project-contact__intro .section-title,\r\n main > .project-contact .project-contact__title,\r\n main > .project-contact .project-contact__copy {\r\n margin-left: 0 !important;\r\n margin-right: 0 !important;\r\n text-align: left !important;\r\n }\r\n}\r\n\r\n.clients__logo--nck img,\r\n.clients__logo--nck svg,\r\n.clients__logo--nck .clients__text-logo,\r\n.clients__logo--btt img,\r\n.clients__logo--btt svg,\r\n.clients__logo--btt .clients__text-logo {\r\n transform: scale(1.50) !important;\r\n}\r\n\r\n@media (max-width: 720px) {\r\n .clients__logo--nck img,\r\n .clients__logo--nck svg,\r\n .clients__logo--nck .clients__text-logo,\r\n .clients__logo--btt img,\r\n .clients__logo--btt svg,\r\n .clients__logo--btt .clients__text-logo {\r\n transform: scale(1.44) !important;\r\n }\r\n}\r\n\r\n@media (max-width: 520px) {\r\n .clients__logo--nck img,\r\n .clients__logo--nck svg,\r\n .clients__logo--nck .clients__text-logo,\r\n .clients__logo--btt img,\r\n .clients__logo--btt svg,\r\n .clients__logo--btt .clients__text-logo {\r\n transform: scale(1.40) !important;\r\n }\r\n}\r\n\r\nmain > .grid .services__accordion {\r\n width: 100%;\r\n margin: 0;\r\n border-bottom: 0;\r\n}\r\n\r\nmain > .grid .service-accordion {\r\n width: 100%;\r\n margin: 0;\r\n border-top: 1px solid var(--line);\r\n}\r\n\r\nmain > .grid .service-accordion:first-child {\r\n border-top: 0;\r\n}\r\n\r\nmain > .grid .service-accordion summary {\r\n position: relative;\r\n display: grid;\r\n grid-template-columns: 34px minmax(0, 1fr) 28px;\r\n align-items: center;\r\n gap: 12px;\r\n min-height: 62px;\r\n margin: 0;\r\n padding: 0;\r\n color: var(--text);\r\n cursor: pointer;\r\n list-style: none;\r\n user-select: none;\r\n}\r\n\r\nmain > .grid .service-accordion summary::-webkit-details-marker {\r\n display: none;\r\n}\r\n\r\nmain > .grid .service-accordion__no {\r\n color: var(--soft);\r\n font-size: 9px;\r\n font-weight: 500;\r\n line-height: 1;\r\n letter-spacing: .08em;\r\n}\r\n\r\nmain > .grid .service-accordion__name {\r\n min-width: 0;\r\n font-size: clamp(14px, 1.1vw, 17px);\r\n font-weight: 400;\r\n line-height: 1.25;\r\n letter-spacing: -.025em;\r\n}\r\n\r\nmain > .grid .service-accordion__toggle {\r\n position: relative;\r\n width: 28px;\r\n height: 28px;\r\n justify-self: end;\r\n}\r\n\r\nmain > .grid .service-accordion__toggle::before,\r\nmain > .grid .service-accordion__toggle::after {\r\n content: \"\";\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n width: 12px;\r\n height: 1px;\r\n background: currentColor;\r\n transform: translate(-50%, -50%);\r\n transition: transform .18s ease, opacity .18s ease;\r\n}\r\n\r\nmain > .grid .service-accordion__toggle::after {\r\n transform: translate(-50%, -50%) rotate(90deg);\r\n}\r\n\r\nmain > .grid .service-accordion[open] .service-accordion__toggle::after {\r\n opacity: 0;\r\n transform: translate(-50%, -50%) rotate(0deg);\r\n}\r\n\r\nmain > .grid .service-accordion__content {\r\n max-width: 620px;\r\n padding: 0 40px 20px 46px;\r\n color: var(--muted);\r\n font-size: 12px;\r\n line-height: 1.65;\r\n letter-spacing: -.005em;\r\n}\r\n\r\n@media (hover: hover) and (pointer: fine) {\r\n main > .grid .service-accordion summary:hover .service-accordion__name {\r\n opacity: .58;\r\n }\r\n}\r\n\r\nmain > .grid .service-accordion summary:focus-visible {\r\n outline: 1px solid currentColor;\r\n outline-offset: 4px;\r\n}\r\n\r\nmain > .project-contact {\r\n padding-left: var(--page-x) !important;\r\n padding-right: var(--page-x) !important;\r\n}\r\n\r\nmain > .project-contact .project-contact__layout {\r\n width: 100% !important;\r\n max-width: none !important;\r\n margin: 0 !important;\r\n}\r\n\r\nmain > .project-contact .project-contact__intro {\r\n justify-self: start !important;\r\n margin: 0 !important;\r\n text-align: left !important;\r\n}\r\n\r\nmain > .project-contact .project-contact__intro .section-title,\r\nmain > .project-contact .project-contact__title,\r\nmain > .project-contact .project-contact__copy {\r\n margin-left: 0 !important;\r\n margin-right: 0 !important;\r\n text-align: left !important;\r\n}\r\n\r\n@media (max-width: 720px) {\r\n main > .grid .service-accordion summary {\r\n grid-template-columns: 28px minmax(0, 1fr) 28px;\r\n min-height: 58px;\r\n text-align: left;\r\n }\r\n\r\n main > .grid .service-accordion__content {\r\n max-width: none;\r\n padding: 0 36px 18px 40px;\r\n text-align: left;\r\n }\r\n\r\n main > .project-contact .project-contact__intro,\r\n main > .project-contact .project-contact__intro .section-title,\r\n main > .project-contact .project-contact__title,\r\n main > .project-contact .project-contact__copy {\r\n margin-left: 0 !important;\r\n margin-right: 0 !important;\r\n text-align: left !important;\r\n }\r\n}\r\n\r\n@media (min-width: 721px) {\r\n main > .grid .services__accordion {\r\n display: grid !important;\r\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\r\n column-gap: clamp(28px, 4vw, 56px) !important;\r\n align-items: start !important;\r\n }\r\n\r\n main > .grid .service-accordion {\r\n min-width: 0 !important;\r\n }\r\n\r\n main > .grid .service-accordion:nth-child(-n + 2) {\r\n border-top: 0 !important;\r\n }\r\n\r\n main > .grid .service-accordion__name {\r\n font-size: clamp(19px, 1.65vw, 24px) !important;\r\n line-height: 1.15 !important;\r\n letter-spacing: -.035em !important;\r\n }\r\n\r\n main > .grid .service-accordion__content {\r\n max-width: none !important;\r\n padding-right: 34px !important;\r\n }\r\n}\r\n\r\n@media (max-width: 720px) {\r\n main > .grid .services__accordion {\r\n display: grid !important;\r\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\r\n column-gap: 18px !important;\r\n row-gap: 0 !important;\r\n align-items: start !important;\r\n }\r\n\r\n main > .grid .service-accordion {\r\n min-width: 0 !important;\r\n }\r\n\r\n main > .grid .service-accordion__name {\r\n font-size: 17px !important;\r\n }\r\n}\r\n\r\nmain > .grid .service-accordion {\r\n border-top: 0 !important;\r\n border-bottom: 0 !important;\r\n}\r\n\r\nmain > .grid .service-accordion summary {\r\n grid-template-columns: minmax(0, 1fr) 28px !important;\r\n}\r\n\r\nmain > .grid .service-accordion__content {\r\n padding-left: 0 !important;\r\n}\r\n\r\n@media (max-width: 720px) {\r\n main > .grid .service-accordion summary {\r\n grid-template-columns: minmax(0, 1fr) 28px !important;\r\n }\r\n\r\n main > .grid .service-accordion__content {\r\n padding-left: 0 !important;\r\n }\r\n}\r\n\r\nmain > .grid .service-accordion summary {\r\n grid-template-columns: minmax(0, 1fr) !important;\r\n cursor: pointer;\r\n}\r\n\r\nmain > .grid .service-accordion__toggle,\r\nmain > .grid .service-accordion__toggle::before,\r\nmain > .grid .service-accordion__toggle::after {\r\n display: none !important;\r\n content: none !important;\r\n}\r\n\r\nmain > .grid .service-accordion__heading {\r\n display: block;\r\n min-height: 0;\r\n margin: 0 0 8px;\r\n padding: 0;\r\n color: var(--text);\r\n cursor: default;\r\n user-select: text;\r\n}\r\n\r\nmain > .grid .service-accordion__content {\r\n display: block !important;\r\n padding-top: 0 !important;\r\n}\r\n\r\n@media (min-width: 721px) {\r\n main > .grid .service-accordion {\r\n padding: 12px 0 18px;\r\n }\r\n}\r\n\r\n@media (max-width: 720px) {\r\n main > .grid .service-accordion {\r\n padding: 10px 0 16px;\r\n }\r\n}\r\n\r\nmain > .grid .service-accordion__heading {\r\n width: 100%;\r\n border: 0;\r\n background: transparent;\r\n font: inherit;\r\n text-align: left;\r\n color: var(--text);\r\n appearance: none;\r\n -webkit-appearance: none;\r\n}\r\n\r\n@media (min-width: 721px) {\r\n main > .grid .service-accordion__heading {\r\n pointer-events: none;\r\n }\r\n\r\n main > .grid .service-accordion__content {\r\n display: block !important;\r\n }\r\n}\r\n\r\n@media (max-width: 720px) {\r\n main > .grid .service-accordion {\r\n padding: 8px 0 10px !important;\r\n }\r\n\r\n main > .grid .service-accordion__heading {\r\n display: flex;\r\n align-items: center;\r\n min-height: 44px;\r\n margin: 0 !important;\r\n padding: 8px 0 !important;\r\n cursor: pointer;\r\n touch-action: manipulation;\r\n }\r\n\r\n main > .grid .service-accordion__heading:focus-visible {\r\n outline: 1px solid currentColor;\r\n outline-offset: 4px;\r\n }\r\n\r\n main > .grid .service-accordion__content {\r\n display: none !important;\r\n padding: 0 0 12px !important;\r\n }\r\n\r\n main > .grid .service-accordion.is-open .service-accordion__content {\r\n display: block !important;\r\n }\r\n}\r\n\r\n.clients__logo--playboy {\r\n --logo-w: 62px !important;\r\n --logo-h: 32px !important;\r\n}\r\n\r\n.clients__logo--bit {\r\n width: 158px !important;\r\n min-width: 158px !important;\r\n --logo-w: 108px !important;\r\n --logo-h: 32px !important;\r\n}\r\n\r\n.clients__logo--medicover {\r\n width: 184px !important;\r\n min-width: 184px !important;\r\n height: 64px !important;\r\n --logo-w: 132px !important;\r\n --logo-h: 38px !important;\r\n}\r\n\r\n@media (max-width: 720px) {\r\n .clients__logo--playboy {\r\n --logo-w: 56px !important;\r\n --logo-h: 29px !important;\r\n }\r\n\r\n .clients__logo--bit {\r\n width: 146px !important;\r\n min-width: 146px !important;\r\n --logo-w: 100px !important;\r\n --logo-h: 30px !important;\r\n }\r\n\r\n .clients__logo--medicover {\r\n width: 160px !important;\r\n min-width: 160px !important;\r\n height: 58px !important;\r\n --logo-w: 122px !important;\r\n --logo-h: 35px !important;\r\n }\r\n}\r\n\r\n@media (max-width: 520px) {\r\n .clients__logo--playboy {\r\n --logo-w: 52px !important;\r\n --logo-h: 27px !important;\r\n }\r\n\r\n .clients__logo--bit {\r\n width: 134px !important;\r\n min-width: 134px !important;\r\n --logo-w: 94px !important;\r\n --logo-h: 28px !important;\r\n }\r\n\r\n .clients__logo--medicover {\r\n width: 154px !important;\r\n min-width: 154px !important;\r\n height: 56px !important;\r\n --logo-w: 116px !important;\r\n --logo-h: 33px !important;\r\n }\r\n}\r\n\r\nbody .websites .website-link--preview {\r\n background: #dce3ec !important;\r\n color: #111 !important;\r\n box-shadow: inset 0 0 0 1px rgba(17, 24, 39, .16);\r\n}\r\n\r\nbody .websites .website-link--preview::before,\r\nbody .websites .website-link--preview::after {\r\n background: #e9edf3 !important;\r\n}\r\n\r\nbody .websites .website-link--preview::before {\r\n top: 48%;\r\n}\r\n\r\nbody .websites .website-link--preview::after {\r\n top: 40%;\r\n height: 14%;\r\n}\r\n\r\nbody .websites .website-link--preview > img.website-link__preview {\r\n position: absolute !important;\r\n z-index: 0 !important;\r\n top: 10px !important;\r\n right: 10px !important;\r\n bottom: auto !important;\r\n left: 10px !important;\r\n display: block !important;\r\n width: calc(100% - 20px) !important;\r\n height: 55% !important;\r\n min-width: 0 !important;\r\n min-height: 0 !important;\r\n max-width: none !important;\r\n max-height: none !important;\r\n margin: 0 !important;\r\n padding: 0 !important;\r\n border: 0 !important;\r\n border-radius: clamp(16px, 2vw, 22px) !important;\r\n object-fit: cover !important;\r\n object-position: 50% 35% !important;\r\n opacity: 1 !important;\r\n filter: none !important;\r\n mix-blend-mode: normal !important;\r\n transform: none !important;\r\n}\r\n\r\nbody .websites .website-link--preview .website-link__number {\r\n top: 54%;\r\n}\r\n\r\nbody .websites .website-link--preview .website-link__arrow {\r\n top: 53.5%;\r\n}\r\n\r\nbody .websites .website-link--preview .website-link__description {\r\n color: #6f747c !important;\r\n}\r\n\r\n @media (max-width: 720px) {\r\n main > .grid .clients__marquee {\r\n cursor: grab;\r\n touch-action: pan-y;\r\n user-select: none;\r\n -webkit-user-select: none;\r\n }\r\n\r\n main > .grid .clients__marquee.is-dragging {\r\n cursor: grabbing;\r\n }\r\n\r\n main > .grid .clients__track {\r\n animation: none !important;\r\n will-change: transform;\r\n }\r\n }\r\n\r\n @media (max-width: 720px) and (prefers-reduced-motion: reduce) {\r\n main > .grid .clients__group[aria-hidden=\"true\"] {\r\n display: flex !important;\r\n }\r\n }\r\n\r\n main > .testimonials {\r\n width: 100%;\r\n margin: clamp(56px, 7vw, 96px) 0 0;\r\n padding-top: 24px;\r\n border-top: 1px solid var(--line);\r\n }\r\n\r\n main > .testimonials .testimonials__header {\r\n margin-bottom: clamp(44px, 6vw, 90px);\r\n }\r\n\r\n main > .testimonials .testimonials__header .section-title {\r\n margin: 0;\r\n text-align: left;\r\n }\r\n\r\n .testimonial-stage {\r\n width: 100%;\r\n min-height: clamp(300px, 32vw, 430px);\r\n display: grid;\r\n place-items: center;\r\n padding: clamp(12px, 2vw, 24px) 0 clamp(24px, 3.5vw, 48px);\r\n text-align: center;\r\n touch-action: pan-y;\r\n }\r\n\r\n .testimonial-stage__inner {\r\n width: min(100%, 920px);\r\n display: grid;\r\n justify-items: center;\r\n gap: 0;\r\n }\r\n.testimonial-quote {\r\n max-width: 820px;\r\n margin: 0;\r\n color: var(--text);\r\n font-family: var(--sans);\r\n font-size: clamp(19px, 1.65vw, 24px);\r\n font-weight: 400;\r\n line-height: 1.42;\r\n letter-spacing: -.025em;\r\n text-wrap: balance;\r\n }\r\n\r\n .testimonial-author {\r\n display: grid;\r\n justify-items: center;\r\n gap: 4px;\r\n margin-top: clamp(24px, 3vw, 34px);\r\n }\r\n\r\n .testimonial-author strong {\r\n color: var(--text);\r\n font-size: 12px;\r\n font-weight: 500;\r\n line-height: 1.3;\r\n letter-spacing: -.012em;\r\n }\r\n\r\n .testimonial-author span {\r\n max-width: 420px;\r\n color: var(--muted);\r\n font-size: 10px;\r\n line-height: 1.45;\r\n letter-spacing: .01em;\r\n }\r\n\r\n .testimonial-mobile-cue {\r\n display: none;\r\n }\r\n\r\n .testimonial-stage {\r\n position: relative;\r\n }\r\n\r\n .testimonial-side-arrow {\r\n position: absolute;\r\n top: 50%;\r\n z-index: 3;\r\n width: 48px;\r\n height: 48px;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n border: 1px solid var(--line);\r\n border-radius: 50%;\r\n background: transparent;\r\n color: var(--text);\r\n font-family: var(--sans);\r\n font-size: 20px;\r\n line-height: 1;\r\n cursor: pointer;\r\n transform: translateY(-50%);\r\n transition:\r\n background-color .16s ease,\r\n border-color .16s ease,\r\n color .16s ease,\r\n transform .16s ease;\r\n }\r\n\r\n .testimonial-side-arrow--prev {\r\n left: 0;\r\n }\r\n\r\n .testimonial-side-arrow--next {\r\n right: 0;\r\n }\r\n\r\n .testimonial-side-arrow:hover,\r\n .testimonial-side-arrow:focus-visible {\r\n border-color: var(--text);\r\n background: var(--text);\r\n color: var(--bg);\r\n outline: none;\r\n }\r\n\r\n .testimonial-side-arrow:active {\r\n transform: translateY(-50%) scale(.96);\r\n }\r\n\r\n .testimonial-stage.is-changing .testimonial-quote,\r\n .testimonial-stage.is-changing .testimonial-author {\r\n opacity: .16;\r\n transform: translateY(4px);\r\n filter: blur(5px);\r\n }\r\n\r\n .testimonial-quote,\r\n .testimonial-author {\r\n transition:\r\n opacity .15s ease,\r\n transform .22s ease,\r\n filter .22s ease;\r\n }\r\n\r\n @media (max-width: 720px) {\r\n .testimonial-side-arrow {\r\n display: none;\r\n }\r\n\r\n main > .testimonials {\r\n width: 100vw;\r\n margin-top: 52px;\r\n margin-right: calc(50% - 50vw);\r\n margin-left: calc(50% - 50vw);\r\n padding-top: 24px;\r\n }\r\n\r\n main > .testimonials .testimonials__header {\r\n margin-bottom: 40px;\r\n }\r\n\r\n main > .testimonials .testimonials__header .section-title {\r\n text-align: center;\r\n }\r\n\r\n .testimonial-stage {\r\n min-height: 300px;\r\n padding: 4px 0 30px;\r\n }\r\n\r\n .testimonial-stage__inner {\r\n width: 100%;\r\n }\r\n.testimonial-quote {\r\n max-width: 620px;\r\n font-size: 17px;\r\n line-height: 1.5;\r\n letter-spacing: -.02em;\r\n }\r\n\r\n .testimonial-author {\r\n margin-top: 28px;\r\n }\r\n\r\n .testimonial-author span {\r\n max-width: 290px;\r\n }\r\n\r\n .testimonial-mobile-cue {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 10px;\r\n margin-top: 22px;\r\n color: var(--soft);\r\n font-size: 8px;\r\n font-weight: 500;\r\n line-height: 1;\r\n letter-spacing: .14em;\r\n text-transform: uppercase;\r\n user-select: none;\r\n pointer-events: none;\r\n }\r\n\r\n .testimonial-mobile-cue__dots {\r\n display: flex;\r\n align-items: center;\r\n gap: 5px;\r\n }\r\n\r\n .testimonial-mobile-cue__dot {\r\n width: 4px;\r\n height: 4px;\r\n border-radius: 50%;\r\n background: currentColor;\r\n opacity: .32;\r\n transition: width .18s ease, opacity .18s ease;\r\n }\r\n\r\n .testimonial-mobile-cue__dot.is-active {\r\n width: 13px;\r\n border-radius: 999px;\r\n opacity: .9;\r\n }\r\n\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n .testimonial-quote,\r\n .testimonial-author {\r\n transition: none;\r\n }\r\n }\r\n\r\n .clients__logo--arp {\r\n width: 178px !important;\r\n min-width: 178px !important;\r\n height: 74px !important;\r\n --logo-w: 154px;\r\n --logo-h: 48px;\r\n }\r\n\r\n .clients__logo--nck {\r\n width: 198px !important;\r\n min-width: 198px !important;\r\n height: 82px !important;\r\n --logo-w: 172px;\r\n --logo-h: 58px;\r\n }\r\n\r\n .clients__logo--bok {\r\n width: 158px !important;\r\n min-width: 158px !important;\r\n height: 72px !important;\r\n --logo-w: 136px;\r\n --logo-h: 46px;\r\n }\r\n\r\n .clients__logo--arp img,\r\n .clients__logo--arp svg,\r\n .clients__logo--arp .clients__text-logo,\r\n .clients__logo--bok img,\r\n .clients__logo--bok svg,\r\n .clients__logo--bok .clients__text-logo {\r\n transform: scale(1.54) !important;\r\n transform-origin: center center !important;\r\n }\r\n\r\n .clients__logo--nck img,\r\n .clients__logo--nck svg,\r\n .clients__logo--nck .clients__text-logo {\r\n transform: scale(1.62) !important;\r\n transform-origin: center center !important;\r\n }\r\n\r\n .clients__group {\r\n min-height: 92px;\r\n }\r\n\r\n @media (max-width: 720px) {\r\n .clients__logo--arp {\r\n width: 154px !important;\r\n min-width: 154px !important;\r\n height: 66px !important;\r\n --logo-w: 136px;\r\n --logo-h: 43px;\r\n }\r\n\r\n .clients__logo--nck {\r\n width: 174px !important;\r\n min-width: 174px !important;\r\n height: 74px !important;\r\n --logo-w: 154px;\r\n --logo-h: 52px;\r\n }\r\n\r\n .clients__logo--bok {\r\n width: 140px !important;\r\n min-width: 140px !important;\r\n height: 64px !important;\r\n --logo-w: 122px;\r\n --logo-h: 41px;\r\n }\r\n\r\n .clients__logo--arp img,\r\n .clients__logo--arp svg,\r\n .clients__logo--arp .clients__text-logo,\r\n .clients__logo--bok img,\r\n .clients__logo--bok svg,\r\n .clients__logo--bok .clients__text-logo {\r\n transform: scale(1.46) !important;\r\n }\r\n\r\n .clients__logo--nck img,\r\n .clients__logo--nck svg,\r\n .clients__logo--nck .clients__text-logo {\r\n transform: scale(1.54) !important;\r\n }\r\n\r\n .clients__group {\r\n min-height: 82px;\r\n }\r\n }\r\n\r\n @media (max-width: 520px) {\r\n .clients__logo--arp {\r\n width: 146px !important;\r\n min-width: 146px !important;\r\n }\r\n\r\n .clients__logo--nck {\r\n width: 164px !important;\r\n min-width: 164px !important;\r\n }\r\n\r\n .clients__logo--bok {\r\n width: 132px !important;\r\n min-width: 132px !important;\r\n }\r\n }\r\n\r\n .clients__logo--nck {\r\n height: 98px !important;\r\n }\r\n\r\n .clients__group {\r\n min-height: 116px !important;\r\n }\r\n\r\n @media (max-width: 720px) {\r\n .clients__logo--nck {\r\n height: 88px !important;\r\n }\r\n\r\n .clients__group {\r\n min-height: 104px !important;\r\n }\r\n }\r\n\r\n @media (max-width: 520px) {\r\n .clients__logo--nck {\r\n height: 86px !important;\r\n }\r\n\r\n .clients__group {\r\n min-height: 100px !important;\r\n }\r\n }\r\n\r\nbody .websites .website-link {\r\n background: #e4e4e4 !important;\r\n color: var(--text) !important;\r\n}\r\n\r\nbody .websites .website-link--preview {\r\n box-shadow: none !important;\r\n border: 0 !important;\r\n}\r\n\r\nbody .websites .website-link::before,\r\nbody .websites .website-link::after {\r\n background: #eeeeee !important;\r\n}\r\n\r\nbody .websites .website-link__description {\r\n color: var(--muted) !important;\r\n}\r\n\r\nbody .websites .website-link--preview::before {\r\n z-index: 2 !important;\r\n top: 24% !important;\r\n bottom: 0 !important;\r\n border-radius: clamp(22px, 2.5vw, 30px) !important;\r\n}\r\n\r\nbody .websites .website-link--preview::after {\r\n z-index: 2 !important;\r\n left: 0 !important;\r\n top: 15% !important;\r\n width: 48% !important;\r\n height: 15% !important;\r\n border-radius: clamp(22px, 2.5vw, 30px) clamp(22px, 2.5vw, 30px) clamp(26px, 2.8vw, 34px) 0 !important;\r\n}\r\n\r\nbody .websites .website-link--preview .website-link__number {\r\n top: 29% !important;\r\n z-index: 3 !important;\r\n}\r\n\r\nbody .websites .website-link--preview .website-link__arrow {\r\n top: 28.5% !important;\r\n z-index: 3 !important;\r\n}\r\n\r\nbody .websites .website-link--preview .website-link__content {\r\n z-index: 3 !important;\r\n opacity: 1 !important;\r\n transform: translateY(0) !important;\r\n transition: opacity .24s ease, transform .42s cubic-bezier(.22,.78,.2,1) !important;\r\n}\r\n\r\nbody .websites .website-link:hover .website-link__content,\r\nbody .websites .website-link:focus-visible .website-link__content {\r\n opacity: 1 !important;\r\n transform: translateY(0) !important;\r\n}\r\n\r\nbody .websites .website-link--preview > img.website-link__preview {\r\n position: absolute !important;\r\n z-index: 1 !important;\r\n top: auto !important;\r\n right: 1px !important;\r\n\r\n bottom: -10px !important;\r\n left: 1px !important;\r\n display: block !important;\r\n width: calc(100% - 2px) !important;\r\n height: calc(100% + 10px) !important;\r\n min-width: 0 !important;\r\n min-height: 0 !important;\r\n max-width: none !important;\r\n max-height: none !important;\r\n margin: 0 !important;\r\n padding: 0 !important;\r\n border: 0 !important;\r\n border-radius: inherit !important;\r\n object-fit: cover !important;\r\n object-position: 50% 34% !important;\r\n opacity: 1 !important;\r\n filter: none !important;\r\n mix-blend-mode: normal !important;\r\n\r\n clip-path: none !important;\r\n -webkit-clip-path: none !important;\r\n transform: translate3d(0, 0, 0) scale(1.01) !important;\r\n transform-origin: center bottom !important;\r\n transition: transform .62s cubic-bezier(.22,.78,.2,1) !important;\r\n pointer-events: none !important;\r\n}\r\n\r\nbody .websites .website-link--preview:hover::before,\r\nbody .websites .website-link--preview:focus-visible::before {\r\n top: 58% !important;\r\n}\r\n\r\nbody .websites .website-link--preview:hover::after,\r\nbody .websites .website-link--preview:focus-visible::after {\r\n top: 50% !important;\r\n}\r\n\r\nbody .websites .website-link--preview:hover .website-link__number,\r\nbody .websites .website-link--preview:focus-visible .website-link__number {\r\n top: 61% !important;\r\n}\r\n\r\nbody .websites .website-link--preview:hover .website-link__arrow,\r\nbody .websites .website-link--preview:focus-visible .website-link__arrow {\r\n top: 60% !important;\r\n transform: translate(3px, -3px) !important;\r\n}\r\n\r\nbody .websites .website-link--preview:hover > img.website-link__preview,\r\nbody .websites .website-link--preview:focus-visible > img.website-link__preview {\r\n transform: translate3d(0, -10px, 0) scale(1.01) !important;\r\n}\r\n\r\nbody .websites .website-link {\r\n --website-card-text-x: clamp(20px, 2.4vw, 28px);\r\n}\r\n\r\nbody .websites .website-link .website-link__number {\r\n left: var(--website-card-text-x) !important;\r\n text-align: left !important;\r\n transition: top .62s cubic-bezier(.22,.78,.2,1), transform .32s ease !important;\r\n}\r\n\r\nbody .websites .website-link .website-link__content {\r\n left: var(--website-card-text-x) !important;\r\n right: var(--website-card-text-x) !important;\r\n text-align: left !important;\r\n}\r\n\r\nbody .websites .website-link .website-link__name,\r\nbody .websites .website-link .website-link__description {\r\n text-align: left !important;\r\n}\r\n\r\nbody .websites .website-link:hover .website-link__number,\r\nbody .websites .website-link:focus-visible .website-link__number {\r\n transform: translateY(-14px) !important;\r\n}\r\n\r\n@media (max-width: 420px) {\r\n body .websites .website-link {\r\n --website-card-text-x: 20px;\r\n }\r\n\r\n body .websites .website-link:hover .website-link__number,\r\n body .websites .website-link:focus-visible .website-link__number {\r\n transform: translateY(-10px) !important;\r\n }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n body .websites .website-link--preview > img.website-link__preview {\r\n transition: none !important;\r\n }\r\n}\r\n\r\nbody .websites .website-link::before,\r\nbody .websites .website-link--preview::before {\r\n left: 0 !important;\r\n border-radius: 10px 10px 4px 4px !important;\r\n}\r\n\r\nbody .websites .website-link::after,\r\nbody .websites .website-link--preview::after {\r\n content: none !important;\r\n display: none !important;\r\n}\r\n\r\nbody .websites .website-link__front-tab {\r\n position: absolute !important;\r\n z-index: 2 !important;\r\n left: 0 !important;\r\n top: 15% !important;\r\n width: 58% !important;\r\n height: 17% !important;\r\n display: block !important;\r\n overflow: visible !important;\r\n pointer-events: none !important;\r\n transform: none !important;\r\n backface-visibility: visible !important;\r\n will-change: auto !important;\r\n transition: top .62s cubic-bezier(.22,.78,.2,1) !important;\r\n shape-rendering: auto !important;\r\n}\r\n\r\nbody .websites .website-link__front-tab path {\r\n fill: #eeeeee !important;\r\n stroke: none !important;\r\n shape-rendering: auto !important;\r\n}\r\n\r\nbody .websites .website-link:hover .website-link__front-tab,\r\nbody .websites .website-link:focus-visible .website-link__front-tab {\r\n top: 50% !important;\r\n}\r\n\r\n@media (max-width: 520px) {\r\n body .websites .website-link::before,\r\n body .websites .website-link--preview::before {\r\n border-radius: 8px 8px 3px 3px !important;\r\n }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n body .websites .website-link__front-tab {\r\n transition: none !important;\r\n }\r\n}\r\n\r\nbody .websites .website-link__arrow {\r\n color: var(--text) !important;\r\n font-size: 0 !important;\r\n -webkit-text-fill-color: currentColor !important;\r\n}\r\n\r\nbody .websites .website-link__arrow svg {\r\n display: block !important;\r\n width: 24px !important;\r\n height: 24px !important;\r\n overflow: visible !important;\r\n fill: none !important;\r\n stroke: currentColor !important;\r\n stroke-width: 1.45 !important;\r\n stroke-linecap: square !important;\r\n stroke-linejoin: miter !important;\r\n pointer-events: none !important;\r\n}\r\n\r\nbody .websites .website-link::before,\r\nbody .websites .website-link--preview::before {\r\n background: transparent !important;\r\n -webkit-backdrop-filter: none !important;\r\n backdrop-filter: none !important;\r\n}\r\n\r\nbody .websites .website-link__front-tab {\r\n opacity: 0 !important;\r\n}\r\n\r\nbody .websites .website-link__front-tab path {\r\n fill: transparent !important;\r\n}\r\n\r\nbody .websites .website-link__number,\r\nbody .websites .website-link__content,\r\nbody .websites .website-link__arrow {\r\n z-index: 3 !important;\r\n}\r\n\r\nbody .websites .website-link::after,\r\nbody .websites .website-link--preview::after {\r\n content: \"\" !important;\r\n position: absolute !important;\r\n z-index: 2 !important;\r\n inset: 0 !important;\r\n top: 0 !important;\r\n right: 0 !important;\r\n bottom: 0 !important;\r\n left: 0 !important;\r\n width: 100% !important;\r\n height: 100% !important;\r\n display: block !important;\r\n border: 0 !important;\r\n border-radius: 0 !important;\r\n background: rgba(238, 238, 238, .62) !important;\r\n -webkit-backdrop-filter: blur(18px) saturate(1.18) !important;\r\n backdrop-filter: blur(18px) saturate(1.18) !important;\r\n\r\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;\r\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;\r\n -webkit-mask-repeat: no-repeat !important;\r\n mask-repeat: no-repeat !important;\r\n -webkit-mask-position: 0 0 !important;\r\n mask-position: 0 0 !important;\r\n -webkit-mask-size: 100% 100% !important;\r\n mask-size: 100% 100% !important;\r\n\r\n pointer-events: none !important;\r\n transform: translate3d(0, 0, 0) !important;\r\n transform-origin: top left !important;\r\n transition: transform .62s cubic-bezier(.22,.78,.2,1) !important;\r\n}\r\n\r\nbody .websites .website-link:hover::after,\r\nbody .websites .website-link:focus-visible::after {\r\n\r\n top: 0 !important;\r\n right: 0 !important;\r\n bottom: 0 !important;\r\n left: 0 !important;\r\n transform: translate3d(0, 34%, 0) !important;\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n body .websites .website-link::after,\r\n body .websites .website-link--preview::after {\r\n transition: none !important;\r\n }\r\n}\r\n\r\n@media (max-width: 720px) {\r\n main > .testimonials .testimonials__header {\r\n margin-bottom: 28px !important;\r\n }\r\n\r\n .testimonial-stage {\r\n min-height: 240px !important;\r\n padding: 2px 20px 24px !important;\r\n }\r\n\r\n .testimonial-stage__inner {\r\n width: min(100%, 520px) !important;\r\n }\r\n\r\n .testimonial-quote {\r\n max-width: 520px !important;\r\n font-size: 15px !important;\r\n line-height: 1.48 !important;\r\n letter-spacing: -.018em !important;\r\n text-wrap: pretty !important;\r\n }\r\n\r\n .testimonial-author {\r\n gap: 3px !important;\r\n margin-top: 20px !important;\r\n }\r\n\r\n .testimonial-author strong {\r\n font-size: 11px !important;\r\n }\r\n\r\n .testimonial-author span {\r\n max-width: 270px !important;\r\n font-size: 9px !important;\r\n line-height: 1.4 !important;\r\n }\r\n\r\n .testimonial-mobile-cue {\r\n gap: 8px !important;\r\n margin-top: 16px !important;\r\n font-size: 7px !important;\r\n }\r\n}\r\n\r\n@media (max-width: 420px) {\r\n .testimonial-stage {\r\n min-height: 220px !important;\r\n padding-right: 18px !important;\r\n padding-left: 18px !important;\r\n }\r\n\r\n .testimonial-quote {\r\n font-size: 14px !important;\r\n line-height: 1.46 !important;\r\n }\r\n\r\n .testimonial-author {\r\n margin-top: 18px !important;\r\n }\r\n}\r\n\r\nbody .websites .website-link--preview {\r\n overflow: hidden !important;\r\n -webkit-clip-path: inset(0 round clamp(22px, 2.5vw, 30px)) !important;\r\n clip-path: inset(0 round clamp(22px, 2.5vw, 30px)) !important;\r\n}\r\n\r\nbody .websites .website-link--preview > img.website-link__preview {\r\n position: absolute !important;\r\n z-index: 1 !important;\r\n inset: 0 !important;\r\n top: 0 !important;\r\n right: 0 !important;\r\n bottom: 0 !important;\r\n left: 0 !important;\r\n width: 100% !important;\r\n height: 100% !important;\r\n min-width: 100% !important;\r\n min-height: 100% !important;\r\n max-width: none !important;\r\n max-height: none !important;\r\n margin: 0 !important;\r\n padding: 0 !important;\r\n border: 0 !important;\r\n border-radius: 0 !important;\r\n object-fit: cover !important;\r\n\r\n object-position: 50% 34% !important;\r\n\r\n -webkit-clip-path: none !important;\r\n clip-path: none !important;\r\n transform: none !important;\r\n transform-origin: center center !important;\r\n will-change: object-position !important;\r\n transition: object-position .62s cubic-bezier(.22,.78,.2,1) !important;\r\n pointer-events: none !important;\r\n}\r\n\r\nbody .websites .website-link--preview:hover > img.website-link__preview,\r\nbody .websites .website-link--preview:focus-visible > img.website-link__preview {\r\n inset: 0 !important;\r\n top: 0 !important;\r\n right: 0 !important;\r\n bottom: 0 !important;\r\n left: 0 !important;\r\n transform: none !important;\r\n object-position: 50% calc(34% - 10px) !important;\r\n}\r\n\r\nbody .websites .website-link--preview::after {\r\n box-shadow: none !important;\r\n outline: 0 !important;\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n body .websites .website-link--preview > img.website-link__preview {\r\n transition: none !important;\r\n }\r\n}\r\n\r\n\r\n\/* Client logo carousel: native swipe + desktop arrows *\/\r\n.clients__header {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 16px;\r\n margin-bottom: 24px;\r\n}\r\n\r\n.clients__header .clients__label {\r\n margin: 0 !important;\r\n}\r\n\r\n.clients__controls {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n flex: 0 0 auto;\r\n}\r\n\r\n.clients__arrow {\r\n appearance: none;\r\n -webkit-appearance: none;\r\n width: 36px;\r\n height: 36px;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n border: 1px solid var(--line);\r\n border-radius: 50%;\r\n background: transparent;\r\n color: var(--text);\r\n font-family: var(--sans);\r\n font-size: 16px;\r\n line-height: 1;\r\n cursor: pointer;\r\n transition: border-color .16s ease, background-color .16s ease, color .16s ease;\r\n}\r\n\r\n.clients__arrow:hover,\r\n.clients__arrow:focus-visible {\r\n border-color: var(--text);\r\n background: var(--text);\r\n color: var(--bg);\r\n outline: none;\r\n}\r\n\r\nmain > .grid .clients__marquee {\r\n overflow: hidden !important;\r\n overscroll-behavior-inline: contain;\r\n touch-action: pan-y !important;\r\n cursor: default !important;\r\n}\r\n\r\n\/* Keep autoplay on the compositor. JS only changes animation time for swipe\/arrows. *\/\r\nmain > .grid .clients__track {\r\n transform: translate3d(0, 0, 0);\r\n will-change: transform !important;\r\n backface-visibility: hidden;\r\n -webkit-backface-visibility: hidden;\r\n}\r\n\r\nmain > .grid .clients.is-logo-carousel-enhanced .clients__track {\r\n animation: none !important;\r\n}\r\n\r\n.clients__logo--iratcr {\r\n width: 142px !important;\r\n min-width: 142px !important;\r\n --logo-w: 126px;\r\n --logo-h: 36px;\r\n}\r\n\r\n.clients__logo--iratcr img {\r\n object-fit: cover !important;\r\n object-position: center center !important;\r\n filter: grayscale(1) saturate(0) brightness(.48) contrast(1.08) !important;\r\n opacity: .62 !important;\r\n}\r\n\r\n.clients__logo--adventure-lab {\r\n width: 142px !important;\r\n min-width: 142px !important;\r\n --logo-w: 126px;\r\n --logo-h: 38px;\r\n}\r\n\r\n@media (max-width: 900px) and (min-width: 721px) {\r\n .clients__header {\r\n position: relative;\r\n justify-content: center;\r\n }\r\n\r\n .clients__controls {\r\n position: absolute;\r\n right: 0;\r\n }\r\n}\r\n\r\n@media (max-width: 720px) {\r\n .clients__header {\r\n justify-content: center;\r\n }\r\n\r\n .clients__controls {\r\n display: none;\r\n }\r\n\r\n main > .grid .clients__marquee {\r\n cursor: grab !important;\r\n }\r\n\r\n main > .grid .clients__marquee:active {\r\n cursor: grabbing !important;\r\n }\r\n\r\n .clients__logo--iratcr,\r\n .clients__logo--adventure-lab {\r\n width: 124px !important;\r\n min-width: 124px !important;\r\n --logo-w: 110px;\r\n --logo-h: 34px;\r\n }\r\n}\r\n\r\n@media (max-width: 520px) {\r\n .clients__logo--iratcr,\r\n .clients__logo--adventure-lab {\r\n width: 112px !important;\r\n min-width: 112px !important;\r\n --logo-w: 100px;\r\n --logo-h: 31px;\r\n }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n .clients__controls {\r\n display: none !important;\r\n }\r\n}\r\n\r\n\r\n\r\n\/* Animated construction title \u2014 matched to the existing editorial design *\/\r\nmain > .construction-title--animated {\r\n --construction-ink: var(--text);\r\n overflow: visible !important;\r\n text-wrap: balance;\r\n}\r\n\r\nmain > .construction-title--animated .construction-word {\r\n display: inline-block !important;\r\n white-space: nowrap;\r\n font-family: var(--serif) !important;\r\n font-weight: 400 !important;\r\n line-height: inherit;\r\n \/* A touch more breathing room gives animated glyphs their own visual slot. *\/\r\n letter-spacing: -.025em !important;\r\n}\r\n\r\nmain > .construction-title--animated .construction-word--roman {\r\n font-style: normal !important;\r\n}\r\n\r\nmain > .construction-title--animated .construction-word--italic {\r\n font-style: italic !important;\r\n letter-spacing: -.03em !important;\r\n}\r\n\r\nmain > .construction-title--animated .construction-space {\r\n display: inline-block !important;\r\n width: .18em;\r\n font-size: inherit;\r\n font-style: normal !important;\r\n}\r\n\r\nmain > .construction-title--animated .construction-letter {\r\n --letter-x: 0em;\r\n --letter-y: 0em;\r\n --letter-r: 0deg;\r\n\r\n display: inline-block;\r\n position: relative;\r\n \/* Reserve a tiny safety gutter around every glyph. The movement is still\r\n strong, but adjacent letters do not visually collide. *\/\r\n margin: 0 .03em;\r\n padding: 0;\r\n color: var(--construction-ink);\r\n font: inherit;\r\n font-weight: inherit;\r\n line-height: inherit;\r\n letter-spacing: 0;\r\n -webkit-text-stroke: 0 transparent !important;\r\n transform: translate3d(var(--letter-x), var(--letter-y), 0) rotate(var(--letter-r));\r\n transform-origin: 50% 58%;\r\n transition: transform 720ms cubic-bezier(.16,.84,.22,1);\r\n will-change: transform;\r\n text-align: center;\r\n}\r\n\r\nmain > .construction-title--animated:hover .construction-letter {\r\n transition-duration: 540ms;\r\n}\r\n\r\n@media (max-width: 720px) {\r\n main > .construction-title--animated .construction-space {\r\n width: .14em;\r\n }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n main > .construction-title--animated .construction-letter {\r\n color: var(--construction-ink) !important;\r\n -webkit-text-stroke: 0 transparent !important;\r\n transform: none !important;\r\n transition: none !important;\r\n }\r\n}\r\n\r\n\r\n\/* Fluid type-collage morph: two glyph faces occupy one fixed slot and\r\n dissolve into each other. The parent itself still only translates\/rotates. *\/\r\n.construction-letter {\r\n overflow: visible;\r\n isolation: isolate;\r\n}\r\n\r\n.construction-letter__measure {\r\n display: inline-block;\r\n visibility: hidden;\r\n pointer-events: none;\r\n font-family: Georgia, \"Times New Roman\", Times, serif;\r\n font: inherit;\r\n line-height: inherit;\r\n}\r\n\r\n.construction-letter__face {\r\n position: absolute;\r\n margin: 0;\r\n padding: 0;\r\n border: 0;\r\n text-decoration: none;\r\n inset: 0;\r\n display: flex;\r\n align-items: baseline;\r\n justify-content: center;\r\n color: inherit;\r\n line-height: inherit;\r\n letter-spacing: 0 !important;\r\n white-space: nowrap;\r\n pointer-events: none;\r\n font-size: 1em !important;\r\n\r\n opacity: 0;\r\n filter: blur(5px);\r\n transform: translateZ(0);\r\n transition:\r\n opacity 760ms cubic-bezier(.22,.61,.36,1),\r\n filter 760ms cubic-bezier(.22,.61,.36,1);\r\n will-change: opacity, filter;\r\n}\r\n\r\n.construction-letter__face.is-visible {\r\n opacity: 1;\r\n filter: blur(0);\r\n}\r\n\r\nmain > .construction-title--animated:hover .construction-letter__face {\r\n transition-duration: 760ms;\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n .construction-letter__face {\r\n transition: none !important;\r\n filter: none !important;\r\n }\r\n}\r\n\r\n\r\n\/* --- final tuning: no blur, stable font morph, hero only centered --- *\/\r\n\r\n\/* No blur at any point in the font morph. *\/\r\nmain > .construction-title--animated .construction-letter__face {\r\n filter: none !important;\r\n transition: opacity 620ms cubic-bezier(.22,.61,.36,1) !important;\r\n will-change: opacity !important;\r\n}\r\n\r\n\/* Keep every glyph inside a fixed line box so changing font metrics\r\n cannot change the title height or move the rest of the page. *\/\r\nmain > .construction-title--animated .construction-letter {\r\n line-height: 1em !important;\r\n height: 1em !important;\r\n vertical-align: baseline !important;\r\n}\r\n\r\nmain > .construction-title--animated .construction-letter__measure,\r\nmain > .construction-title--animated .construction-letter__face {\r\n line-height: 1em !important;\r\n height: 1em !important;\r\n}\r\n\r\n\/* Center ONLY the hero block. No selectors below touch .info,\r\n services, clients, works, testimonials or contact sections. *\/\r\nmain > .grid > .hero {\r\n margin-inline: auto !important;\r\n align-self: center !important;\r\n justify-self: center !important;\r\n text-align: center !important;\r\n}\r\n\r\nmain > .grid > .hero .contact {\r\n margin-inline: auto !important;\r\n}\r\n\r\nmain > .grid > .hero .socials {\r\n justify-content: center !important;\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n main > .construction-title--animated .construction-letter__face {\r\n transition: none !important;\r\n }\r\n}\r\n\r\n\r\n\/* =========================================================\r\n FINAL HERO \/ TYPEWRITER INTERACTION\r\n ========================================================= *\/\r\n\r\n\/* Entire hero = title + supporting copy + social icons. *\/\r\nmain > .construction-hero {\r\n width: min(100%, 1040px);\r\n margin: 0 auto clamp(54px, 7vw, 92px);\r\n padding-inline: clamp(2px, 1vw, 12px);\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n text-align: center;\r\n overflow: visible;\r\n}\r\n\r\nmain > .construction-hero > .construction-title {\r\n width: 100%;\r\n max-width: 100%;\r\n margin: 0 auto;\r\n text-align: center;\r\n overflow: visible !important;\r\n}\r\n\r\nmain > .construction-hero > .contact {\r\n width: min(100%, 340px);\r\n margin: clamp(34px, 4.5vw, 58px) auto 0 !important;\r\n padding-top: 0 !important;\r\n text-align: center;\r\n}\r\n\r\nmain > .construction-hero > .contact .intro {\r\n margin-left: auto;\r\n margin-right: auto;\r\n}\r\n\r\nmain > .construction-hero > .contact .socials {\r\n justify-content: center !important;\r\n}\r\n\r\n\/* The original left hero column is gone. Keep the rest of the desktop\r\n layout aligned to its original right-hand column. *\/\r\nmain > .grid > .info {\r\n grid-column: 2;\r\n}\r\n\r\n\/* Title is completely normal before interaction. *\/\r\nmain > .construction-hero .construction-title--animated {\r\n cursor: default;\r\n user-select: none;\r\n -webkit-user-select: none;\r\n touch-action: manipulation;\r\n text-wrap: balance;\r\n overflow: visible !important;\r\n}\r\n\r\nmain > .construction-hero .construction-word {\r\n display: inline-block !important;\r\n white-space: nowrap;\r\n overflow: visible;\r\n}\r\n\r\n\/* Every letter keeps a stable base-font slot. The visible font sits\r\n absolutely on top, so changing typeface never reflows the page. *\/\r\nmain > .construction-hero .construction-letter {\r\n --letter-x: 0em;\r\n --letter-y: 0em;\r\n --letter-r: 0deg;\r\n\r\n position: relative !important;\r\n display: inline-block !important;\r\n width: auto;\r\n height: 1em !important;\r\n margin: 0 .022em !important;\r\n padding: 0 !important;\r\n line-height: 1em !important;\r\n vertical-align: baseline !important;\r\n overflow: visible !important;\r\n\r\n transform:\r\n translate3d(var(--letter-x), var(--letter-y), 0)\r\n rotate(var(--letter-r)) !important;\r\n transform-origin: 50% 58%;\r\n transition: transform 240ms steps(3, end) !important;\r\n}\r\n\r\nmain > .construction-hero .construction-letter__measure {\r\n position: relative;\r\n display: inline-block !important;\r\n visibility: hidden !important;\r\n pointer-events: none;\r\n white-space: pre;\r\n font-family: Georgia, \"Times New Roman\", Times, serif !important;\r\n font-weight: 400 !important;\r\n font-style: inherit !important;\r\n font-size: 1em !important;\r\n line-height: 1em !important;\r\n letter-spacing: 0 !important;\r\n}\r\n\r\n\/* One visible glyph only. No blur and no crossfade. *\/\r\nmain > .construction-hero .construction-letter__face {\r\n position: absolute !important;\r\n inset: 0 !important;\r\n display: flex !important;\r\n align-items: baseline;\r\n justify-content: center;\r\n margin: 0 !important;\r\n padding: 0 !important;\r\n border: 0 !important;\r\n opacity: 1 !important;\r\n filter: none !important;\r\n transition: none !important;\r\n animation: none;\r\n white-space: nowrap;\r\n pointer-events: none;\r\n color: inherit !important;\r\n line-height: 1em !important;\r\n letter-spacing: 0 !important;\r\n}\r\n\r\n\/* Mechanical typewriter strike: disappear for one \"key hit\", switch face,\r\n then snap back. No scaling, no skew, no blur. *\/\r\n@keyframes constructionTypeStrike {\r\n 0% { transform: translateY(0); opacity: 1; }\r\n 45% { transform: translateY(.075em); opacity: 0; }\r\n 55% { transform: translateY(-.045em); opacity: 0; }\r\n 100% { transform: translateY(0); opacity: 1; }\r\n}\r\n\r\nmain > .construction-hero .construction-letter.is-typing .construction-letter__face {\r\n animation: constructionTypeStrike 135ms steps(2, end) both !important;\r\n}\r\n\r\n\/* Fine pointer: hover is the interaction. *\/\r\n@media (hover: hover) and (pointer: fine) {\r\n main > .construction-hero .construction-title--animated {\r\n cursor: crosshair;\r\n }\r\n}\r\n\r\n\/* Touch: tap toggles the effect. *\/\r\n@media (hover: none), (pointer: coarse) {\r\n main > .construction-hero .construction-title--animated {\r\n cursor: pointer;\r\n -webkit-tap-highlight-color: transparent;\r\n }\r\n}\r\n\r\n\/* Mobile: protect the long word from clipping. *\/\r\n@media (max-width: 900px) {\r\n main > .grid > .info {\r\n grid-column: 1;\r\n }\r\n\r\n main > .construction-hero {\r\n width: 100%;\r\n margin-bottom: clamp(48px, 10vw, 72px);\r\n padding-inline: 0;\r\n }\r\n}\r\n\r\n@media (max-width: 720px) {\r\n main > .construction-hero > .construction-title {\r\n width: calc(100vw - (var(--page-x) * 2));\r\n max-width: 100%;\r\n padding-inline: 1px;\r\n font-size: clamp(40px, 12.6vw, 58px) !important;\r\n line-height: 1.02 !important;\r\n letter-spacing: -.055em !important;\r\n }\r\n\r\n main > .construction-hero .construction-word {\r\n max-width: 100%;\r\n }\r\n\r\n main > .construction-hero .construction-word--roman,\r\n main > .construction-hero .construction-word--italic {\r\n letter-spacing: -.018em !important;\r\n }\r\n\r\n main > .construction-hero .construction-letter {\r\n margin-inline: .012em !important;\r\n }\r\n\r\n main > .construction-hero > .contact {\r\n margin-top: 32px !important;\r\n }\r\n}\r\n\r\n@media (max-width: 420px) {\r\n main > .construction-hero > .construction-title {\r\n font-size: clamp(38px, 11.7vw, 49px) !important;\r\n line-height: 1.04 !important;\r\n }\r\n\r\n main > .construction-hero .construction-space {\r\n width: .11em !important;\r\n }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n main > .construction-hero .construction-letter {\r\n transform: none !important;\r\n transition: none !important;\r\n }\r\n\r\n main > .construction-hero .construction-letter.is-typing .construction-letter__face {\r\n animation: none !important;\r\n }\r\n}\r\n\r\n\r\n\/* =========================================================\r\n PATCH v13 \u2014 real hero centering + no clipping\r\n ========================================================= *\/\r\n\r\n\/* Treat the whole hero as one centered block. *\/\r\nmain > .construction-hero {\r\n width: min(100%, 1180px) !important;\r\n margin: 0 auto clamp(56px, 7vw, 96px) !important;\r\n padding-inline: 0 !important;\r\n display: grid !important;\r\n justify-items: center !important;\r\n align-items: start !important;\r\n text-align: center !important;\r\n}\r\n\r\n\/* Make the title itself a centered, fit-content block so the text\r\n doesn't look offset inside a full-width heading box. *\/\r\nmain > .construction-hero > .construction-title {\r\n display: inline-block !important;\r\n width: auto !important;\r\n max-width: calc(100vw - (var(--page-x) * 2)) !important;\r\n margin: 0 auto !important;\r\n text-align: center !important;\r\n text-wrap: initial !important;\r\n overflow: visible !important;\r\n font-size: clamp(54px, 8vw, 112px) !important;\r\n line-height: .98 !important;\r\n letter-spacing: -.06em !important;\r\n}\r\n\r\n\/* Controlled line breaks on desktop:\r\n line 1 = \"Strona\"\r\n line 2 = \"w przebudowie\" *\/\r\nmain > .construction-hero > .construction-title > .construction-word--roman:first-of-type {\r\n display: block !important;\r\n margin: 0 auto -.02em !important;\r\n}\r\n\r\nmain > .construction-hero > .construction-title > .construction-word:nth-of-type(2),\r\nmain > .construction-hero > .construction-title > .construction-word:nth-of-type(3) {\r\n display: inline-block !important;\r\n vertical-align: top;\r\n}\r\n\r\n\/* Remove any leftover balancing that can produce awkward offsets. *\/\r\nmain > .construction-hero .construction-title--animated {\r\n text-wrap: initial !important;\r\n width: auto !important;\r\n}\r\n\r\n\/* Tighter, but still safe, slots so the headline doesn't become enormous. *\/\r\nmain > .construction-hero .construction-letter {\r\n margin-inline: .012em !important;\r\n}\r\n\r\n\/* Supporting copy + icons centered as part of the same hero block. *\/\r\nmain > .construction-hero > .contact {\r\n width: min(100%, 360px) !important;\r\n margin: clamp(30px, 4vw, 48px) auto 0 !important;\r\n text-align: center !important;\r\n}\r\n\r\nmain > .construction-hero > .contact .intro {\r\n text-align: center !important;\r\n}\r\n\r\nmain > .construction-hero > .contact .socials {\r\n justify-content: center !important;\r\n}\r\n\r\n\/* Tablet \/ small laptop *\/\r\n@media (max-width: 900px) {\r\n main > .construction-hero {\r\n width: 100% !important;\r\n margin-bottom: clamp(46px, 9vw, 72px) !important;\r\n }\r\n\r\n main > .construction-hero > .construction-title {\r\n max-width: calc(100vw - (var(--page-x) * 2)) !important;\r\n font-size: clamp(44px, 10.5vw, 76px) !important;\r\n line-height: 1.01 !important;\r\n letter-spacing: -.055em !important;\r\n }\r\n}\r\n\r\n\/* Mobile: stack each word to guarantee no clipping. *\/\r\n@media (max-width: 720px) {\r\n main > .construction-hero > .construction-title {\r\n display: block !important;\r\n width: calc(100vw - (var(--page-x) * 2)) !important;\r\n max-width: calc(100vw - (var(--page-x) * 2)) !important;\r\n font-size: clamp(36px, 11.8vw, 56px) !important;\r\n line-height: 1.02 !important;\r\n letter-spacing: -.045em !important;\r\n }\r\n\r\n main > .construction-hero > .construction-title > .construction-word {\r\n display: block !important;\r\n width: 100% !important;\r\n margin: 0 auto !important;\r\n white-space: nowrap !important;\r\n text-align: center !important;\r\n }\r\n\r\n main > .construction-hero > .construction-title > .construction-word:nth-of-type(2) {\r\n margin-top: -.04em !important;\r\n margin-bottom: -.05em !important;\r\n }\r\n\r\n main > .construction-hero .construction-letter {\r\n margin-inline: .008em !important;\r\n }\r\n\r\n main > .construction-hero > .contact {\r\n margin-top: 28px !important;\r\n }\r\n}\r\n\r\n@media (max-width: 420px) {\r\n main > .construction-hero > .construction-title {\r\n font-size: clamp(31px, 10.9vw, 44px) !important;\r\n line-height: 1.04 !important;\r\n letter-spacing: -.038em !important;\r\n }\r\n\r\n main > .construction-hero .construction-letter {\r\n margin-inline: .004em !important;\r\n }\r\n\r\n main > .construction-hero > .contact {\r\n width: min(100%, 320px) !important;\r\n }\r\n}\r\n\r\n\r\n\/* =========================================================\r\n PATCH v14 \u2014 remove legacy 50vw offset + slightly larger socials\r\n ========================================================= *\/\r\n\r\n\/* IMPORTANT: an older .construction-title rule used:\r\n position: relative; left: 50%; width: 100vw; margin-left: -50vw.\r\n Later rules changed the width\/margin but left `left:50%` active.\r\n Reset the legacy full-bleed positioning completely. *\/\r\nmain > .construction-hero > h1.construction-title {\r\n position: relative !important;\r\n left: auto !important;\r\n right: auto !important;\r\n inset-inline: auto !important;\r\n transform: none !important;\r\n\r\n display: inline-block !important;\r\n width: auto !important;\r\n max-width: calc(100vw - (var(--page-x) * 2)) !important;\r\n\r\n margin-left: auto !important;\r\n margin-right: auto !important;\r\n padding-left: 0 !important;\r\n padding-right: 0 !important;\r\n\r\n text-align: center !important;\r\n box-sizing: border-box !important;\r\n}\r\n\r\n\/* Ensure the hero's centering context itself has no horizontal offset. *\/\r\nmain > .construction-hero {\r\n position: relative !important;\r\n left: auto !important;\r\n right: auto !important;\r\n margin-left: auto !important;\r\n margin-right: auto !important;\r\n justify-items: center !important;\r\n align-items: start !important;\r\n}\r\n\r\n\/* Slightly larger social icons, keeping the existing visual weight. *\/\r\nmain > .construction-hero .socials {\r\n gap: 20px !important;\r\n}\r\n\r\nmain > .construction-hero .social-link {\r\n width: 26px !important;\r\n height: 26px !important;\r\n}\r\n\r\nmain > .construction-hero .social-link svg {\r\n width: 20px !important;\r\n height: 20px !important;\r\n}\r\n\r\n\/* Mobile remains centered and cannot inherit the old full-viewport title offset. *\/\r\n@media (max-width: 720px) {\r\n main > .construction-hero > h1.construction-title {\r\n position: relative !important;\r\n left: auto !important;\r\n right: auto !important;\r\n width: calc(100vw - (var(--page-x) * 2)) !important;\r\n max-width: calc(100vw - (var(--page-x) * 2)) !important;\r\n margin-left: auto !important;\r\n margin-right: auto !important;\r\n padding-inline: 0 !important;\r\n }\r\n\r\n main > .construction-hero .social-link {\r\n width: 27px !important;\r\n height: 27px !important;\r\n }\r\n\r\n main > .construction-hero .social-link svg {\r\n width: 21px !important;\r\n height: 21px !important;\r\n }\r\n}\r\n\r\n<\/style>\r\n<\/head>\r\n\r\n<body>\r\n <div class=\"page\">\r\n <main>\r\n\r\n\r\n\r\n <section class=\"construction-hero\" aria-label=\"Strona w przebudowie\">\r\n <h1 class=\"construction-title construction-title--animated\" aria-label=\"Strona w przebudowie\" data-construction-title>\r\n <span class=\"construction-word construction-word--roman\" aria-hidden=\"true\"><b class=\"construction-letter\">S<\/b><b class=\"construction-letter\">t<\/b><b class=\"construction-letter\">r<\/b><b class=\"construction-letter\">o<\/b><b class=\"construction-letter\">n<\/b><b class=\"construction-letter\">a<\/b><\/span> <span class=\"construction-word construction-word--italic\" aria-hidden=\"true\"><b class=\"construction-letter\">w<\/b><\/span> <span class=\"construction-word construction-word--italic\" aria-hidden=\"true\"><b class=\"construction-letter\">p<\/b><b class=\"construction-letter\">r<\/b><b class=\"construction-letter\">z<\/b><b class=\"construction-letter\">e<\/b><b class=\"construction-letter\">b<\/b><b class=\"construction-letter\">u<\/b><b class=\"construction-letter\">d<\/b><b class=\"construction-letter\">o<\/b><b class=\"construction-letter\">w<\/b><b class=\"construction-letter\">i<\/b><b class=\"construction-letter\">e<\/b><\/span>\r\n <\/h1>\r\n <section class=\"contact\" aria-label=\"Kontakt\">\r\n <p class=\"intro\">Do tego czasu mo\u017cesz znale\u017a\u0107 mnie tutaj:<\/p>\r\n\r\n <nav class=\"socials\" aria-label=\"Social links\">\r\n <a class=\"social-link\" href=\"https:\/\/www.linkedin.com\/in\/michalplebaniak\/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"LinkedIn\">\r\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n <path d=\"M4.98 3.5C4.98 4.88 3.86 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1s2.48 1.12 2.48 2.5ZM.28 8h4.44v15H.28V8Zm7.32 0h4.25v2.05h.06c.59-1.12 2.04-2.3 4.2-2.3 4.49 0 5.32 2.96 5.32 6.8V23h-4.43v-7.5c0-1.79-.03-4.09-2.49-4.09-2.5 0-2.88 1.95-2.88 3.96V23H7.6V8Z\"\/>\r\n <\/svg>\r\n <\/a>\r\n\r\n <a class=\"social-link\" href=\"https:\/\/www.instagram.com\/michal.plebaniak\/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Instagram\">\r\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n <path d=\"M7.75 2h8.5A5.76 5.76 0 0 1 22 7.75v8.5A5.76 5.76 0 0 1 16.25 22h-8.5A5.76 5.76 0 0 1 2 16.25v-8.5A5.76 5.76 0 0 1 7.75 2Zm0 2A3.75 3.75 0 0 0 4 7.75v8.5A3.75 3.75 0 0 0 7.75 20h8.5A3.75 3.75 0 0 0 20 16.25v-8.5A3.75 3.75 0 0 0 16.25 4h-8.5ZM12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6Zm5.25-2.55a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4Z\"\/>\r\n <\/svg>\r\n <\/a>\r\n\r\n <a class=\"social-link\" href=\"https:\/\/vimeo.com\/michalplebaniak\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Vimeo\">\r\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n <path d=\"M22.38 6.04c-.1 2.2-1.64 5.2-4.63 9.02-3.09 3.99-5.7 5.98-7.84 5.98-1.32 0-2.44-1.22-3.36-3.66L4.7 10.7C4.02 8.27 3.3 7.05 2.55 7.05c-.16 0-.74.35-1.71 1.03L0 7.01c1.07-.94 2.13-1.89 3.18-2.83 1.43-1.24 2.5-1.9 3.22-1.97 1.7-.16 2.75 1 3.15 3.48.43 2.68.73 4.35.9 5 .5 2.23 1.06 3.34 1.66 3.34.47 0 1.17-.74 2.11-2.22.94-1.48 1.44-2.6 1.51-3.38.13-1.28-.37-1.92-1.51-1.92-.54 0-1.09.12-1.66.37 1.1-3.6 3.2-5.34 6.3-5.23 2.3.07 3.47 1.54 3.52 4.39Z\"\/>\r\n <\/svg>\r\n <\/a>\r\n <\/nav>\r\n <\/section>\r\n <\/section>\r\n\r\n <section class=\"grid\" aria-label=\"Strona w przebudowie\">\r\n\r\n\r\n <aside class=\"info\">\r\n <section class=\"panel services\" aria-label=\"Us\u0142ugi\">\r\n <p class=\"section-title\">Us\u0142ugi<\/p>\r\n\r\n <div class=\"services__accordion\">\r\n <div class=\"service-accordion is-open\">\r\n <button class=\"service-accordion__heading\" type=\"button\" aria-expanded=\"true\" aria-controls=\"service-wideo-content\">\r\n <span class=\"service-accordion__name\">Video<\/span>\r\n <\/button>\r\n <div class=\"service-accordion__content\" id=\"service-wideo-content\">\r\n Filmy promocyjne, social media, relacje z event\u00f3w, wywiady i animacje dopasowane do marki oraz kana\u0142u komunikacji.\r\n <\/div>\r\n <\/div>\r\n <div class=\"service-accordion is-open\">\r\n <button class=\"service-accordion__heading\" type=\"button\" aria-expanded=\"true\" aria-controls=\"service-web-content\">\r\n <span class=\"service-accordion__name\">Web design<\/span>\r\n <\/button>\r\n <div class=\"service-accordion__content\" id=\"service-web-content\">\r\n Strony i landing page\u2019e z naciskiem na prost\u0105 struktur\u0119, estetyk\u0119, responsywno\u015b\u0107 i wygodn\u0105 obs\u0142ug\u0119.\r\n <\/div>\r\n <\/div>\r\n <div class=\"service-accordion is-open\">\r\n <button class=\"service-accordion__heading\" type=\"button\" aria-expanded=\"true\" aria-controls=\"service-content-day-content\">\r\n <span class=\"service-accordion__name\">Content day<\/span>\r\n <\/button>\r\n <div class=\"service-accordion__content\" id=\"service-content-day-content\">\r\n Zdj\u0119cia, video i inne formaty publikacji w jednym procesie. Zapas tre\u015bci na ca\u0142y miesi\u0105c w jeden dzie\u0144 zdj\u0119ciowy.\r\n <\/div>\r\n <\/div>\r\n <div class=\"service-accordion is-open\">\r\n <button class=\"service-accordion__heading\" type=\"button\" aria-expanded=\"true\" aria-controls=\"service-fotografia-content\">\r\n <span class=\"service-accordion__name\">Fotografia<\/span>\r\n <\/button>\r\n <div class=\"service-accordion__content\" id=\"service-fotografia-content\">\r\n Sesje wizerunkowe, produktowe i eventowe, od koncepcji po gotowe zdj\u0119cia do kampanii, stron i social media.\r\n <\/div>\r\n <\/div>\r\n <div class=\"service-accordion is-open\">\r\n <button class=\"service-accordion__heading\" type=\"button\" aria-expanded=\"true\" aria-controls=\"service-design-content\">\r\n <span class=\"service-accordion__name\">Design<\/span>\r\n <\/button>\r\n <div class=\"service-accordion__content\" id=\"service-design-content\">\r\n Kompletna identyfikacja wizualna, projekty logo, prezentacje, strony internetowe, materia\u0142y do social media, kampanii i komunikacji firmowej.\r\n <\/div>\r\n <\/div>\r\n <div class=\"service-accordion is-open\">\r\n <button class=\"service-accordion__heading\" type=\"button\" aria-expanded=\"true\" aria-controls=\"service-marketing-content\">\r\n <span class=\"service-accordion__name\">Marketing<\/span>\r\n <\/button>\r\n <div class=\"service-accordion__content\" id=\"service-marketing-content\">\r\n Koncepcje kampanii, social media, content i komunikacja, zaplanowane wok\u00f3\u0142 konkretnych cel\u00f3w biznesowych.\r\n <\/div>\r\n <\/div>\r\n <div class=\"service-accordion is-open\">\r\n <button class=\"service-accordion__heading\" type=\"button\" aria-expanded=\"true\" aria-controls=\"service-consulting-content\">\r\n <span class=\"service-accordion__name\">Consulting<\/span>\r\n <\/button>\r\n <div class=\"service-accordion__content\" id=\"service-consulting-content\">\r\n Konsultacje kreatywne i strategiczne pomagaj\u0105ce uporz\u0105dkowa\u0107 mark\u0119, komunikacj\u0119 i dalsze dzia\u0142ania.\r\n <\/div>\r\n <\/div>\r\n <div class=\"service-accordion is-open\">\r\n <button class=\"service-accordion__heading\" type=\"button\" aria-expanded=\"true\" aria-controls=\"service-ai-content-content\">\r\n <span class=\"service-accordion__name\">AI content<\/span>\r\n <\/button>\r\n <div class=\"service-accordion__content\" id=\"service-ai-content-content\">\r\n Obrazy produktowe, mockupy, workflow i tre\u015bci wspierane AI.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"clients\" aria-label=\"Klienci\">\r\n <div class=\"clients__header\">\r\n <p class=\"clients__label\">Wybrani klienci<\/p>\r\n <div class=\"clients__controls\" aria-label=\"Sterowanie logotypami klient\u00f3w\">\r\n <button class=\"clients__arrow clients__arrow--prev\" type=\"button\" aria-label=\"Poprzednie logotypy\" aria-controls=\"clients-logo-strip\">\u2190<\/button>\r\n <button class=\"clients__arrow clients__arrow--next\" type=\"button\" aria-label=\"Nast\u0119pne logotypy\" aria-controls=\"clients-logo-strip\">\u2192<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"clients__marquee\" id=\"clients-logo-strip\">\r\n <div class=\"clients__track\">\r\n <div class=\"clients__group\">\r\n <span class=\"clients__logo clients__logo--playboy\">\r\n <img src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/6\/6b\/Playboy_logo.svg\" alt=\"Playboy\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\r\n <\/span>\r\n\r\n <span class=\"clients__logo clients__logo--esquire\">\r\n <img src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/2\/25\/Esquire_logo_%282017%29.svg\" alt=\"Esquire\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\r\n <\/span>\r\n\r\n <span class=\"clients__logo clients__logo--cosmo\">\r\n <img src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/3\/32\/Cosmopolitan_logo.svg\" alt=\"Cosmopolitan\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\r\n <\/span>\r\n\r\n <span class=\"clients__logo clients__logo--arp clients__logo--blend\">\r\n <img src=\"https:\/\/michalplebaniak.com\/wp-content\/uploads\/2026\/08\/ARP.png\" alt=\"Agencja Rozwoju Pomorza\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\r\n <\/span>\r\n\r\n <span class=\"clients__logo clients__logo--pes\">\r\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\" \/>\r\n <\/span>\r\n\r\n <span class=\"clients__logo clients__logo--nck\">\r\n <img src=\"https:\/\/michalplebaniak.com\/wp-content\/uploads\/2026\/08\/NCK.png\" alt=\"Narodowe Centrum Kultury\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\r\n <\/span>\r\n\r\n <span class=\"clients__logo clients__logo--bit\">\r\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\" \/>\r\n <\/span>\r\n\r\n <span class=\"clients__logo clients__logo--btt\">\r\n <img src=\"https:\/\/klubbokserskigdansk.pl\/wp-content\/uploads\/2022\/11\/logo3.png\" alt=\"Klub Bokserski BTT\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\r\n <\/span>\r\n\r\n <span class=\"clients__logo clients__logo--sans\">\r\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\" \/>\r\n <\/span>\r\n\r\n <span class=\"clients__logo clients__logo--crosscore\">\r\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\" \/>\r\n <\/span>\r\n\r\n <span class=\"clients__logo clients__logo--agora\">\r\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\" \/>\r\n <\/span>\r\n\r\n <span class=\"clients__logo clients__logo--bok\">\r\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\" \/>\r\n <\/span>\r\n\r\n <span class=\"clients__logo clients__logo--medicover\">\r\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\" \/>\r\n <\/span>\r\n\r\n <span class=\"clients__logo clients__logo--iratcr\">\r\n <img src=\"https:\/\/michalplebaniak.com\/wp-content\/uploads\/2026\/08\/IRAtCR-w.png\" alt=\"Geocaching\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\r\n <\/span>\r\n\r\n <span class=\"clients__logo clients__logo--adventure-lab\">\r\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\" \/>\r\n <\/span>\r\n\r\n <span class=\"clients__logo clients__logo--bazaar\" aria-label=\"Harper's Bazaar\">\r\n <span class=\"clients__text-logo\" aria-hidden=\"true\">Bazaar<\/span>\r\n <\/span>\r\n <\/div>\r\n\r\n <div class=\"clients__group\" aria-hidden=\"true\">\r\n <span class=\"clients__logo clients__logo--playboy\">\r\n <img src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/6\/6b\/Playboy_logo.svg\" alt=\"\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\r\n <\/span>\r\n\r\n <span class=\"clients__logo clients__logo--esquire\">\r\n <img src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/2\/25\/Esquire_logo_%282017%29.svg\" alt=\"\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\r\n <\/span>\r\n\r\n <span class=\"clients__logo clients__logo--cosmo\">\r\n <img src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/3\/32\/Cosmopolitan_logo.svg\" alt=\"\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\r\n <\/span>\r\n\r\n <span class=\"clients__logo clients__logo--arp clients__logo--blend\">\r\n <img src=\"https:\/\/michalplebaniak.com\/wp-content\/uploads\/2026\/08\/ARP.png\" alt=\"\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\r\n <\/span>\r\n\r\n <span class=\"clients__logo clients__logo--pes\">\r\n <img src=\"https:\/\/michalplebaniak.com\/wp-content\/uploads\/2026\/08\/logotyp-pes-rgb-png.png\" alt=\"\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\r\n <\/span>\r\n\r\n <span class=\"clients__logo clients__logo--nck\">\r\n <img src=\"https:\/\/michalplebaniak.com\/wp-content\/uploads\/2026\/08\/NCK.png\" alt=\"\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\r\n <\/span>\r\n\r\n <span class=\"clients__logo clients__logo--bit\">\r\n <img src=\"https:\/\/companieslogo.com\/img\/orig\/11B.WA_BIG-6530fcb7.png?t=1720244490\" alt=\"\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\r\n <\/span>\r\n\r\n <span class=\"clients__logo clients__logo--btt\">\r\n <img src=\"https:\/\/klubbokserskigdansk.pl\/wp-content\/uploads\/2022\/11\/logo3.png\" alt=\"\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\r\n <\/span>\r\n\r\n <span class=\"clients__logo clients__logo--sans\">\r\n <img src=\"https:\/\/michalplebaniak.com\/wp-content\/uploads\/2026\/08\/Sopocka-Akademia-Nauk-Stosowanych.png\" alt=\"\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\r\n <\/span>\r\n\r\n <span class=\"clients__logo clients__logo--crosscore\">\r\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\" \/>\r\n <\/span>\r\n\r\n <span class=\"clients__logo clients__logo--agora\">\r\n <img src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/7\/7e\/Agora_S.A._2025.svg\" alt=\"\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\r\n <\/span>\r\n\r\n <span class=\"clients__logo clients__logo--bok\">\r\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\" \/>\r\n <\/span>\r\n\r\n <span class=\"clients__logo clients__logo--medicover\">\r\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\" \/>\r\n <\/span>\r\n\r\n <span class=\"clients__logo clients__logo--iratcr\">\r\n <img src=\"https:\/\/michalplebaniak.com\/wp-content\/uploads\/2026\/08\/IRAtCR-w.png\" alt=\"\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\r\n <\/span>\r\n\r\n <span class=\"clients__logo clients__logo--adventure-lab\">\r\n <img src=\"https:\/\/michalplebaniak.com\/wp-content\/uploads\/2026\/08\/Adventure_Lab_Logo_300dpi.png\" alt=\"\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\r\n <\/span>\r\n\r\n <span class=\"clients__logo clients__logo--bazaar\">\r\n <span class=\"clients__text-logo\">Bazaar<\/span>\r\n <\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <\/aside>\r\n <\/section>\r\n\r\n<section class=\"websites\" aria-label=\"Wybrane strony internetowe\" data-websites-carousel>\r\n <div class=\"websites__header\">\r\n <p class=\"section-title\">Wybrane strony internetowe<\/p>\r\n <div class=\"websites__controls\" aria-label=\"Sterowanie karuzel\u0105 stron internetowych\">\r\n <button class=\"websites__arrow websites__arrow--prev\" type=\"button\" aria-label=\"Poprzedni projekt\">\u2190<\/button>\r\n <button class=\"websites__arrow websites__arrow--next\" type=\"button\" aria-label=\"Nast\u0119pny projekt\">\u2192<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"websites__links\" tabindex=\"0\" aria-label=\"Karuzela projekt\u00f3w stron internetowych. Na telefonie przesu\u0144 palcem.\">\r\n <a class=\"website-link website-link--preview\" href=\"http:\/\/prestigejewellery.pl\/\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n <svg class=\"website-link__front-tab\" viewBox=\"0 0 580 170\" preserveAspectRatio=\"none\" aria-hidden=\"true\" focusable=\"false\">\r\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\" \/>\r\n <\/svg>\r\n <img class=\"website-link__preview\" src=\"https:\/\/michalplebaniak.com\/wp-content\/uploads\/2026\/05\/ChatGPT-Image-8-maj-2026-12_45_54.png\" onerror=\"this.onerror=null;this.src='assets\/prestige-folder-preview.png';\" alt=\"\" loading=\"lazy\" decoding=\"async\" aria-hidden=\"true\" fetchpriority=\"low\" \/>\r\n <span class=\"website-link__number\" aria-hidden=\"true\">01<\/span>\r\n <span class=\"website-link__content\">\r\n <span class=\"website-link__name\">Galeria Bi\u017cuterii Prestige<\/span>\r\n <span class=\"website-link__description\">Elegancka prezentacja marki, kolekcji bi\u017cuterii i oferty salonu.<\/span>\r\n <\/span>\r\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>\r\n <\/a>\r\n <a class=\"website-link\" href=\"https:\/\/michalplebaniak.com\/talent-complete\/\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n <svg class=\"website-link__front-tab\" viewBox=\"0 0 580 170\" preserveAspectRatio=\"none\" aria-hidden=\"true\" focusable=\"false\">\r\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\" \/>\r\n <\/svg>\r\n <span class=\"website-link__number\" aria-hidden=\"true\">02<\/span>\r\n <span class=\"website-link__content\">\r\n <span class=\"website-link__name\">Talent Complete<\/span>\r\n <span class=\"website-link__description\">Serwis us\u0142ugi HR skupiony na rekrutacji, talentach i wsparciu biznesu.<\/span>\r\n <\/span>\r\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>\r\n <\/a>\r\n <a class=\"website-link\" href=\"https:\/\/crosscoregdansk.pl\/\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n <svg class=\"website-link__front-tab\" viewBox=\"0 0 580 170\" preserveAspectRatio=\"none\" aria-hidden=\"true\" focusable=\"false\">\r\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\" \/>\r\n <\/svg>\r\n <span class=\"website-link__number\" aria-hidden=\"true\">03<\/span>\r\n <span class=\"website-link__content\">\r\n <span class=\"website-link__name\">CrossCore Gda\u0144sk<\/span>\r\n <span class=\"website-link__description\">Dynamiczna strona klubu treningowego z ofert\u0105 zaj\u0119\u0107 i kontaktem.<\/span>\r\n <\/span>\r\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>\r\n <\/a>\r\n <a class=\"website-link\" href=\"https:\/\/bajkvv.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n <svg class=\"website-link__front-tab\" viewBox=\"0 0 580 170\" preserveAspectRatio=\"none\" aria-hidden=\"true\" focusable=\"false\">\r\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\" \/>\r\n <\/svg>\r\n <span class=\"website-link__number\" aria-hidden=\"true\">04<\/span>\r\n <span class=\"website-link__content\">\r\n <span class=\"website-link__name\">Agata Bajkov<\/span>\r\n <span class=\"website-link__description\">Personalna marka trenerki z ofert\u0105 trening\u00f3w i wsp\u00f3\u0142pracy indywidualnej.<\/span>\r\n <\/span>\r\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>\r\n <\/a>\r\n <a class=\"website-link\" href=\"https:\/\/nordtrailrace.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n <svg class=\"website-link__front-tab\" viewBox=\"0 0 580 170\" preserveAspectRatio=\"none\" aria-hidden=\"true\" focusable=\"false\">\r\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\" \/>\r\n <\/svg>\r\n <span class=\"website-link__number\" aria-hidden=\"true\">05<\/span>\r\n <span class=\"website-link__content\">\r\n <span class=\"website-link__name\">Nord Trail Race<\/span>\r\n <span class=\"website-link__description\">Strona biegu terenowego z informacjami o trasie, zapisach i wydarzeniu.<\/span>\r\n <\/span>\r\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>\r\n <\/a>\r\n <a class=\"website-link\" href=\"https:\/\/michalplebaniak.com\/lura-cafe\/\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n <svg class=\"website-link__front-tab\" viewBox=\"0 0 580 170\" preserveAspectRatio=\"none\" aria-hidden=\"true\" focusable=\"false\">\r\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\" \/>\r\n <\/svg>\r\n <span class=\"website-link__number\" aria-hidden=\"true\">06<\/span>\r\n <span class=\"website-link__content\">\r\n <span class=\"website-link__name\">Lura Cafe<\/span>\r\n <span class=\"website-link__description\">Strona kawiarni Lura z ofert\u0105 kawy, produktami marki i informacjami o lokalu.<\/span>\r\n <\/span>\r\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>\r\n <\/a>\r\n <a class=\"website-link\" href=\"https:\/\/michalplebaniak.com\/amber-org\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n <svg class=\"website-link__front-tab\" viewBox=\"0 0 580 170\" preserveAspectRatio=\"none\" aria-hidden=\"true\" focusable=\"false\">\r\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\" \/>\r\n <\/svg>\r\n <span class=\"website-link__number\" aria-hidden=\"true\">07<\/span>\r\n <span class=\"website-link__content\">\r\n <span class=\"website-link__name\">Amber Org<\/span>\r\n <span class=\"website-link__description\">Work in Progress \u2014 projekt strony Amber Org, obecnie w trakcie realizacji.<\/span>\r\n <\/span>\r\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>\r\n <\/a>\r\n <\/div>\r\n<\/section>\r\n\r\n<section class=\"works-loop\" aria-label=\"Wybrane realizacje wideo\" data-works-loop>\r\n <div class=\"works-loop__header\">\r\n <p class=\"section-title\">Wybrane realizacje<\/p>\r\n <\/div>\r\n\r\n <div class=\"works-loop__carousel\" aria-label=\"Sterowanie karuzel\u0105\">\r\n <button class=\"works-loop__arrow works-loop__arrow--prev\" type=\"button\" aria-label=\"Poprzednia realizacja\">\u2190<\/button>\r\n\r\n <div class=\"works-loop__viewport\" tabindex=\"0\" aria-label=\"Karuzela realizacji. Przesu\u0144 palcem lub u\u017cyj strza\u0142ek.\">\r\n <div class=\"works-loop__track\">\r\n <div class=\"works-loop__item\" data-youtube-id=\"kMQtY2t2M_Q\" data-video-url=\"https:\/\/youtu.be\/kMQtY2t2M_Q\"><\/div>\r\n <div class=\"works-loop__item\" data-youtube-id=\"w3bjcWP0-zM\"><\/div>\r\n <div class=\"works-loop__item\" data-youtube-id=\"DsV_hk9__6A\" data-video-url=\"https:\/\/youtu.be\/DsV_hk9__6A\"><\/div>\r\n <div class=\"works-loop__item\" data-vimeo-id=\"1214957722\" data-thumbnail-refresh=\"true\"><\/div>\r\n <div class=\"works-loop__item\" data-vimeo-id=\"1204144635\"><\/div>\r\n <div class=\"works-loop__item\" data-vimeo-id=\"1191830305\"><\/div>\r\n <div class=\"works-loop__item\" data-vimeo-id=\"310873953\"><\/div>\r\n <div class=\"works-loop__item\" data-vimeo-id=\"1154238773\"><\/div>\r\n <div class=\"works-loop__item\" data-vimeo-id=\"276783004\"><\/div>\r\n <div class=\"works-loop__item\" data-vimeo-id=\"310875799\"><\/div>\r\n <div class=\"works-loop__item\" data-vimeo-id=\"310881669\"><\/div>\r\n <div class=\"works-loop__item\" data-vimeo-id=\"273568381\"><\/div>\r\n <div class=\"works-loop__item\" data-vimeo-id=\"405101306\"><\/div>\r\n <div class=\"works-loop__item\" data-vimeo-id=\"1154324138\"><\/div>\r\n <div class=\"works-loop__item\" data-vimeo-id=\"1161850865\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <button class=\"works-loop__arrow works-loop__arrow--next\" type=\"button\" aria-label=\"Nast\u0119pna realizacja\">\u2192<\/button>\r\n <\/div>\r\n<\/section>\r\n\r\n<section class=\"testimonials\" aria-labelledby=\"testimonials-heading\" data-testimonials>\r\n <div class=\"testimonials__header\">\r\n <p class=\"section-title\" id=\"testimonials-heading\">Rekomendacje<\/p>\r\n <\/div>\r\n\r\n <div class=\"testimonial-stage\">\r\n <button class=\"testimonial-side-arrow testimonial-side-arrow--prev\" type=\"button\" data-testimonial-prev aria-label=\"Poprzednia rekomendacja\">\u2190<\/button>\r\n\r\n <div class=\"testimonial-stage__inner\">\r\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>\r\n\r\n <div class=\"testimonial-author\">\r\n <strong data-testimonial-name>Grzegorz Witkowski<\/strong>\r\n <span data-testimonial-role>Head of Marketing @ Scalo<\/span>\r\n <\/div>\r\n\r\n <div class=\"testimonial-mobile-cue\" aria-hidden=\"true\">\r\n <span>Przesu\u0144<\/span>\r\n <span class=\"testimonial-mobile-cue__dots\" data-testimonial-dots><\/span>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <button class=\"testimonial-side-arrow testimonial-side-arrow--next\" type=\"button\" data-testimonial-next aria-label=\"Nast\u0119pna rekomendacja\">\u2192<\/button>\r\n <\/div>\r\n<\/section>\r\n\r\n<section class=\"project-contact\" aria-label=\"Formularz kontaktowy\">\r\n <div class=\"project-contact__layout\">\r\n <div class=\"project-contact__intro\">\r\n <p class=\"section-title\">Kontakt<\/p>\r\n\r\n <h2 class=\"project-contact__title\">\r\n Porozmawiajmy\r\n <span>o projekcie.<\/span>\r\n <\/h2>\r\n\r\n <p class=\"project-contact__copy\">\r\n Wybierz us\u0142ug\u0119, termin i bud\u017cet krok po kroku. Na ko\u0144cu wpiszesz dane\r\n kontaktowe, zobaczysz gotow\u0105 wiadomo\u015b\u0107 i wy\u015blesz zapytanie.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"contact-form\">\r\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\/1008#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=\"135\"\/><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\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <\/main>\r\n <\/div>\r\n\r\n<script>\r\n(function () {\r\n \"use strict\";\r\n\r\n function initWebsitesCarousel(section) {\r\n if (!section || section.dataset.carouselReady === \"true\") return;\r\n\r\n var viewport = section.querySelector(\".websites__links\");\r\n var previous = section.querySelector(\".websites__arrow--prev\");\r\n var next = section.querySelector(\".websites__arrow--next\");\r\n if (!viewport || !viewport.children.length) return;\r\n\r\n section.dataset.carouselReady = \"true\";\r\n\r\n var reducedMotion = window.matchMedia && window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\r\n var ticking = false;\r\n\r\n function gapSize() {\r\n var styles = window.getComputedStyle(viewport);\r\n return parseFloat(styles.columnGap || styles.gap || \"0\") || 0;\r\n }\r\n\r\n function stepSize() {\r\n var first = viewport.firstElementChild;\r\n return first ? first.getBoundingClientRect().width + gapSize() : viewport.clientWidth;\r\n }\r\n\r\n function maxScroll() {\r\n return Math.max(0, viewport.scrollWidth - viewport.clientWidth);\r\n }\r\n\r\n function updateButtons() {\r\n var max = maxScroll();\r\n var left = viewport.scrollLeft;\r\n var tolerance = 3;\r\n\r\n if (previous) previous.disabled = left <= tolerance;\r\n if (next) next.disabled = left >= max - tolerance;\r\n }\r\n\r\n function move(direction) {\r\n viewport.scrollBy({\r\n left: direction * stepSize(),\r\n behavior: reducedMotion ? \"auto\" : \"smooth\"\r\n });\r\n }\r\n\r\n if (previous) previous.addEventListener(\"click\", function () { move(-1); });\r\n if (next) next.addEventListener(\"click\", function () { move(1); });\r\n\r\n viewport.addEventListener(\"keydown\", function (event) {\r\n if (event.key === \"ArrowLeft\") {\r\n event.preventDefault();\r\n move(-1);\r\n } else if (event.key === \"ArrowRight\") {\r\n event.preventDefault();\r\n move(1);\r\n }\r\n });\r\n\r\n viewport.addEventListener(\"scroll\", function () {\r\n if (ticking) return;\r\n ticking = true;\r\n window.requestAnimationFrame(function () {\r\n ticking = false;\r\n updateButtons();\r\n });\r\n }, { passive: true });\r\n\r\n window.addEventListener(\"resize\", updateButtons, { passive: true });\r\n updateButtons();\r\n }\r\n\r\n function bootWebsitesCarousels() {\r\n Array.prototype.forEach.call(\r\n document.querySelectorAll(\"[data-websites-carousel]\"),\r\n initWebsitesCarousel\r\n );\r\n }\r\n\r\n if (document.readyState === \"loading\") {\r\n document.addEventListener(\"DOMContentLoaded\", bootWebsitesCarousels);\r\n } else {\r\n bootWebsitesCarousels();\r\n }\r\n}());\r\n;\r\n(function () {\r\n \"use strict\";\r\n\r\n function list(nodes) {\r\n return Array.prototype.slice.call(nodes || []);\r\n }\r\n\r\n function playerProvider(item) {\r\n if (item.getAttribute(\"data-youtube-id\")) return \"youtube\";\r\n if (item.getAttribute(\"data-vimeo-id\")) return \"vimeo\";\r\n return \"\";\r\n }\r\n\r\n function postToPlayer(iframe, method) {\r\n if (!iframe || !iframe.contentWindow) return;\r\n\r\n var provider = iframe.getAttribute(\"data-player-provider\");\r\n\r\n try {\r\n if (provider === \"youtube\") {\r\n iframe.contentWindow.postMessage(JSON.stringify({\r\n event: \"command\",\r\n func: method === \"pause\" ? \"pauseVideo\" : method,\r\n args: []\r\n }), \"https:\/\/www.youtube-nocookie.com\");\r\n } else {\r\n iframe.contentWindow.postMessage({ method: method }, \"https:\/\/player.vimeo.com\");\r\n }\r\n } catch (error) {\r\n\r\n }\r\n }\r\n\r\n function pausePlayers(section) {\r\n list(section.querySelectorAll(\"iframe\")).forEach(function (iframe) {\r\n postToPlayer(iframe, \"pause\");\r\n });\r\n }\r\n\r\n function applyMediaSizing(element) {\r\n\r\n element.style.setProperty(\"position\", \"absolute\", \"important\");\r\n element.style.setProperty(\"inset\", \"0\", \"important\");\r\n element.style.setProperty(\"display\", \"block\", \"important\");\r\n element.style.setProperty(\"width\", \"100%\", \"important\");\r\n element.style.setProperty(\"height\", \"100%\", \"important\");\r\n element.style.setProperty(\"min-width\", \"100%\", \"important\");\r\n element.style.setProperty(\"min-height\", \"100%\", \"important\");\r\n element.style.setProperty(\"max-width\", \"none\", \"important\");\r\n element.style.setProperty(\"max-height\", \"none\", \"important\");\r\n element.style.setProperty(\"margin\", \"0\", \"important\");\r\n element.style.setProperty(\"padding\", \"0\", \"important\");\r\n element.style.setProperty(\"border\", \"0\", \"important\");\r\n }\r\n\r\n function insertThumbnail(item, source, alt, status) {\r\n var image = document.createElement(\"img\");\r\n image.className = \"works-loop__thumbnail\";\r\n image.src = source;\r\n image.alt = alt || \"Miniatura realizacji wideo\";\r\n image.loading = \"lazy\";\r\n image.decoding = \"async\";\r\n\r\n applyMediaSizing(image);\r\n image.style.setProperty(\"object-fit\", \"cover\", \"important\");\r\n image.style.setProperty(\"object-position\", \"center center\", \"important\");\r\n\r\n image.addEventListener(\"load\", function () {\r\n if (status && status.parentNode) status.remove();\r\n }, { once: true });\r\n\r\n image.addEventListener(\"error\", function () {\r\n if (status) status.textContent = \"Otw\u00f3rz wideo\";\r\n }, { once: true });\r\n\r\n item.insertBefore(image, item.firstChild);\r\n }\r\n\r\n function loadVideoThumbnail(item) {\r\n var provider = playerProvider(item);\r\n var vimeoId = item.getAttribute(\"data-vimeo-id\");\r\n var youtubeId = item.getAttribute(\"data-youtube-id\");\r\n if (!provider) return;\r\n\r\n var status = document.createElement(\"span\");\r\n status.className = \"works-loop__status\";\r\n status.textContent = \"\u0141adowanie miniatury\";\r\n item.appendChild(status);\r\n\r\n if (provider === \"youtube\") {\r\n insertThumbnail(\r\n item,\r\n \"https:\/\/i.ytimg.com\/vi\/\" + encodeURIComponent(youtubeId) + \"\/hqdefault.jpg\",\r\n \"Miniatura realizacji wideo z YouTube\",\r\n status\r\n );\r\n return;\r\n }\r\n\r\n var refreshThumbnail = item.getAttribute(\"data-thumbnail-refresh\") === \"true\";\r\n var cacheBust = refreshThumbnail ? \"&cb=\" + Date.now() : \"\";\r\n var endpoint = \"https:\/\/vimeo.com\/api\/oembed.json?url=\" +\r\n encodeURIComponent(\"https:\/\/vimeo.com\/\" + vimeoId) + \"&width=960&dnt=1\" + cacheBust;\r\n\r\n fetch(endpoint, {\r\n mode: \"cors\",\r\n credentials: \"omit\",\r\n cache: refreshThumbnail ? \"no-store\" : \"default\"\r\n })\r\n .then(function (response) {\r\n if (!response.ok) throw new Error(\"Vimeo thumbnail request failed\");\r\n return response.json();\r\n })\r\n .then(function (data) {\r\n if (!data || !data.thumbnail_url) throw new Error(\"Missing Vimeo thumbnail\");\r\n\r\n var thumbnailSource = data.thumbnail_url;\r\n if (refreshThumbnail) {\r\n thumbnailSource += (thumbnailSource.indexOf(\"?\") === -1 ? \"?\" : \"&\") +\r\n \"cb=\" + Date.now();\r\n }\r\n\r\n insertThumbnail(\r\n item,\r\n thumbnailSource,\r\n data.title ? data.title : \"Miniatura realizacji wideo\",\r\n status\r\n );\r\n })\r\n .catch(function () {\r\n status.textContent = \"Otw\u00f3rz wideo\";\r\n });\r\n }\r\n\r\n function videoDirectUrl(item) {\r\n var customUrl = item.getAttribute(\"data-video-url\");\r\n var youtubeId = item.getAttribute(\"data-youtube-id\");\r\n var vimeoId = item.getAttribute(\"data-vimeo-id\");\r\n\r\n if (customUrl) {\r\n return customUrl;\r\n }\r\n\r\n if (youtubeId) {\r\n return \"https:\/\/www.youtube.com\/watch?v=\" + encodeURIComponent(youtubeId);\r\n }\r\n\r\n if (vimeoId) {\r\n return \"https:\/\/vimeo.com\/\" + encodeURIComponent(vimeoId);\r\n }\r\n\r\n return \"\";\r\n }\r\n\r\n function createVideoLink(item) {\r\n var directUrl = videoDirectUrl(item);\r\n if (!directUrl) return;\r\n\r\n var link = document.createElement(\"a\");\r\n var icon = document.createElement(\"span\");\r\n\r\n link.className = \"works-loop__play\";\r\n link.href = directUrl;\r\n link.target = \"_blank\";\r\n link.rel = \"noopener noreferrer\";\r\n link.draggable = false;\r\n link.setAttribute(\"aria-label\", \"Otw\u00f3rz wideo w nowej karcie\");\r\n\r\n icon.className = \"works-loop__play-icon\";\r\n icon.setAttribute(\"aria-hidden\", \"true\");\r\n link.appendChild(icon);\r\n\r\n item.appendChild(link);\r\n }\r\n\r\n function initWorksLoop(section) {\r\n if (!section || section.getAttribute(\"data-loop-ready\") === \"true\") return;\r\n\r\n var viewport = section.querySelector(\".works-loop__viewport\");\r\n var track = section.querySelector(\".works-loop__track\");\r\n var previous = section.querySelector(\".works-loop__arrow--prev\");\r\n var next = section.querySelector(\".works-loop__arrow--next\");\r\n if (!viewport || !track || !track.children.length) return;\r\n\r\n section.setAttribute(\"data-loop-ready\", \"true\");\r\n\r\n var items = list(track.children);\r\n var reducedMotion = window.matchMedia && window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\r\n var dragging = false;\r\n var dragStartX = 0;\r\n var dragStartScroll = 0;\r\n var suppressVideoClick = false;\r\n\r\n function gapSize() {\r\n var styles = window.getComputedStyle(track);\r\n return parseFloat(styles.columnGap || styles.gap || \"0\") || 0;\r\n }\r\n\r\n function stepSize() {\r\n var first = track.firstElementChild;\r\n return first ? first.getBoundingClientRect().width + gapSize() : viewport.clientWidth;\r\n }\r\n\r\n function nearestIndex() {\r\n var step = stepSize();\r\n if (!step) return 0;\r\n return Math.max(0, Math.min(items.length - 1, Math.round(viewport.scrollLeft \/ step)));\r\n }\r\n\r\n function move(direction, userInitiated) {\r\n var current = nearestIndex();\r\n var target = current + direction;\r\n\r\n if (target >= items.length) target = 0;\r\n if (target < 0) target = items.length - 1;\r\n\r\n pausePlayers(section);\r\n viewport.scrollTo({\r\n left: target * stepSize(),\r\n behavior: reducedMotion ? \"auto\" : \"smooth\"\r\n });\r\n\r\n }\r\n\r\n items.forEach(createVideoLink);\r\n\r\n if (\"IntersectionObserver\" in window) {\r\n var thumbnailObserver = new IntersectionObserver(function (entries, observer) {\r\n entries.forEach(function (entry) {\r\n if (!entry.isIntersecting) return;\r\n observer.unobserve(entry.target);\r\n loadVideoThumbnail(entry.target);\r\n });\r\n }, { rootMargin: \"400px 200px\", threshold: 0.01 });\r\n\r\n items.forEach(function (item) { thumbnailObserver.observe(item); });\r\n } else {\r\n items.forEach(loadVideoThumbnail);\r\n }\r\n\r\n if (previous) {\r\n previous.addEventListener(\"click\", function () {\r\n move(-1, true);\r\n });\r\n }\r\n\r\n if (next) {\r\n next.addEventListener(\"click\", function () {\r\n move(1, true);\r\n });\r\n }\r\n\r\n viewport.addEventListener(\"keydown\", function (event) {\r\n if (event.key === \"ArrowLeft\") {\r\n event.preventDefault();\r\n move(-1, true);\r\n } else if (event.key === \"ArrowRight\") {\r\n event.preventDefault();\r\n move(1, true);\r\n }\r\n });\r\n\r\n viewport.addEventListener(\"pointerdown\", function (event) {\r\n if (event.pointerType !== \"mouse\") return;\r\n\r\n dragging = true;\r\n suppressVideoClick = false;\r\n dragStartX = event.clientX;\r\n dragStartScroll = viewport.scrollLeft;\r\n\r\n });\r\n\r\n viewport.addEventListener(\"pointermove\", function (event) {\r\n if (!dragging) return;\r\n\r\n var deltaX = event.clientX - dragStartX;\r\n\r\n if (!suppressVideoClick && Math.abs(deltaX) > 6) {\r\n suppressVideoClick = true;\r\n viewport.classList.add(\"is-dragging\");\r\n\r\n if (viewport.setPointerCapture) {\r\n viewport.setPointerCapture(event.pointerId);\r\n }\r\n }\r\n\r\n if (!suppressVideoClick) return;\r\n\r\n event.preventDefault();\r\n viewport.scrollLeft = dragStartScroll - deltaX;\r\n });\r\n\r\n viewport.addEventListener(\"click\", function (event) {\r\n if (!suppressVideoClick || !event.target.closest(\".works-loop__play\")) return;\r\n event.preventDefault();\r\n suppressVideoClick = false;\r\n }, true);\r\n\r\n function endDrag(event) {\r\n if (!dragging) return;\r\n dragging = false;\r\n viewport.classList.remove(\"is-dragging\");\r\n if (viewport.hasPointerCapture && viewport.hasPointerCapture(event.pointerId)) {\r\n viewport.releasePointerCapture(event.pointerId);\r\n }\r\n }\r\n\r\n viewport.addEventListener(\"pointerup\", endDrag);\r\n viewport.addEventListener(\"pointercancel\", endDrag);\r\n\r\n document.addEventListener(\"visibilitychange\", function () {\r\n if (document.hidden) pausePlayers(section);\r\n });\r\n }\r\n\r\n function bootWorksLoops() {\r\n list(document.querySelectorAll(\"[data-works-loop]\")).forEach(initWorksLoop);\r\n }\r\n\r\n if (document.readyState === \"loading\") {\r\n document.addEventListener(\"DOMContentLoaded\", bootWorksLoops);\r\n } else {\r\n bootWorksLoops();\r\n }\r\n}());\r\n;\r\n(function () {\r\n \"use strict\";\r\n\r\n function pad(value) {\r\n return String(value).padStart(2, \"0\");\r\n }\r\n\r\n function initBuilder(root) {\r\n if (!root || root.dataset.ready === \"true\") return;\r\n\r\n const steps = Array.from(root.querySelectorAll(\".builder-step\"));\r\n const counter = root.querySelector(\".builder-counter\");\r\n const progress = root.querySelector(\".builder-progress-bar\");\r\n const previous = root.querySelector(\".builder-prev\");\r\n const next = root.querySelector(\".builder-next\");\r\n const preview = root.querySelector(\".builder-preview-text\");\r\n const cf7Form = root.closest(\".wpcf7-form\");\r\n const antirobot = root.querySelector('[name=\"antirobot\"]');\r\n const submit = cf7Form\r\n ? cf7Form.querySelector('input[type=\"submit\"], button[type=\"submit\"]')\r\n : null;\r\n let submitWrap = root.querySelector(\".builder-submit-wrap\");\r\n const actions = root.querySelector(\".builder-actions\");\r\n\r\n function normalizeActionButtons() {\r\n if (!actions || !previous || !next || !submit) return;\r\n\r\n if (!submitWrap) {\r\n submitWrap = document.createElement(\"div\");\r\n submitWrap.className = \"builder-submit-wrap\";\r\n submitWrap.appendChild(submit);\r\n }\r\n\r\n const spinner = cf7Form\r\n ? cf7Form.querySelector(\".wpcf7-spinner\")\r\n : null;\r\n const backSlot = document.createElement(\"div\");\r\n const forwardSlot = document.createElement(\"div\");\r\n\r\n backSlot.className = \"builder-action-slot builder-action-slot--back\";\r\n forwardSlot.className = \"builder-action-slot builder-action-slot--forward\";\r\n\r\n backSlot.appendChild(previous);\r\n forwardSlot.appendChild(next);\r\n forwardSlot.appendChild(submitWrap);\r\n\r\n if (spinner && !submitWrap.contains(spinner)) {\r\n submitWrap.appendChild(spinner);\r\n }\r\n\r\n actions.replaceChildren(backSlot, forwardSlot);\r\n }\r\n\r\n normalizeActionButtons();\r\n\r\n const spamGate = {\r\n honeypot: null,\r\n startedAt: null,\r\n proof: null\r\n };\r\n\r\n const fields = {\r\n projectName: root.querySelector('[name=\"project-name\"]'),\r\n extraInfo: root.querySelector('[name=\"extra-info\"]'),\r\n name: root.querySelector('[name=\"your-name\"]'),\r\n email: root.querySelector('[name=\"your-email\"]'),\r\n phone: root.querySelector('[name=\"your-phone\"]'),\r\n service: root.querySelector('[name=\"service\"]'),\r\n deadline: root.querySelector('[name=\"deadline\"]'),\r\n budget: root.querySelector('[name=\"budget\"]'),\r\n message: root.querySelector('[name=\"your-message\"]')\r\n };\r\n\r\n const state = {\r\n currentStep: 0,\r\n service: \"Fotografia\",\r\n deadline: \"Jak najszybciej\",\r\n budget: \"Do 3 000 z\u0142\"\r\n };\r\n\r\n root.dataset.ready = \"true\";\r\n\r\n function proofFor(startedAt) {\r\n return String(((startedAt * 17) + 23) % 1000003);\r\n }\r\n\r\n function ensureSpamGate() {\r\n if (!cf7Form) return;\r\n\r\n let trap = root.querySelector(\".builder-spam-trap\");\r\n\r\n if (!trap) {\r\n trap = document.createElement(\"div\");\r\n trap.className = \"builder-spam-trap\";\r\n trap.setAttribute(\"aria-hidden\", \"true\");\r\n trap.innerHTML = [\r\n '<label for=\"portfolio-company-site\">Leave this field empty<\/label>',\r\n '<input id=\"portfolio-company-site\" type=\"text\" name=\"portfolio-company-site\"',\r\n ' autocomplete=\"off\" tabindex=\"-1\" value=\"\">',\r\n '<input type=\"hidden\" name=\"portfolio-started-at\" value=\"\">',\r\n '<input type=\"hidden\" name=\"portfolio-js-proof\" value=\"\">'\r\n ].join(\"\");\r\n cf7Form.appendChild(trap);\r\n }\r\n\r\n spamGate.honeypot = trap.querySelector('[name=\"portfolio-company-site\"]');\r\n spamGate.startedAt = trap.querySelector('[name=\"portfolio-started-at\"]');\r\n spamGate.proof = trap.querySelector('[name=\"portfolio-js-proof\"]');\r\n\r\n resetSpamGate();\r\n }\r\n\r\n function resetSpamGate() {\r\n const startedAt = Math.floor(Date.now() \/ 1000);\r\n\r\n if (spamGate.honeypot) spamGate.honeypot.value = \"\";\r\n if (spamGate.startedAt) spamGate.startedAt.value = String(startedAt);\r\n if (spamGate.proof) spamGate.proof.value = proofFor(startedAt);\r\n\r\n }\r\n\r\n function combinedContent() {\r\n return [\r\n value(fields.projectName),\r\n value(fields.extraInfo),\r\n value(fields.name),\r\n value(fields.email),\r\n value(fields.phone)\r\n ].join(\" \");\r\n }\r\n\r\n function passesClientSpamChecks() {\r\n const startedAt = spamGate.startedAt\r\n ? Number(spamGate.startedAt.value || 0)\r\n : 0;\r\n const content = combinedContent();\r\n const urls = content.match(\/(?:https?:\\\/\\\/|www\\.)\/gi) || [];\r\n\r\n if (spamGate.honeypot && spamGate.honeypot.value.trim()) return false;\r\n if (!startedAt) return false;\r\n if (!spamGate.proof || spamGate.proof.value !== proofFor(startedAt)) return false;\r\n if (urls.length > 3) return false;\r\n if (\/<\\s*(?:script|iframe|a)\\b|\\[url=\/i.test(content)) return false;\r\n\r\n return true;\r\n }\r\n\r\n function value(field) {\r\n return field ? String(field.value || \"\").trim() : \"\";\r\n }\r\n\r\n function buildMessage() {\r\n return [\r\n \"Dzie\u0144 dobry,\",\r\n \"\",\r\n \"chc\u0119 porozmawia\u0107 o nowym projekcie.\",\r\n \"\",\r\n \"Us\u0142uga: \" + state.service,\r\n \"Termin: \" + state.deadline,\r\n \"Bud\u017cet: \" + state.budget,\r\n \"Marka \/ projekt: \" + (value(fields.projectName) || \"\u2014\"),\r\n \"\",\r\n \"Opis projektu:\",\r\n value(fields.extraInfo) || \"\u2014\",\r\n \"\",\r\n \"Dane kontaktowe:\",\r\n \"Imi\u0119 i nazwisko: \" + (value(fields.name) || \"\u2014\"),\r\n \"E-mail: \" + (value(fields.email) || \"\u2014\"),\r\n \"Telefon: \" + (value(fields.phone) || \"\u2014\")\r\n ].join(\"\\n\");\r\n }\r\n\r\n function syncFields() {\r\n if (fields.service) fields.service.value = state.service;\r\n if (fields.deadline) fields.deadline.value = state.deadline;\r\n if (fields.budget) fields.budget.value = state.budget;\r\n\r\n const message = buildMessage();\r\n\r\n if (fields.message) {\r\n fields.message.value = message;\r\n fields.message.dispatchEvent(new Event(\"input\", { bubbles: true }));\r\n }\r\n\r\n if (preview) preview.value = message;\r\n }\r\n\r\n function syncAntirobot() {\r\n const confirmed = !antirobot || antirobot.checked;\r\n\r\n root.classList.toggle(\r\n \"has-antirobot-confirmation\",\r\n Boolean(antirobot && antirobot.checked)\r\n );\r\n\r\n if (submit) {\r\n submit.disabled = !confirmed;\r\n submit.setAttribute(\"aria-disabled\", String(!confirmed));\r\n }\r\n }\r\n\r\n function showStep(index, shouldFocus) {\r\n state.currentStep = Math.max(0, Math.min(index, steps.length - 1));\r\n\r\n steps.forEach(function (step, stepIndex) {\r\n step.classList.toggle(\"is-active\", stepIndex === state.currentStep);\r\n });\r\n\r\n root.classList.toggle(\r\n \"is-final\",\r\n state.currentStep === steps.length - 1\r\n );\r\n\r\n if (counter) {\r\n counter.textContent =\r\n pad(state.currentStep + 1) + \" \/ \" + pad(steps.length);\r\n }\r\n\r\n if (progress) {\r\n progress.style.width =\r\n (((state.currentStep + 1) \/ steps.length) * 100) + \"%\";\r\n }\r\n\r\n if (previous) previous.disabled = state.currentStep === 0;\r\n\r\n syncFields();\r\n\r\n if (shouldFocus) {\r\n const activeStep = steps[state.currentStep];\r\n const focusTarget = activeStep &&\r\n activeStep.querySelector(\r\n \".builder-option, .builder-input, .builder-textarea\"\r\n );\r\n\r\n root.scrollIntoView({ behavior: \"smooth\", block: \"nearest\" });\r\n\r\n if (focusTarget) {\r\n window.setTimeout(function () {\r\n focusTarget.focus({ preventScroll: true });\r\n }, 180);\r\n }\r\n }\r\n }\r\n\r\n root.querySelectorAll(\".builder-option\").forEach(function (button) {\r\n button.addEventListener(\"click\", function () {\r\n const fieldName = button.dataset.field;\r\n const selectedValue = button.dataset.value;\r\n\r\n if (!fieldName || !selectedValue) return;\r\n\r\n state[fieldName] = selectedValue;\r\n\r\n root\r\n .querySelectorAll('[data-field=\"' + fieldName + '\"]')\r\n .forEach(function (option) {\r\n option.classList.toggle(\"is-active\", option === button);\r\n });\r\n\r\n syncFields();\r\n });\r\n });\r\n\r\n [\r\n fields.projectName,\r\n fields.extraInfo,\r\n fields.name,\r\n fields.email,\r\n fields.phone\r\n ].forEach(function (field) {\r\n if (!field) return;\r\n field.addEventListener(\"input\", syncFields);\r\n field.addEventListener(\"change\", syncFields);\r\n });\r\n\r\n if (previous) {\r\n previous.addEventListener(\"click\", function () {\r\n showStep(state.currentStep - 1, true);\r\n });\r\n }\r\n\r\n if (next) {\r\n next.addEventListener(\"click\", function () {\r\n showStep(state.currentStep + 1, true);\r\n });\r\n }\r\n\r\n if (cf7Form) {\r\n cf7Form.addEventListener(\"submit\", function (event) {\r\n syncFields();\r\n\r\n if (!passesClientSpamChecks()) {\r\n event.preventDefault();\r\n event.stopImmediatePropagation();\r\n }\r\n }, true);\r\n\r\n cf7Form.addEventListener(\"wpcf7invalid\", function () {\r\n showStep(steps.length - 1, true);\r\n });\r\n\r\n cf7Form.addEventListener(\"wpcf7mailsent\", function () {\r\n state.service = \"Fotografia\";\r\n state.deadline = \"Jak najszybciej\";\r\n state.budget = \"Do 3 000 z\u0142\";\r\n\r\n if (antirobot) {\r\n antirobot.checked = false;\r\n }\r\n\r\n resetSpamGate();\r\n syncAntirobot();\r\n\r\n root.querySelectorAll(\".builder-option\").forEach(function (button) {\r\n button.classList.toggle(\r\n \"is-active\",\r\n button.dataset.value === state[button.dataset.field]\r\n );\r\n });\r\n\r\n window.setTimeout(function () {\r\n showStep(0, false);\r\n }, 50);\r\n });\r\n }\r\n\r\n ensureSpamGate();\r\n\r\n if (antirobot) {\r\n antirobot.addEventListener(\"change\", syncAntirobot);\r\n }\r\n\r\n syncAntirobot();\r\n showStep(0, false);\r\n }\r\n\r\n function boot() {\r\n document\r\n .querySelectorAll(\"[data-project-builder]\")\r\n .forEach(initBuilder);\r\n }\r\n\r\n if (document.readyState === \"loading\") {\r\n document.addEventListener(\"DOMContentLoaded\", boot);\r\n } else {\r\n boot();\r\n }\r\n\r\n document.addEventListener(\"wpcf7init\", boot);\r\n }());\r\n;\r\n(function () {\r\n const mobileServices = window.matchMedia('(max-width: 720px)');\r\n const items = Array.from(document.querySelectorAll('main > .grid .service-accordion'));\r\n\r\n function openAllMobileServices() {\r\n items.forEach(function (item) {\r\n item.classList.add('is-open');\r\n const button = item.querySelector('.service-accordion__heading');\r\n if (button) button.setAttribute('aria-expanded', 'true');\r\n });\r\n }\r\n\r\n function syncServiceMode() {\r\n if (mobileServices.matches) {\r\n openAllMobileServices();\r\n } else {\r\n items.forEach(function (item) {\r\n item.classList.add('is-open');\r\n const button = item.querySelector('.service-accordion__heading');\r\n if (button) button.setAttribute('aria-expanded', 'true');\r\n });\r\n }\r\n }\r\n\r\n items.forEach(function (item) {\r\n const button = item.querySelector('.service-accordion__heading');\r\n if (!button) return;\r\n\r\n button.addEventListener('click', function () {\r\n if (!mobileServices.matches) return;\r\n const open = item.classList.toggle('is-open');\r\n button.setAttribute('aria-expanded', open ? 'true' : 'false');\r\n });\r\n });\r\n\r\n syncServiceMode();\r\n if (typeof mobileServices.addEventListener === 'function') {\r\n mobileServices.addEventListener('change', syncServiceMode);\r\n } else if (typeof mobileServices.addListener === 'function') {\r\n mobileServices.addListener(syncServiceMode);\r\n }\r\n }());\r\n;\r\n(function () {\r\n \"use strict\";\r\n\r\n const root = document.querySelector('main > .grid .clients');\r\n const marquee = root && root.querySelector('.clients__marquee');\r\n const track = marquee && marquee.querySelector('.clients__track');\r\n const firstGroup = track && track.querySelector('.clients__group');\r\n const previousButton = root && root.querySelector('.clients__arrow--prev');\r\n const nextButton = root && root.querySelector('.clients__arrow--next');\r\n const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');\r\n const mobile = window.matchMedia('(max-width: 720px)');\r\n\r\n if (!root || !marquee || !track || !firstGroup || typeof track.animate !== 'function') return;\r\n\r\n const cycleDuration = 64000;\r\n const arrowDuration = 360;\r\n let cycleWidth = 0;\r\n let motion = null;\r\n let dragging = false;\r\n let pointerId = null;\r\n let startPointerX = 0;\r\n let startAnimationTime = 0;\r\n let arrowFrame = 0;\r\n let resizeFrame = 0;\r\n\r\n function measure() {\r\n cycleWidth = firstGroup.getBoundingClientRect().width;\r\n return cycleWidth;\r\n }\r\n\r\n function currentTime() {\r\n return motion && Number.isFinite(Number(motion.currentTime)) ? Number(motion.currentTime) : 0;\r\n }\r\n\r\n function createMotion(phase) {\r\n measure();\r\n if (!cycleWidth) return;\r\n\r\n if (motion) motion.cancel();\r\n\r\n motion = track.animate(\r\n [\r\n { transform: 'translate3d(0px, 0, 0)' },\r\n { transform: 'translate3d(' + (-cycleWidth) + 'px, 0, 0)' }\r\n ],\r\n {\r\n duration: cycleDuration,\r\n iterations: Infinity,\r\n easing: 'linear',\r\n fill: 'both'\r\n }\r\n );\r\n\r\n motion.currentTime = Math.max(0, Math.min(1, phase || 0)) * cycleDuration;\r\n\r\n if (reducedMotion.matches) {\r\n motion.pause();\r\n } else {\r\n motion.play();\r\n }\r\n }\r\n\r\n function pixelsToTime(px) {\r\n return cycleWidth ? (px \/ cycleWidth) * cycleDuration : 0;\r\n }\r\n\r\n function getStep() {\r\n const logos = firstGroup.querySelectorAll('.clients__logo');\r\n if (logos.length > 1) {\r\n return Math.abs(logos[1].getBoundingClientRect().left - logos[0].getBoundingClientRect().left);\r\n }\r\n return Math.max(140, marquee.clientWidth * 0.28);\r\n }\r\n\r\n function stopArrowTween() {\r\n if (arrowFrame) cancelAnimationFrame(arrowFrame);\r\n arrowFrame = 0;\r\n }\r\n\r\n function resumeMotion() {\r\n if (motion && !reducedMotion.matches && !dragging) motion.play();\r\n }\r\n\r\n function move(direction) {\r\n if (!motion || reducedMotion.matches) return;\r\n\r\n stopArrowTween();\r\n measure();\r\n if (!cycleWidth) return;\r\n\r\n motion.pause();\r\n\r\n const stepTime = pixelsToTime(getStep());\r\n let from = currentTime();\r\n\r\n \/* Keep previous-arrow movement positive so WAAPI never clamps at time 0. *\/\r\n if (direction < 0 && from < stepTime) {\r\n from += cycleDuration;\r\n motion.currentTime = from;\r\n }\r\n\r\n const to = from + (direction * stepTime);\r\n const started = performance.now();\r\n\r\n function tween(now) {\r\n const p = Math.min(1, (now - started) \/ arrowDuration);\r\n const eased = 1 - Math.pow(1 - p, 3);\r\n motion.currentTime = from + ((to - from) * eased);\r\n\r\n if (p < 1) {\r\n arrowFrame = requestAnimationFrame(tween);\r\n } else {\r\n arrowFrame = 0;\r\n resumeMotion();\r\n }\r\n }\r\n\r\n arrowFrame = requestAnimationFrame(tween);\r\n }\r\n\r\n if (previousButton) {\r\n previousButton.addEventListener('click', function () {\r\n move(-1);\r\n });\r\n }\r\n\r\n if (nextButton) {\r\n nextButton.addEventListener('click', function () {\r\n move(1);\r\n });\r\n }\r\n\r\n marquee.addEventListener('pointerdown', function (event) {\r\n if (!mobile.matches || event.pointerType === 'mouse' || !motion) return;\r\n\r\n stopArrowTween();\r\n dragging = true;\r\n pointerId = event.pointerId;\r\n startPointerX = event.clientX;\r\n startAnimationTime = currentTime();\r\n motion.pause();\r\n marquee.classList.add('is-dragging');\r\n\r\n if (typeof marquee.setPointerCapture === 'function') {\r\n marquee.setPointerCapture(pointerId);\r\n }\r\n });\r\n\r\n marquee.addEventListener('pointermove', function (event) {\r\n if (!dragging || event.pointerId !== pointerId || !motion) return;\r\n\r\n const dx = event.clientX - startPointerX;\r\n let nextTime = startAnimationTime - pixelsToTime(dx);\r\n\r\n if (nextTime < 0) {\r\n nextTime += Math.ceil(Math.abs(nextTime) \/ cycleDuration) * cycleDuration;\r\n }\r\n\r\n motion.currentTime = nextTime;\r\n });\r\n\r\n function releasePointer(event) {\r\n if (!dragging || (event && event.pointerId !== pointerId)) return;\r\n\r\n dragging = false;\r\n marquee.classList.remove('is-dragging');\r\n\r\n if (pointerId !== null && typeof marquee.releasePointerCapture === 'function') {\r\n try { marquee.releasePointerCapture(pointerId); } catch (error) {}\r\n }\r\n\r\n pointerId = null;\r\n resumeMotion();\r\n }\r\n\r\n marquee.addEventListener('pointerup', releasePointer);\r\n marquee.addEventListener('pointercancel', releasePointer);\r\n\r\n window.addEventListener('resize', function () {\r\n if (resizeFrame) cancelAnimationFrame(resizeFrame);\r\n resizeFrame = requestAnimationFrame(function () {\r\n resizeFrame = 0;\r\n const phase = ((currentTime() % cycleDuration) + cycleDuration) % cycleDuration \/ cycleDuration;\r\n createMotion(phase);\r\n });\r\n }, { passive: true });\r\n\r\n function syncMotionPreference() {\r\n if (!motion) return;\r\n\r\n if (reducedMotion.matches) {\r\n stopArrowTween();\r\n dragging = false;\r\n pointerId = null;\r\n marquee.classList.remove('is-dragging');\r\n motion.currentTime = 0;\r\n motion.pause();\r\n } else {\r\n motion.play();\r\n }\r\n }\r\n\r\n if (typeof reducedMotion.addEventListener === 'function') {\r\n reducedMotion.addEventListener('change', syncMotionPreference);\r\n } else if (typeof reducedMotion.addListener === 'function') {\r\n reducedMotion.addListener(syncMotionPreference);\r\n }\r\n\r\n root.classList.add('is-logo-carousel-enhanced');\r\n createMotion(0);\r\n}());\r\n(function () {\r\n \"use strict\";\r\n\r\n var root = document.querySelector(\"[data-testimonials]\");\r\n if (!root || root.dataset.ready === \"true\") return;\r\n root.dataset.ready = \"true\";\r\n\r\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.\"}];\r\n var stage = root.querySelector(\".testimonial-stage\");\r\n var quote = root.querySelector(\"[data-testimonial-quote]\");\r\n var name = root.querySelector(\"[data-testimonial-name]\");\r\n var role = root.querySelector(\"[data-testimonial-role]\");\r\n var previousButton = root.querySelector(\"[data-testimonial-prev]\");\r\n var nextButton = root.querySelector(\"[data-testimonial-next]\");\r\n var dots = root.querySelector(\"[data-testimonial-dots]\");\r\n\r\n var active = 0;\r\n var changingTimer = null;\r\n var autoplayTimer = null;\r\n var autoplayDelay = 6500;\r\n var pointerId = null;\r\n var startX = 0;\r\n var startY = 0;\r\n var paused = false;\r\n var reducedMotion = window.matchMedia && window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\r\n\r\n function updateDots() {\r\n if (!dots) return;\r\n\r\n Array.prototype.forEach.call(dots.children, function (dot, index) {\r\n dot.classList.toggle(\"is-active\", index === active);\r\n });\r\n }\r\n\r\n function buildDots() {\r\n if (!dots) return;\r\n\r\n dots.innerHTML = \"\";\r\n reviews.forEach(function (_, index) {\r\n var dot = document.createElement(\"span\");\r\n dot.className = \"testimonial-mobile-cue__dot\" + (index === active ? \" is-active\" : \"\");\r\n dots.appendChild(dot);\r\n });\r\n }\r\n\r\n function applyReview(index) {\r\n active = (index + reviews.length) % reviews.length;\r\n var review = reviews[active];\r\n\r\n quote.textContent = review.quote;\r\n name.textContent = review.name;\r\n role.textContent = review.role;\r\n updateDots();\r\n\r\n }\r\n\r\n function render(index) {\r\n clearTimeout(changingTimer);\r\n\r\n if (reducedMotion) {\r\n applyReview(index);\r\n return;\r\n }\r\n\r\n stage.classList.add(\"is-changing\");\r\n\r\n changingTimer = setTimeout(function () {\r\n applyReview(index);\r\n\r\n requestAnimationFrame(function () {\r\n stage.classList.remove(\"is-changing\");\r\n });\r\n }, 120);\r\n }\r\n\r\n function stopAutoplay() {\r\n clearInterval(autoplayTimer);\r\n autoplayTimer = null;\r\n }\r\n\r\n function startAutoplay() {\r\n if (reducedMotion || paused || reviews.length < 2) return;\r\n\r\n stopAutoplay();\r\n autoplayTimer = setInterval(function () {\r\n render(active + 1);\r\n }, autoplayDelay);\r\n }\r\n\r\n function restartAutoplay() {\r\n stopAutoplay();\r\n startAutoplay();\r\n }\r\n\r\n if (previousButton) {\r\n previousButton.addEventListener(\"click\", function () {\r\n render(active - 1);\r\n restartAutoplay();\r\n });\r\n }\r\n\r\n if (nextButton) {\r\n nextButton.addEventListener(\"click\", function () {\r\n render(active + 1);\r\n restartAutoplay();\r\n });\r\n }\r\n\r\n root.addEventListener(\"keydown\", function (event) {\r\n if (event.key === \"ArrowLeft\") {\r\n event.preventDefault();\r\n render(active - 1);\r\n restartAutoplay();\r\n } else if (event.key === \"ArrowRight\") {\r\n event.preventDefault();\r\n render(active + 1);\r\n restartAutoplay();\r\n }\r\n });\r\n\r\n stage.addEventListener(\"pointerdown\", function (event) {\r\n if (event.pointerType === \"mouse\") return;\r\n\r\n paused = true;\r\n stopAutoplay();\r\n\r\n pointerId = event.pointerId;\r\n startX = event.clientX;\r\n startY = event.clientY;\r\n\r\n if (stage.setPointerCapture) {\r\n stage.setPointerCapture(pointerId);\r\n }\r\n });\r\n\r\n stage.addEventListener(\"pointerup\", function (event) {\r\n if (pointerId === null || event.pointerId !== pointerId) return;\r\n\r\n var dx = event.clientX - startX;\r\n var dy = event.clientY - startY;\r\n\r\n pointerId = null;\r\n paused = false;\r\n\r\n if (Math.abs(dx) > 44 && Math.abs(dx) > Math.abs(dy)) {\r\n render(active + (dx < 0 ? 1 : -1));\r\n }\r\n\r\n startAutoplay();\r\n });\r\n\r\n stage.addEventListener(\"pointercancel\", function () {\r\n pointerId = null;\r\n paused = false;\r\n startAutoplay();\r\n });\r\n\r\n root.addEventListener(\"mouseenter\", function () {\r\n paused = true;\r\n stopAutoplay();\r\n });\r\n\r\n root.addEventListener(\"mouseleave\", function () {\r\n paused = false;\r\n startAutoplay();\r\n });\r\n\r\n root.addEventListener(\"focusin\", function () {\r\n paused = true;\r\n stopAutoplay();\r\n });\r\n\r\n root.addEventListener(\"focusout\", function (event) {\r\n if (!root.contains(event.relatedTarget)) {\r\n paused = false;\r\n startAutoplay();\r\n }\r\n });\r\n\r\n document.addEventListener(\"visibilitychange\", function () {\r\n if (document.hidden) {\r\n stopAutoplay();\r\n } else {\r\n startAutoplay();\r\n }\r\n });\r\n\r\n buildDots();\r\n applyReview(0);\r\n startAutoplay();\r\n}());\r\n lockLetterSlots();\r\n\r\n var slotResizeTimer;\r\n window.addEventListener(\"resize\", function() {\r\n clearTimeout(slotResizeTimer);\r\n slotResizeTimer = setTimeout(lockLetterSlots, 160);\r\n });\r\n\r\n<\/script>\r\n\r\n<script>\r\n(function () {\r\n \"use strict\";\r\n\r\n var title = document.querySelector(\"[data-construction-title]\");\r\n if (!title) return;\r\n\r\n var letters = Array.prototype.slice.call(\r\n title.querySelectorAll(\".construction-letter\")\r\n );\r\n if (!letters.length) return;\r\n\r\n var reducedMotion = window.matchMedia &&\r\n window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\r\n\r\n var finePointer = window.matchMedia &&\r\n window.matchMedia(\"(hover: hover) and (pointer: fine)\").matches;\r\n\r\n var active = false;\r\n var sequenceToken = 0;\r\n var touchResetTimer = null;\r\n\r\n \/* Intentionally varied collage. The first entries use local\/system fonts,\r\n so the effect is visible immediately even before web fonts load. *\/\r\n var fontPool = [\r\n { family: 'Impact, \"Arial Black\", fantasy', weight: \"400\", style: \"normal\" },\r\n { family: '\"Times New Roman\", Times, serif', weight: \"400\", style: \"italic\" },\r\n { family: '\"Courier New\", Courier, monospace', weight: \"700\", style: \"normal\" },\r\n { family: 'Verdana, Geneva, sans-serif', weight: \"400\", style: \"normal\" },\r\n { family: 'Georgia, \"Times New Roman\", serif', weight: \"700\", style: \"normal\" },\r\n { family: '\"Trebuchet MS\", Arial, sans-serif', weight: \"400\", style: \"italic\" },\r\n { family: '\"Arial Narrow\", \"Helvetica Neue\", Arial, sans-serif', weight: \"700\", style: \"normal\" },\r\n { family: '\"Abril Fatface\", Georgia, serif', weight: \"400\", style: \"normal\" },\r\n { family: '\"Anton\", Impact, \"Arial Black\", sans-serif', weight: \"400\", style: \"normal\" },\r\n { family: '\"Bebas Neue\", Impact, \"Arial Narrow\", sans-serif', weight: \"400\", style: \"normal\" },\r\n { family: '\"Cormorant Garamond\", Georgia, serif', weight: \"700\", style: \"italic\" },\r\n { family: '\"DM Serif Display\", Georgia, serif', weight: \"400\", style: \"italic\" },\r\n { family: '\"Playfair Display\", Georgia, serif', weight: \"700\", style: \"normal\" },\r\n { family: '\"UnifrakturMaguntia\", fantasy', weight: \"400\", style: \"normal\" },\r\n { family: '\"Roboto Mono\", \"Courier New\", monospace', weight: \"700\", style: \"normal\" }\r\n ];\r\n\r\n var collageOrder = [0, 1, 2, 3, 5, 6, 13, 4, 8, 10, 9, 11, 14, 7, 12];\r\n\r\n var baseRoman = {\r\n family: 'Georgia, \"Times New Roman\", Times, serif',\r\n weight: \"400\",\r\n style: \"normal\"\r\n };\r\n\r\n var baseItalic = {\r\n family: 'Georgia, \"Times New Roman\", Times, serif',\r\n weight: \"400\",\r\n style: \"italic\"\r\n };\r\n\r\n function applyFont(face, spec) {\r\n face.style.setProperty(\"font-family\", spec.family, \"important\");\r\n face.style.setProperty(\"font-weight\", spec.weight, \"important\");\r\n face.style.setProperty(\"font-style\", spec.style, \"important\");\r\n face.style.setProperty(\"letter-spacing\", \"0\", \"important\");\r\n }\r\n\r\n function buildLetter(letter) {\r\n var char = letter.textContent;\r\n var isItalic = !!letter.closest(\".construction-word--italic\");\r\n var base = isItalic ? baseItalic : baseRoman;\r\n\r\n letter.textContent = \"\";\r\n letter.dataset.char = char;\r\n letter.dataset.baseItalic = isItalic ? \"1\" : \"0\";\r\n\r\n var measure = document.createElement(\"span\");\r\n measure.className = \"construction-letter__measure\";\r\n measure.textContent = char;\r\n measure.style.setProperty(\"font-style\", base.style, \"important\");\r\n\r\n var face = document.createElement(\"i\");\r\n face.className = \"construction-letter__face\";\r\n face.setAttribute(\"aria-hidden\", \"true\");\r\n face.textContent = char;\r\n applyFont(face, base);\r\n\r\n letter.appendChild(measure);\r\n letter.appendChild(face);\r\n }\r\n\r\n function baseSpec(letter) {\r\n return letter.dataset.baseItalic === \"1\" ? baseItalic : baseRoman;\r\n }\r\n\r\n function setNormal(letter) {\r\n var face = letter.querySelector(\".construction-letter__face\");\r\n if (!face) return;\r\n\r\n applyFont(face, baseSpec(letter));\r\n letter.style.setProperty(\"--letter-x\", \"0em\");\r\n letter.style.setProperty(\"--letter-y\", \"0em\");\r\n letter.style.setProperty(\"--letter-r\", \"0deg\");\r\n }\r\n\r\n function setCollage(letter, index) {\r\n var face = letter.querySelector(\".construction-letter__face\");\r\n if (!face) return;\r\n\r\n var spec = fontPool[collageOrder[index % collageOrder.length]];\r\n applyFont(face, spec);\r\n\r\n \/* Movement remains translate + rotate only. *\/\r\n var direction = index % 2 === 0 ? -1 : 1;\r\n var yPattern = [-0.10, 0.07, -0.035, 0.115, -0.065, 0.04];\r\n var xPattern = [0.000, 0.010, -0.006, 0.014, -0.010];\r\n\r\n var y = yPattern[index % yPattern.length];\r\n var x = xPattern[index % xPattern.length];\r\n var r = direction * (1.4 + (index % 4) * 0.95);\r\n\r\n letter.style.setProperty(\"--letter-x\", x.toFixed(3) + \"em\");\r\n letter.style.setProperty(\"--letter-y\", y.toFixed(3) + \"em\");\r\n letter.style.setProperty(\"--letter-r\", r.toFixed(2) + \"deg\");\r\n }\r\n\r\n function strike(letter, callback) {\r\n if (reducedMotion) {\r\n callback();\r\n return;\r\n }\r\n\r\n letter.classList.remove(\"is-typing\");\r\n void letter.offsetWidth;\r\n letter.classList.add(\"is-typing\");\r\n\r\n window.setTimeout(function () {\r\n callback();\r\n\r\n window.setTimeout(function () {\r\n letter.classList.remove(\"is-typing\");\r\n }, 82);\r\n }, 54);\r\n }\r\n\r\n function typeIn(onComplete) {\r\n active = true;\r\n sequenceToken += 1;\r\n var token = sequenceToken;\r\n\r\n letters.forEach(function (letter, index) {\r\n window.setTimeout(function () {\r\n if (!active || token !== sequenceToken) return;\r\n\r\n strike(letter, function () {\r\n setCollage(letter, index);\r\n });\r\n }, index * 58);\r\n });\r\n\r\n window.setTimeout(function () {\r\n if (active && token === sequenceToken && typeof onComplete === \"function\") {\r\n onComplete();\r\n }\r\n }, Math.max(0, (letters.length - 1) * 58) + 170);\r\n }\r\n\r\n function typeOut(onComplete) {\r\n active = false;\r\n sequenceToken += 1;\r\n var token = sequenceToken;\r\n\r\n letters.slice().reverse().forEach(function (letter, reverseIndex) {\r\n window.setTimeout(function () {\r\n if (token !== sequenceToken) return;\r\n\r\n strike(letter, function () {\r\n setNormal(letter);\r\n });\r\n }, reverseIndex * 34);\r\n });\r\n\r\n window.setTimeout(function () {\r\n if (token === sequenceToken && typeof onComplete === \"function\") {\r\n onComplete();\r\n }\r\n }, Math.max(0, (letters.length - 1) * 34) + 170);\r\n }\r\n\r\n function setHoveredLetter(letter, index, transformed) {\r\n var hoverToken = (parseInt(letter.dataset.hoverToken || \"0\", 10) + 1);\r\n letter.dataset.hoverToken = String(hoverToken);\r\n\r\n strike(letter, function () {\r\n if (String(hoverToken) !== letter.dataset.hoverToken) return;\r\n if (transformed) {\r\n setCollage(letter, index);\r\n } else {\r\n setNormal(letter);\r\n }\r\n });\r\n }\r\n\r\n \/* Build stable base-font slots, then stay completely normal initially. *\/\r\n letters.forEach(function (letter) {\r\n buildLetter(letter);\r\n setNormal(letter);\r\n });\r\n\r\n var introComplete = false;\r\n\r\n if (finePointer) {\r\n \/* After the automatic intro, desktop interaction is per-letter only:\r\n the glyph under the cursor uses the same collage font assigned to it\r\n in the full animation, and returns to the base face on mouseleave. *\/\r\n letters.forEach(function (letter, index) {\r\n letter.addEventListener(\"mouseenter\", function () {\r\n if (!introComplete) return;\r\n setHoveredLetter(letter, index, true);\r\n });\r\n\r\n letter.addEventListener(\"mouseleave\", function () {\r\n if (!introComplete) return;\r\n setHoveredLetter(letter, index, false);\r\n });\r\n });\r\n } else {\r\n \/* Touch keeps the existing whole-title tap interaction after the intro. *\/\r\n title.addEventListener(\"click\", function () {\r\n if (!introComplete) return;\r\n\r\n window.clearTimeout(touchResetTimer);\r\n\r\n if (active) {\r\n typeOut();\r\n return;\r\n }\r\n\r\n typeIn();\r\n\r\n touchResetTimer = window.setTimeout(function () {\r\n if (active) typeOut();\r\n }, 4200);\r\n });\r\n }\r\n\r\n \/* Automatic opening sequence: start after 0.5 s, show the current\r\n collage-font state, then restore the original title. Only after that\r\n do desktop per-letter hover interactions become active. *\/\r\n window.setTimeout(function () {\r\n typeIn(function () {\r\n window.setTimeout(function () {\r\n typeOut(function () {\r\n introComplete = true;\r\n\r\n if (finePointer) {\r\n letters.forEach(function (letter, index) {\r\n if (letter.matches && letter.matches(\":hover\")) {\r\n setHoveredLetter(letter, index, true);\r\n }\r\n });\r\n }\r\n });\r\n }, 650);\r\n });\r\n }, 500);\r\n\r\n document.addEventListener(\"visibilitychange\", function () {\r\n if (document.hidden && active) {\r\n window.clearTimeout(touchResetTimer);\r\n typeOut(function () {\r\n if (!introComplete) introComplete = true;\r\n });\r\n }\r\n });\r\n}());\r\n<\/script>\r\n\r\n<\/body>\r\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>Strona w przebudowie Strona w przebudowie Do tego czasu mo\u017cesz znale\u017a\u0107 mnie tutaj: Us\u0142ugi Video Filmy promocyjne, social media, relacje z event\u00f3w, wywiady i animacje dopasowane do marki oraz kana\u0142u komunikacji. Web design Strony i landing page\u2019e z naciskiem na prost\u0105 struktur\u0119, estetyk\u0119, responsywno\u015b\u0107 i wygodn\u0105 obs\u0142ug\u0119. Content day Zdj\u0119cia, video i inne formaty publikacji w jednym procesie. Zapas tre\u015bci na ca\u0142y miesi\u0105c w jeden dzie\u0144 zdj\u0119ciowy. Fotografia Sesje wizerunkowe, produktowe i eventowe, od koncepcji po gotowe zdj\u0119cia do kampanii, stron i social media. Design Kompletna identyfikacja wizualna, projekty logo, prezentacje, strony internetowe, materia\u0142y do social media, kampanii i komunikacji firmowej. Marketing Koncepcje kampanii, social media, content i komunikacja, zaplanowane wok\u00f3\u0142 konkretnych cel\u00f3w biznesowych. Consulting Konsultacje kreatywne i strategiczne pomagaj\u0105ce uporz\u0105dkowa\u0107 mark\u0119, komunikacj\u0119 i dalsze dzia\u0142ania. AI content Obrazy produktowe, mockupy, workflow i tre\u015bci wspierane AI. Wybrani klienci \u2190 \u2192 Bazaar Bazaar Wybrane strony internetowe \u2190 \u2192 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 \u2014 projekt strony Amber Org, obecnie w trakcie realizacji. Wybrane realizacje \u2190 \u2192 Rekomendacje \u2190 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 \u2192 Kontakt Porozmawiajmy o projekcie. Wybierz us\u0142ug\u0119, termin i bud\u017cet krok po kroku. Na ko\u0144cu wpiszesz dane kontaktowe, zobaczysz gotow\u0105 wiadomo\u015b\u0107 i wy\u015blesz zapytanie.<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-1008","page","type-page","status-publish","hentry"],"_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\/1008","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=1008"}],"version-history":[{"count":325,"href":"https:\/\/michalplebaniak.com\/en\/wp-json\/wp\/v2\/pages\/1008\/revisions"}],"predecessor-version":[{"id":2845,"href":"https:\/\/michalplebaniak.com\/en\/wp-json\/wp\/v2\/pages\/1008\/revisions\/2845"}],"wp:attachment":[{"href":"https:\/\/michalplebaniak.com\/en\/wp-json\/wp\/v2\/media?parent=1008"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\n \r\n \r\n Strona w przebudowie<\/title>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin \/>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600&display=swap\" rel=\"stylesheet\" media=\"print\" onload=\"this.media='all'\" \/>\r\n <noscript><link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600&display=swap\" rel=\"stylesheet\" \/><\/noscript>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Abril+Fatface&family=Anton&family=Bebas+Neue&family=Cormorant+Garamond:ital,wght@0,400;0,700;1,400;1,700&family=DM+Serif+Display:ital@0;1&family=Oswald:wght@300;700&family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=Roboto+Mono:wght@400;700&family=UnifrakturMaguntia&display=swap\" rel=\"stylesheet\" \/>\r\n\r\n<style>\r\n* {\r\n box-sizing: border-box;\r\n }\r\n\r\n :root {\r\n --bg: #f6f6f6;\r\n --text: #111;\r\n --muted: #77736c;\r\n --soft: #aaa49a;\r\n --line: rgba(17, 17, 17, .12);\r\n\r\n --serif: Georgia, \"Times New Roman\", Times, serif;\r\n --sans: -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", Arial, sans-serif;\r\n --inter: \"Inter\", -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", Arial, sans-serif;\r\n\r\n --page-x: clamp(20px, 4vw, 48px);\r\n --main-top: clamp(72px, 10vw, 140px);\r\n --main-bottom: clamp(72px, 9vw, 120px);\r\n\r\n --logo-box-width: 116px;\r\n --logo-box-height: 38px;\r\n --logo-gap: clamp(24px, 3.4vw, 48px);\r\n --logo-gray: #96918a;\r\n }\r\n\r\n html {\r\n min-height: 100%;\r\n background: var(--bg);\r\n }\r\n\r\n body {\r\n margin: 0;\r\n min-height: 100svh;\r\n background: var(--bg);\r\n color: var(--text);\r\n font-family: var(--sans);\r\n overflow-x: hidden;\r\n -webkit-font-smoothing: antialiased;\r\n text-rendering: geometricPrecision;\r\n }\r\n\r\n a {\r\n color: inherit;\r\n }\r\n\r\n .page {\r\n min-height: 100svh;\r\n display: grid;\r\n grid-template-rows: 1fr;\r\n }\r\n\r\n main {\r\n width: min(calc(100% - (var(--page-x) * 2)), 1320px);\r\n margin: 0 auto;\r\n align-self: start;\r\n padding: var(--main-top) 0 var(--main-bottom);\r\n }\r\n\r\n .grid {\r\n display: grid;\r\n grid-template-columns: minmax(260px, 430px) minmax(500px, 620px);\r\n justify-content: space-between;\r\n gap: clamp(80px, 14vw, 220px);\r\n align-items: start;\r\n }\r\n\r\n .grid > *,\r\n .hero,\r\n .info,\r\n .services,\r\n .clients {\r\n min-width: 0;\r\n }\r\n\r\n .hero {\r\n padding-right: 0;\r\n max-width: 430px;\r\n }\r\n\r\n h1 {\r\n margin: 0;\r\n font-family: var(--serif);\r\n font-size: clamp(42px, 6.2vw, 88px);\r\n line-height: .98;\r\n font-weight: 400;\r\n letter-spacing: -.075em;\r\n }\r\n\r\n h1 span {\r\n display: block;\r\n font-style: italic;\r\n letter-spacing: -.085em;\r\n }\r\n\r\n .contact {\r\n width: min(100%, 320px);\r\n margin-top: clamp(38px, 5vw, 64px);\r\n padding-top: clamp(18px, 2.4vw, 28px);\r\n }\r\n\r\n .intro {\r\n margin: 0 0 26px;\r\n color: var(--muted);\r\n font-size: clamp(13px, 1.1vw, 14px);\r\n line-height: 1.68;\r\n letter-spacing: -.01em;\r\n }\r\n\r\n .socials {\r\n display: flex;\r\n align-items: center;\r\n gap: 18px;\r\n }\r\n\r\n .social-link {\r\n width: 22px;\r\n height: 22px;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: var(--muted);\r\n text-decoration: none;\r\n transition:\r\n color .18s ease,\r\n transform .18s ease;\r\n }\r\n\r\n .social-link:hover {\r\n color: var(--text);\r\n transform: translateY(-1px);\r\n }\r\n\r\n .social-link svg {\r\n width: 17px;\r\n height: 17px;\r\n display: block;\r\n fill: currentColor;\r\n }\r\n\r\n .info {\r\n align-self: start;\r\n justify-self: end;\r\n width: min(100%, 620px);\r\n overflow: hidden;\r\n }\r\n\r\n .panel {\r\n padding-top: clamp(18px, 2.4vw, 28px);\r\n }\r\n\r\n .section-title {\r\n margin: 0 0 24px;\r\n color: var(--soft);\r\n font-size: 9px;\r\n font-weight: 400;\r\n line-height: 1.4;\r\n letter-spacing: .14em;\r\n text-align: left;\r\n text-transform: uppercase;\r\n }\r\n\r\n .services__list {\r\n margin: 0;\r\n padding: 0;\r\n list-style: none;\r\n display: grid;\r\n grid-template-columns: repeat(3, minmax(0, 1fr));\r\n column-gap: clamp(22px, 2.8vw, 40px);\r\n row-gap: clamp(24px, 2.6vw, 34px);\r\n }\r\n\r\n .service {\r\n display: grid;\r\n grid-template-columns: 24px 1fr;\r\n gap: 12px;\r\n align-items: baseline;\r\n color: var(--text);\r\n font-family: var(--sans);\r\n font-size: clamp(14px, 1.05vw, 16px);\r\n line-height: 1.28;\r\n font-weight: 400;\r\n letter-spacing: -.035em;\r\n transition:\r\n color .18s ease,\r\n transform .18s ease;\r\n }\r\n\r\n .service::before {\r\n content: attr(data-no);\r\n color: var(--soft);\r\n font-size: 10px;\r\n font-weight: 500;\r\n line-height: 1.3;\r\n letter-spacing: .08em;\r\n }\r\n\r\n .service:hover {\r\n color: #000;\r\n transform: translateX(4px);\r\n }\r\n\r\n .clients {\r\n width: 100%;\r\n margin-top: clamp(56px, 6vw, 84px);\r\n padding: 28px 0 0;\r\n overflow: hidden;\r\n border-top: 1px solid var(--line);\r\n background: transparent;\r\n }\r\n\r\n .clients__label {\r\n margin: 0 0 24px;\r\n color: var(--soft);\r\n font-size: 9px;\r\n font-weight: 400;\r\n line-height: 1.4;\r\n letter-spacing: .14em;\r\n text-align: left;\r\n text-transform: uppercase;\r\n }\r\n\r\n .clients__marquee {\r\n width: 100%;\r\n overflow: hidden;\r\n -webkit-mask-image: none;\r\n mask-image: none;\r\n }\r\n\r\n .clients__track {\r\n display: flex;\r\n width: max-content;\r\n max-width: none;\r\n animation: logoScroll 64s linear infinite;\r\n will-change: transform;\r\n transform: translate3d(0, 0, 0);\r\n }\r\n\r\n .clients__group {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--logo-gap);\r\n padding-right: var(--logo-gap);\r\n }\r\n\r\n .clients__logo {\r\n width: var(--logo-box-width);\r\n height: var(--logo-box-height);\r\n min-width: var(--logo-box-width);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: var(--logo-gray);\r\n background: transparent;\r\n }\r\n\r\n .clients__logo img,\r\n .clients__logo svg {\r\n display: block;\r\n width: var(--logo-w, 92px);\r\n height: var(--logo-h, 26px);\r\n max-width: 100%;\r\n max-height: 100%;\r\n object-fit: contain;\r\n background: transparent;\r\n opacity: .52;\r\n transform: none;\r\n transition: none;\r\n }\r\n\r\n .clients__logo img {\r\n filter: grayscale(1) saturate(0) brightness(.78) contrast(.9);\r\n }\r\n\r\n .clients__logo svg {\r\n color: var(--logo-gray);\r\n }\r\n\r\n .clients__logo--blend img {\r\n mix-blend-mode: multiply;\r\n }\r\n\r\n .clients__text-logo {\r\n width: var(--logo-w, 92px);\r\n height: var(--logo-h, 26px);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: currentColor;\r\n opacity: .52;\r\n text-align: center;\r\n white-space: nowrap;\r\n }\r\n\r\n .clients__logo--playboy {\r\n --logo-w: 48px;\r\n --logo-h: 25px;\r\n }\r\n\r\n .clients__logo--esquire {\r\n --logo-w: 84px;\r\n --logo-h: 23px;\r\n }\r\n\r\n .clients__logo--cosmo {\r\n --logo-w: 96px;\r\n --logo-h: 23px;\r\n }\r\n\r\n .clients__logo--arp {\r\n width: 142px;\r\n min-width: 142px;\r\n --logo-w: 132px;\r\n --logo-h: 38px;\r\n }\r\n\r\n .clients__logo--pes {\r\n width: 150px;\r\n min-width: 150px;\r\n --logo-w: 140px;\r\n --logo-h: 38px;\r\n }\r\n\r\n .clients__logo--pes .clients__text-logo {\r\n white-space: normal;\r\n font-size: 11px;\r\n font-weight: 600;\r\n line-height: 1.15;\r\n letter-spacing: .01em;\r\n text-transform: uppercase;\r\n }\r\n\r\n .clients__logo--nck {\r\n width: 154px;\r\n min-width: 154px;\r\n height: 48px;\r\n --logo-w: 146px;\r\n --logo-h: 44px;\r\n }\r\n\r\n .clients__logo--nck svg {\r\n overflow: visible;\r\n }\r\n\r\n .nck-mark,\r\n .nck-text {\r\n fill: currentColor;\r\n }\r\n\r\n .clients__logo--bit {\r\n --logo-w: 84px;\r\n --logo-h: 25px;\r\n }\r\n\r\n .clients__logo--btt {\r\n width: 138px;\r\n min-width: 138px;\r\n --logo-w: 128px;\r\n --logo-h: 38px;\r\n }\r\n\r\n .clients__logo--sans {\r\n --logo-w: 98px;\r\n --logo-h: 27px;\r\n }\r\n\r\n .clients__logo--crosscore {\r\n --logo-w: 78px;\r\n --logo-h: 31px;\r\n }\r\n\r\n .clients__logo--crosscore img {\r\n filter: grayscale(1) saturate(0) brightness(.68) contrast(.9);\r\n opacity: .58;\r\n }\r\n\r\n .clients__logo--agora {\r\n --logo-w: 84px;\r\n --logo-h: 25px;\r\n }\r\n\r\n .clients__logo--bok {\r\n width: 118px;\r\n min-width: 118px;\r\n --logo-w: 108px;\r\n --logo-h: 34px;\r\n }\r\n\r\n .clients__logo--medicover {\r\n width: 124px;\r\n min-width: 124px;\r\n --logo-w: 112px;\r\n --logo-h: 32px;\r\n }\r\n\r\n .clients__logo--bazaar {\r\n --logo-w: 118px;\r\n --logo-h: 26px;\r\n }\r\n\r\n .clients__logo--bazaar .clients__text-logo {\r\n font-family: var(--serif);\r\n font-size: 17px;\r\n font-weight: 400;\r\n line-height: 1.25;\r\n letter-spacing: .02em;\r\n text-transform: uppercase;\r\n }\r\n\r\n .project-contact {\r\n width: 100%;\r\n margin-top: clamp(64px, 8vw, 112px);\r\n padding-top: 30px;\r\n border-top: 1px solid var(--line);\r\n }\r\n\r\n .project-contact__layout {\r\n display: grid;\r\n grid-template-columns: repeat(2, minmax(0, 1fr));\r\n gap: clamp(48px, 9vw, 140px);\r\n align-items: start;\r\n }\r\n\r\n .project-contact__intro {\r\n min-width: 0;\r\n max-width: 520px;\r\n }\r\n\r\n .project-contact__intro .section-title {\r\n margin-bottom: 24px;\r\n }\r\n\r\n .project-contact__title {\r\n margin: 0;\r\n font-family: var(--serif);\r\n font-size: clamp(38px, 5.2vw, 76px);\r\n font-weight: 400;\r\n line-height: .98;\r\n letter-spacing: -.07em;\r\n }\r\n\r\n .project-contact__title span {\r\n display: block;\r\n font-style: italic;\r\n letter-spacing: -.08em;\r\n }\r\n\r\n .project-contact__copy {\r\n max-width: 420px;\r\n margin: 24px 0 0;\r\n color: var(--muted);\r\n font-size: clamp(13px, 1.05vw, 14px);\r\n line-height: 1.68;\r\n letter-spacing: -.01em;\r\n }\r\n\r\n .contact-form {\r\n min-width: 0;\r\n width: 100%;\r\n border-top: 1px solid var(--text);\r\n padding-top: 18px;\r\n }\r\n\r\n .contact-form .wpcf7,\r\n .contact-form .wpcf7-form {\r\n width: 100%;\r\n margin: 0;\r\n }\r\n\r\n .contact-form .wpcf7-form > p:empty,\r\n .contact-form .message-builder > p:empty {\r\n display: none;\r\n }\r\n\r\n .message-builder {\r\n width: 100%;\r\n padding: clamp(16px, 2.2vw, 22px);\r\n border: 1px solid var(--line);\r\n border-radius: 24px;\r\n background: var(--bg);\r\n display: grid;\r\n gap: 18px;\r\n }\r\n\r\n .builder-head {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n gap: 18px;\r\n padding-bottom: 14px;\r\n border-bottom: 1px solid var(--line);\r\n color: var(--muted);\r\n font-size: 9px;\r\n line-height: 1.4;\r\n letter-spacing: .14em;\r\n text-transform: uppercase;\r\n }\r\n\r\n .builder-counter {\r\n flex: 0 0 auto;\r\n font-variant-numeric: tabular-nums;\r\n }\r\n\r\n .builder-progress {\r\n width: 100%;\r\n height: 1px;\r\n overflow: hidden;\r\n background: var(--line);\r\n }\r\n\r\n .builder-progress-bar {\r\n display: block;\r\n width: 20%;\r\n height: 100%;\r\n background: var(--text);\r\n transition: width .22s ease;\r\n }\r\n\r\n .builder-step {\r\n display: none;\r\n gap: 12px;\r\n }\r\n\r\n .builder-step.is-active {\r\n display: grid;\r\n }\r\n\r\n .builder-label {\r\n color: var(--muted);\r\n font-size: 9px;\r\n line-height: 1.4;\r\n letter-spacing: .14em;\r\n text-transform: uppercase;\r\n }\r\n\r\n .builder-hint {\r\n margin: -2px 0 2px;\r\n color: var(--soft);\r\n font-size: 11px;\r\n line-height: 1.5;\r\n }\r\n\r\n .builder-options {\r\n display: grid;\r\n gap: 8px;\r\n }\r\n\r\n .builder-option,\r\n .builder-nav,\r\n .builder-submit,\r\n .contact-form .wpcf7-submit {\r\n appearance: none;\r\n -webkit-appearance: none;\r\n outline: none;\r\n box-shadow: none;\r\n text-decoration: none;\r\n }\r\n\r\n .builder-option,\r\n .builder-nav {\r\n width: 100%;\r\n min-height: 44px;\r\n border: 1px solid var(--line);\r\n border-radius: 999px;\r\n background: transparent;\r\n color: var(--text);\r\n padding: 11px 16px;\r\n font-family: var(--sans);\r\n font-size: 10px;\r\n line-height: 1.25;\r\n letter-spacing: .08em;\r\n text-align: center;\r\n text-transform: uppercase;\r\n cursor: pointer;\r\n transition:\r\n background-color .16s ease,\r\n border-color .16s ease,\r\n color .16s ease,\r\n opacity .16s ease;\r\n }\r\n\r\n .builder-option:hover,\r\n .builder-option:focus-visible,\r\n .builder-option.is-active,\r\n .builder-nav:hover,\r\n .builder-nav:focus-visible {\r\n border-color: var(--text);\r\n background: var(--text);\r\n color: var(--bg);\r\n }\r\n\r\n .builder-fields {\r\n display: grid;\r\n gap: 16px;\r\n }\r\n\r\n .builder-field {\r\n display: grid;\r\n gap: 7px;\r\n margin: 0;\r\n }\r\n\r\n .builder-field .wpcf7-form-control-wrap {\r\n display: block;\r\n width: 100%;\r\n }\r\n\r\n .builder-input,\r\n .builder-textarea,\r\n .builder-preview-text {\r\n width: 100%;\r\n margin: 0;\r\n padding: 11px 0;\r\n border: 0;\r\n border-bottom: 1px solid var(--line);\r\n border-radius: 0;\r\n outline: 0;\r\n background: transparent;\r\n color: var(--text);\r\n font-family: var(--sans);\r\n font-size: 13px;\r\n font-weight: 400;\r\n line-height: 1.5;\r\n letter-spacing: 0;\r\n box-shadow: none;\r\n appearance: none;\r\n -webkit-appearance: none;\r\n transition: border-color .16s ease;\r\n }\r\n\r\n .builder-input:focus,\r\n .builder-textarea:focus,\r\n .builder-preview-text:focus {\r\n border-bottom-color: var(--text);\r\n }\r\n\r\n .builder-input::placeholder,\r\n .builder-textarea::placeholder {\r\n color: var(--soft);\r\n opacity: 1;\r\n }\r\n\r\n .builder-textarea {\r\n min-height: 112px;\r\n resize: vertical;\r\n }\r\n\r\n .builder-preview {\r\n display: grid;\r\n gap: 10px;\r\n padding-top: 14px;\r\n border-top: 1px solid var(--line);\r\n }\r\n\r\n .builder-preview-text {\r\n min-height: 190px;\r\n resize: vertical;\r\n color: var(--muted);\r\n font-size: 12px;\r\n line-height: 1.58;\r\n }\r\n\r\n .builder-final-note {\r\n color: var(--muted);\r\n font-size: 10px;\r\n line-height: 1.5;\r\n }\r\n\r\n .builder-antirobot {\r\n min-height: 44px;\r\n padding: 10px 12px;\r\n border: 1px solid var(--line);\r\n border-radius: 14px;\r\n background: transparent;\r\n transition:\r\n border-color .16s ease,\r\n background-color .16s ease;\r\n }\r\n\r\n .builder-antirobot .wpcf7-form-control-wrap,\r\n .builder-antirobot .wpcf7-form-control,\r\n .builder-antirobot .wpcf7-list-item {\r\n display: block;\r\n width: 100%;\r\n margin: 0;\r\n }\r\n\r\n .builder-antirobot label {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n width: 100%;\r\n color: var(--text);\r\n font-size: 11px;\r\n line-height: 1.4;\r\n cursor: pointer;\r\n }\r\n\r\n .builder-antirobot input[type=\"checkbox\"] {\r\n width: 18px;\r\n height: 18px;\r\n flex: 0 0 18px;\r\n margin: 0;\r\n accent-color: var(--text);\r\n cursor: pointer;\r\n }\r\n\r\n .message-builder.has-antirobot-confirmation .builder-antirobot {\r\n border-color: var(--text);\r\n }\r\n\r\n .builder-antirobot .wpcf7-not-valid-tip {\r\n margin-top: 7px;\r\n }\r\n\r\n .builder-hidden-fields {\r\n display: none !important;\r\n }\r\n\r\n .builder-captcha {\r\n min-height: 0;\r\n overflow: hidden;\r\n }\r\n\r\n .builder-captcha .cf-turnstile,\r\n .builder-captcha .wpcf7-turnstile,\r\n .builder-captcha [data-sitekey],\r\n .builder-captcha iframe {\r\n max-width: 100%;\r\n }\r\n\r\n .builder-actions {\r\n display: grid;\r\n grid-template-columns: repeat(2, minmax(0, 1fr));\r\n gap: 8px;\r\n padding-top: 14px;\r\n border-top: 1px solid var(--line);\r\n }\r\n\r\n .builder-actions > p,\r\n .builder-submit-wrap > p {\r\n display: contents;\r\n margin: 0;\r\n }\r\n\r\n .builder-prev:disabled {\r\n opacity: .28;\r\n pointer-events: none;\r\n }\r\n\r\n .builder-submit-wrap {\r\n display: none;\r\n min-width: 0;\r\n }\r\n\r\n .message-builder.is-final .builder-next {\r\n display: none;\r\n }\r\n\r\n .message-builder.is-final .builder-submit-wrap {\r\n display: block;\r\n }\r\n\r\n .contact-form .wpcf7-submit {\r\n width: 100%;\r\n min-height: 44px;\r\n margin: 0;\r\n padding: 11px 16px;\r\n border: 1px solid var(--text);\r\n border-radius: 999px;\r\n background: var(--text);\r\n color: var(--bg);\r\n font-family: var(--sans);\r\n font-size: 10px;\r\n line-height: 1.25;\r\n letter-spacing: .08em;\r\n text-transform: uppercase;\r\n cursor: pointer;\r\n transition:\r\n background-color .16s ease,\r\n border-color .16s ease,\r\n color .16s ease,\r\n opacity .16s ease;\r\n }\r\n\r\n .contact-form .wpcf7-submit:hover,\r\n .contact-form .wpcf7-submit:focus-visible {\r\n background: transparent;\r\n color: var(--text);\r\n }\r\n\r\n .contact-form .wpcf7-submit:disabled {\r\n cursor: wait;\r\n opacity: .48;\r\n }\r\n\r\n .contact-form .wpcf7-spinner {\r\n position: absolute;\r\n margin: 12px 0 0 12px;\r\n }\r\n\r\n .contact-form .wpcf7-not-valid-tip {\r\n margin-top: 6px;\r\n color: #8b3f35;\r\n font-size: 10px;\r\n line-height: 1.45;\r\n }\r\n\r\n .contact-form .wpcf7 form .wpcf7-response-output {\r\n margin: 10px 0 0;\r\n padding: 11px 13px;\r\n border: 1px solid var(--line);\r\n border-radius: 14px;\r\n color: var(--muted);\r\n font-size: 10px;\r\n line-height: 1.5;\r\n }\r\n\r\n @media (max-width: 760px) {\r\n .project-contact__layout {\r\n grid-template-columns: 1fr;\r\n gap: 46px;\r\n }\r\n\r\n .project-contact__intro {\r\n max-width: 620px;\r\n margin: 0 auto;\r\n text-align: center;\r\n }\r\n\r\n .project-contact__intro .section-title {\r\n text-align: center;\r\n }\r\n\r\n .project-contact__copy {\r\n margin-right: auto;\r\n margin-left: auto;\r\n }\r\n\r\n .contact-form {\r\n max-width: 620px;\r\n margin: 0 auto;\r\n }\r\n }\r\n\r\n @media (max-width: 520px) {\r\n .project-contact {\r\n margin-top: 52px;\r\n padding-top: 24px;\r\n }\r\n\r\n .message-builder {\r\n padding: 14px;\r\n border-radius: 20px;\r\n }\r\n\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n .builder-progress-bar,\r\n .builder-option,\r\n .builder-nav,\r\n .contact-form .wpcf7-submit {\r\n transition: none;\r\n }\r\n }\r\n\r\n .builder-spam-trap {\r\n position: absolute !important;\r\n left: -10000px !important;\r\n top: auto !important;\r\n width: 1px !important;\r\n height: 1px !important;\r\n overflow: hidden !important;\r\n opacity: 0 !important;\r\n pointer-events: none !important;\r\n }\r\n\r\n .contact-form .message-builder {\r\n min-height: 0 !important;\r\n padding: 14px !important;\r\n gap: 12px !important;\r\n }\r\n\r\n .contact-form .builder-head {\r\n padding-bottom: 10px !important;\r\n }\r\n\r\n .contact-form .builder-progress {\r\n margin: 0 !important;\r\n }\r\n\r\n .contact-form .builder-step,\r\n .contact-form .builder-step.is-active,\r\n .contact-form .builder-fields,\r\n .contact-form .builder-field {\r\n min-height: 0 !important;\r\n height: auto !important;\r\n }\r\n\r\n .contact-form .builder-step.is-active {\r\n gap: 9px !important;\r\n align-content: start !important;\r\n }\r\n\r\n .contact-form .builder-fields {\r\n display: grid !important;\r\n gap: 10px !important;\r\n align-items: start !important;\r\n }\r\n\r\n .contact-form .builder-step[data-step=\"4\"] .builder-fields {\r\n grid-template-columns: 1fr !important;\r\n }\r\n\r\n .contact-form .builder-step[data-step=\"5\"] .builder-fields {\r\n grid-template-columns: repeat(3, minmax(0, 1fr)) !important;\r\n }\r\n\r\n .contact-form .builder-field {\r\n display: grid !important;\r\n align-content: start !important;\r\n gap: 5px !important;\r\n margin: 0 !important;\r\n padding: 0 !important;\r\n }\r\n\r\n .contact-form .builder-field br,\r\n .contact-form .builder-actions br,\r\n .contact-form .builder-forward-wrap br,\r\n .contact-form .builder-submit-wrap br {\r\n display: none !important;\r\n }\r\n\r\n .contact-form .builder-input {\r\n width: 100% !important;\r\n height: 40px !important;\r\n min-height: 40px !important;\r\n max-height: 40px !important;\r\n margin: 0 !important;\r\n padding: 7px 0 !important;\r\n line-height: 1.3 !important;\r\n }\r\n\r\n .contact-form .builder-textarea {\r\n width: 100% !important;\r\n height: 76px !important;\r\n min-height: 76px !important;\r\n max-height: 120px !important;\r\n margin: 0 !important;\r\n padding: 7px 0 !important;\r\n line-height: 1.4 !important;\r\n resize: vertical !important;\r\n }\r\n\r\n .contact-form .builder-preview {\r\n gap: 6px !important;\r\n padding-top: 10px !important;\r\n }\r\n\r\n .contact-form .builder-preview-text {\r\n width: 100% !important;\r\n height: 104px !important;\r\n min-height: 104px !important;\r\n max-height: 104px !important;\r\n margin: 0 !important;\r\n padding: 7px 0 !important;\r\n line-height: 1.4 !important;\r\n resize: none !important;\r\n }\r\n\r\n .contact-form .builder-final-note {\r\n margin: 0 !important;\r\n }\r\n\r\n .contact-form .builder-antirobot,\r\n .contact-form .builder-captcha {\r\n margin: 0 !important;\r\n }\r\n\r\n .contact-form .builder-actions {\r\n display: grid !important;\r\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\r\n gap: 8px !important;\r\n align-items: stretch !important;\r\n margin: 0 !important;\r\n padding-top: 10px !important;\r\n }\r\n\r\n .contact-form .builder-forward-wrap {\r\n display: block !important;\r\n min-width: 0 !important;\r\n width: 100% !important;\r\n margin: 0 !important;\r\n padding: 0 !important;\r\n }\r\n\r\n .contact-form .builder-nav,\r\n .contact-form .builder-submit-wrap,\r\n .contact-form .wpcf7-submit {\r\n width: 100% !important;\r\n min-width: 0 !important;\r\n margin: 0 !important;\r\n }\r\n\r\n .contact-form .builder-nav,\r\n .contact-form .wpcf7-submit {\r\n min-height: 40px !important;\r\n height: 40px !important;\r\n padding: 8px 12px !important;\r\n }\r\n\r\n .contact-form .builder-submit-wrap {\r\n display: none !important;\r\n }\r\n\r\n .contact-form .message-builder.is-final .builder-next {\r\n display: none !important;\r\n }\r\n\r\n .contact-form .message-builder.is-final .builder-submit-wrap {\r\n display: block !important;\r\n }\r\n\r\n .contact-form .wpcf7-spinner {\r\n position: absolute !important;\r\n margin: 9px 0 0 8px !important;\r\n }\r\n\r\n @media (max-width: 760px) {\r\n .project-contact__layout {\r\n grid-template-columns: 1fr !important;\r\n gap: 34px !important;\r\n }\r\n\r\n .contact-form .builder-step[data-step=\"4\"] .builder-fields,\r\n .contact-form .builder-step[data-step=\"5\"] .builder-fields {\r\n grid-template-columns: 1fr !important;\r\n }\r\n }\r\n\r\n @media (max-width: 420px) {\r\n .contact-form .message-builder {\r\n padding: 12px !important;\r\n }\r\n\r\n .contact-form .builder-actions {\r\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\r\n gap: 6px !important;\r\n }\r\n\r\n .contact-form .builder-nav,\r\n .contact-form .wpcf7-submit {\r\n min-height: 38px !important;\r\n height: 38px !important;\r\n padding: 7px 8px !important;\r\n font-size: 9px !important;\r\n }\r\n }\r\n\r\n .contact-form .builder-options,\r\n .contact-form .builder-step[data-step=\"1\"] .builder-options,\r\n .contact-form .builder-step[data-step=\"2\"] .builder-options,\r\n .contact-form .builder-step[data-step=\"3\"] .builder-options {\r\n display: grid !important;\r\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\r\n column-gap: 16px !important;\r\n row-gap: 14px !important;\r\n width: 100% !important;\r\n }\r\n\r\n .contact-form .builder-option,\r\n .contact-form .builder-step[data-step=\"1\"] .builder-option,\r\n .contact-form .builder-step[data-step=\"2\"] .builder-option,\r\n .contact-form .builder-step[data-step=\"3\"] .builder-option {\r\n width: 100% !important;\r\n min-width: 0 !important;\r\n min-height: 46px !important;\r\n height: auto !important;\r\n padding: 10px 12px !important;\r\n white-space: normal !important;\r\n overflow-wrap: anywhere !important;\r\n line-height: 1.25 !important;\r\n }\r\n\r\n .contact-form .builder-actions {\r\n display: grid !important;\r\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\r\n gap: 10px !important;\r\n }\r\n\r\n @media (max-width: 520px) {\r\n .contact-form .builder-options,\r\n .contact-form .builder-step[data-step=\"1\"] .builder-options,\r\n .contact-form .builder-step[data-step=\"2\"] .builder-options,\r\n .contact-form .builder-step[data-step=\"3\"] .builder-options {\r\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\r\n column-gap: 8px !important;\r\n row-gap: 8px !important;\r\n }\r\n\r\n .contact-form .builder-option,\r\n .contact-form .builder-step[data-step=\"1\"] .builder-option,\r\n .contact-form .builder-step[data-step=\"2\"] .builder-option,\r\n .contact-form .builder-step[data-step=\"3\"] .builder-option {\r\n min-height: 42px !important;\r\n padding: 8px 6px !important;\r\n font-size: 8.5px !important;\r\n letter-spacing: .05em !important;\r\n }\r\n\r\n .contact-form .builder-actions {\r\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\r\n gap: 8px !important;\r\n }\r\n }\r\n\r\n body .contact-form .builder-options,\r\n body .contact-form .builder-step[data-step=\"1\"] .builder-options,\r\n body .contact-form .builder-step[data-step=\"2\"] .builder-options,\r\n body .contact-form .builder-step[data-step=\"3\"] .builder-options {\r\n display: grid !important;\r\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\r\n grid-auto-flow: row !important;\r\n column-gap: 18px !important;\r\n row-gap: 16px !important;\r\n width: 100% !important;\r\n min-width: 0 !important;\r\n margin: 0 !important;\r\n padding: 0 !important;\r\n }\r\n\r\n body .contact-form .builder-options > p,\r\n body .contact-form .builder-options > span,\r\n body .contact-form .builder-options > div:not(.builder-option),\r\n body .contact-form .builder-options .wpcf7-form-control-wrap {\r\n display: contents !important;\r\n margin: 0 !important;\r\n padding: 0 !important;\r\n }\r\n\r\n body .contact-form .builder-options br,\r\n body .contact-form .builder-options > p > br,\r\n body .contact-form .builder-options > span > br {\r\n display: none !important;\r\n }\r\n\r\n body .contact-form .builder-options .builder-option,\r\n body .contact-form .builder-step[data-step=\"1\"] .builder-option,\r\n body .contact-form .builder-step[data-step=\"2\"] .builder-option,\r\n body .contact-form .builder-step[data-step=\"3\"] .builder-option {\r\n display: flex !important;\r\n grid-column: auto !important;\r\n width: 100% !important;\r\n min-width: 0 !important;\r\n max-width: none !important;\r\n min-height: 46px !important;\r\n height: auto !important;\r\n align-items: center !important;\r\n justify-content: center !important;\r\n margin: 0 !important;\r\n padding: 10px 12px !important;\r\n white-space: normal !important;\r\n overflow-wrap: anywhere !important;\r\n line-height: 1.25 !important;\r\n }\r\n\r\n body .contact-form .builder-actions {\r\n display: grid !important;\r\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\r\n column-gap: 12px !important;\r\n width: 100% !important;\r\n }\r\n\r\n body .contact-form .builder-actions > p,\r\n body .contact-form .builder-actions > span,\r\n body .contact-form .builder-forward-wrap {\r\n min-width: 0 !important;\r\n width: 100% !important;\r\n margin: 0 !important;\r\n }\r\n\r\n @media (max-width: 520px) {\r\n body .contact-form .builder-options,\r\n body .contact-form .builder-step[data-step=\"1\"] .builder-options,\r\n body .contact-form .builder-step[data-step=\"2\"] .builder-options,\r\n body .contact-form .builder-step[data-step=\"3\"] .builder-options {\r\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\r\n column-gap: 10px !important;\r\n row-gap: 10px !important;\r\n }\r\n\r\n body .contact-form .builder-options .builder-option,\r\n body .contact-form .builder-step[data-step=\"1\"] .builder-option,\r\n body .contact-form .builder-step[data-step=\"2\"] .builder-option,\r\n body .contact-form .builder-step[data-step=\"3\"] .builder-option {\r\n min-height: 42px !important;\r\n padding: 8px 6px !important;\r\n font-size: 8.5px !important;\r\n letter-spacing: .045em !important;\r\n }\r\n\r\n body .contact-form .builder-actions {\r\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\r\n column-gap: 8px !important;\r\n }\r\n }\r\n\r\n @keyframes logoScroll {\r\n from {\r\n transform: translate3d(0, 0, 0);\r\n }\r\n\r\n to {\r\n transform: translate3d(-50%, 0, 0);\r\n }\r\n }\r\n\r\n @media (max-width: 1100px) {\r\n :root {\r\n --main-top: clamp(66px, 9vw, 104px);\r\n }\r\n\r\n .grid {\r\n grid-template-columns: minmax(240px, 380px) minmax(430px, 540px);\r\n gap: clamp(64px, 9vw, 120px);\r\n }\r\n\r\n .hero {\r\n max-width: 380px;\r\n }\r\n\r\n .info {\r\n width: min(100%, 540px);\r\n }\r\n }\r\n\r\n @media (max-width: 900px) {\r\n .grid {\r\n grid-template-columns: 1fr;\r\n justify-items: center;\r\n gap: 0;\r\n text-align: center;\r\n }\r\n\r\n .hero {\r\n width: 100%;\r\n max-width: 620px;\r\n padding-right: 0;\r\n }\r\n\r\n .contact {\r\n margin-right: auto;\r\n margin-left: auto;\r\n }\r\n\r\n .socials {\r\n justify-content: center;\r\n }\r\n\r\n .info {\r\n justify-self: center;\r\n width: 100%;\r\n max-width: 620px;\r\n margin-top: clamp(52px, 8vw, 72px);\r\n }\r\n\r\n .services {\r\n width: 100%;\r\n max-width: 620px;\r\n margin-right: auto;\r\n margin-left: auto;\r\n }\r\n\r\n .services__list {\r\n max-width: 620px;\r\n margin-right: auto;\r\n margin-left: auto;\r\n justify-items: center;\r\n }\r\n\r\n .section-title {\r\n text-align: center;\r\n }\r\n\r\n .service {\r\n display: inline-grid;\r\n grid-template-columns: auto auto;\r\n justify-content: center;\r\n gap: 12px;\r\n text-align: center;\r\n }\r\n\r\n .service:hover {\r\n transform: none;\r\n }\r\n\r\n .clients {\r\n margin-top: clamp(48px, 9vw, 68px);\r\n padding-top: 26px;\r\n }\r\n\r\n .clients__label {\r\n margin-bottom: 24px;\r\n text-align: center;\r\n }\r\n }\r\n\r\n @media (max-width: 720px) {\r\n :root {\r\n --page-x: 24px;\r\n --main-top: clamp(58px, 12vw, 84px);\r\n --main-bottom: clamp(60px, 12vw, 88px);\r\n }\r\n\r\n h1 {\r\n font-size: clamp(44px, 13vw, 72px);\r\n line-height: 1;\r\n }\r\n\r\n .contact {\r\n margin-top: clamp(34px, 9vw, 52px);\r\n padding-top: 18px;\r\n }\r\n\r\n .intro {\r\n margin-left: auto;\r\n margin-right: auto;\r\n margin-bottom: 24px;\r\n line-height: 1.65;\r\n }\r\n\r\n .info {\r\n width: 100%;\r\n max-width: 100%;\r\n margin-top: clamp(58px, 12vw, 82px);\r\n overflow: hidden;\r\n }\r\n\r\n .section-title {\r\n margin-bottom: 24px;\r\n }\r\n\r\n .services__list {\r\n display: grid;\r\n width: 100%;\r\n max-width: 360px;\r\n margin-right: auto;\r\n margin-left: auto;\r\n grid-template-columns: 1fr 1fr;\r\n column-gap: 22px;\r\n row-gap: 24px;\r\n justify-items: start;\r\n }\r\n\r\n .service {\r\n display: grid;\r\n grid-template-columns: 18px 1fr;\r\n width: 100%;\r\n gap: 8px;\r\n font-size: clamp(12px, 3.4vw, 14px);\r\n line-height: 1.32;\r\n letter-spacing: -.02em;\r\n text-align: left;\r\n }\r\n\r\n .service::before {\r\n font-size: 8px;\r\n line-height: 1.4;\r\n }\r\n\r\n .clients {\r\n width: 100%;\r\n max-width: 100%;\r\n margin-top: 46px;\r\n padding-top: 26px;\r\n overflow: hidden;\r\n }\r\n\r\n .clients__label {\r\n margin-bottom: 24px;\r\n text-align: center;\r\n }\r\n\r\n .clients__track {\r\n max-width: none;\r\n }\r\n }\r\n\r\n @media (max-width: 720px) {\r\n .contact-form {\r\n margin-top: 46px;\r\n padding-top: 26px;\r\n }\r\n\r\n .contact-form__intro {\r\n margin-right: auto;\r\n margin-left: auto;\r\n text-align: center;\r\n }\r\n }\r\n\r\n @media (max-width: 520px) {\r\n :root {\r\n --page-x: 18px;\r\n --logo-box-width: 90px;\r\n --logo-box-height: 34px;\r\n --logo-gap: 18px;\r\n }\r\n\r\n main {\r\n padding-top: 56px;\r\n }\r\n\r\n h1 {\r\n font-size: clamp(42px, 14vw, 62px);\r\n line-height: 1;\r\n letter-spacing: -.065em;\r\n }\r\n\r\n h1 span {\r\n letter-spacing: -.075em;\r\n }\r\n\r\n .contact,\r\n .panel {\r\n padding-top: 16px;\r\n }\r\n\r\n .contact {\r\n margin-top: 34px;\r\n }\r\n\r\n .intro {\r\n margin-bottom: 24px;\r\n }\r\n\r\n .services__list {\r\n max-width: 330px;\r\n column-gap: 20px;\r\n row-gap: 22px;\r\n }\r\n\r\n .service {\r\n grid-template-columns: 16px 1fr;\r\n gap: 7px;\r\n font-size: clamp(11.5px, 3.35vw, 13px);\r\n line-height: 1.34;\r\n }\r\n\r\n .clients {\r\n margin-top: 44px;\r\n padding-top: 24px;\r\n }\r\n\r\n .clients__track {\r\n animation-duration: 52s;\r\n }\r\n\r\n .clients__logo--playboy {\r\n --logo-w: 42px;\r\n --logo-h: 23px;\r\n }\r\n\r\n .clients__logo--esquire {\r\n --logo-w: 70px;\r\n --logo-h: 21px;\r\n }\r\n\r\n .clients__logo--cosmo,\r\n .clients__logo--sans,\r\n\r\n .clients__logo--arp {\r\n width: 112px;\r\n min-width: 112px;\r\n --logo-w: 104px;\r\n --logo-h: 31px;\r\n }\r\n\r\n .clients__logo--pes {\r\n width: 118px;\r\n min-width: 118px;\r\n --logo-w: 110px;\r\n --logo-h: 32px;\r\n }\r\n\r\n .clients__logo--pes .clients__text-logo {\r\n font-size: 9px;\r\n }\r\n\r\n .clients__logo--nck {\r\n width: 126px;\r\n min-width: 126px;\r\n height: 42px;\r\n --logo-w: 120px;\r\n --logo-h: 38px;\r\n }\r\n\r\n .clients__logo--crosscore {\r\n --logo-w: 64px;\r\n --logo-h: 27px;\r\n }\r\n\r\n .clients__logo--agora,\r\n .clients__logo--bit {\r\n --logo-w: 70px;\r\n --logo-h: 21px;\r\n }\r\n\r\n .clients__logo--btt {\r\n width: 112px;\r\n min-width: 112px;\r\n --logo-w: 104px;\r\n --logo-h: 31px;\r\n }\r\n\r\n .clients__logo--bok {\r\n width: 96px;\r\n min-width: 96px;\r\n --logo-w: 88px;\r\n --logo-h: 28px;\r\n }\r\n\r\n .clients__logo--medicover {\r\n width: 98px;\r\n min-width: 98px;\r\n --logo-w: 88px;\r\n --logo-h: 26px;\r\n }\r\n\r\n .clients__logo--bazaar {\r\n --logo-w: 92px;\r\n --logo-h: 22px;\r\n }\r\n\r\n .clients__logo--bazaar .clients__text-logo {\r\n font-size: 13px;\r\n }\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n .clients__marquee {\r\n -webkit-mask-image: none;\r\n mask-image: none;\r\n }\r\n\r\n .clients__track {\r\n animation: none;\r\n width: 100%;\r\n transform: none;\r\n }\r\n\r\n .clients__group {\r\n width: 100%;\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n row-gap: 24px;\r\n padding: 0 20px;\r\n }\r\n\r\n .clients__group[aria-hidden=\"true\"] {\r\n display: none;\r\n }\r\n\r\n .social-link,\r\n .service {\r\n transition: none;\r\n }\r\n }\r\n\r\n @media (min-width: 1200px) {\r\n main {\r\n width: 100vw;\r\n max-width: none;\r\n margin: 0;\r\n padding: var(--main-top) clamp(24px, 2.5vw, 48px) var(--main-bottom);\r\n }\r\n\r\n .grid {\r\n width: 100%;\r\n grid-template-columns: 430px 620px;\r\n justify-content: space-between;\r\n gap: 0;\r\n }\r\n\r\n .hero {\r\n max-width: 430px;\r\n justify-self: start;\r\n }\r\n\r\n .info {\r\n width: 620px;\r\n justify-self: end;\r\n }\r\n\r\n h1 {\r\n font-size: clamp(64px, 6.2vw, 96px);\r\n line-height: .96;\r\n }\r\n\r\n .contact {\r\n width: min(100%, 320px);\r\n }\r\n }\r\n\r\nbody .contact-form .builder-actions {\r\n display: grid !important;\r\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\r\n align-items: stretch !important;\r\n gap: 10px !important;\r\n}\r\n\r\nbody .contact-form .builder-action-slot {\r\n display: flex !important;\r\n width: 100% !important;\r\n min-width: 0 !important;\r\n height: 100% !important;\r\n margin: 0 !important;\r\n padding: 0 !important;\r\n align-items: stretch !important;\r\n}\r\n\r\nbody .contact-form .builder-action-slot--forward {\r\n position: relative !important;\r\n}\r\n\r\nbody .contact-form .builder-action-slot .builder-nav,\r\nbody .contact-form .builder-action-slot .builder-submit-wrap,\r\nbody .contact-form .builder-action-slot .wpcf7-submit {\r\n width: 100% !important;\r\n min-width: 0 !important;\r\n margin: 0 !important;\r\n}\r\n\r\nbody .contact-form .builder-action-slot .builder-nav,\r\nbody .contact-form .builder-action-slot .wpcf7-submit {\r\n display: inline-flex !important;\r\n height: 40px !important;\r\n min-height: 40px !important;\r\n padding: 8px 12px !important;\r\n align-items: center !important;\r\n justify-content: center !important;\r\n line-height: 1 !important;\r\n}\r\n\r\nbody .contact-form .builder-submit-wrap {\r\n position: relative !important;\r\n height: 40px !important;\r\n}\r\n\r\nbody .contact-form .builder-submit-wrap > p {\r\n display: contents !important;\r\n}\r\n\r\nbody .contact-form .builder-submit-wrap .wpcf7-spinner {\r\n position: absolute !important;\r\n top: 50% !important;\r\n right: 12px !important;\r\n left: auto !important;\r\n margin: 0 !important;\r\n transform: translateY(-50%) !important;\r\n pointer-events: none !important;\r\n}\r\n\r\nbody .contact-form .message-builder:not(.is-final) .builder-submit-wrap {\r\n display: none !important;\r\n}\r\n\r\nbody .contact-form .message-builder.is-final .builder-next {\r\n display: none !important;\r\n}\r\n\r\nbody .contact-form .message-builder.is-final .builder-submit-wrap {\r\n display: block !important;\r\n}\r\n\r\n@media (max-width: 420px) {\r\n body .contact-form .builder-actions {\r\n gap: 8px !important;\r\n }\r\n\r\n body .contact-form .builder-action-slot .builder-nav,\r\n body .contact-form .builder-action-slot .wpcf7-submit,\r\n body .contact-form .builder-submit-wrap {\r\n height: 38px !important;\r\n min-height: 38px !important;\r\n }\r\n}\r\n\r\n.works-loop {\r\n width: 100%;\r\n margin-top: clamp(56px, 7vw, 96px);\r\n padding-top: 24px;\r\n border-top: 1px solid var(--line);\r\n overflow: hidden;\r\n}\r\n\r\n.works-loop__header {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 20px;\r\n margin-bottom: 20px;\r\n}\r\n\r\n.works-loop__header .section-title {\r\n margin: 0;\r\n}\r\n\r\n.works-loop__controls {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n}\r\n\r\n.works-loop__arrow {\r\n appearance: none;\r\n -webkit-appearance: none;\r\n width: 42px;\r\n height: 42px;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n border: 1px solid var(--line);\r\n border-radius: 50%;\r\n background: transparent;\r\n color: var(--text);\r\n font-family: var(--sans);\r\n font-size: 18px;\r\n line-height: 1;\r\n cursor: pointer;\r\n transition: border-color .16s ease, background-color .16s ease, color .16s ease;\r\n}\r\n\r\n.works-loop__arrow:hover,\r\n.works-loop__arrow:focus-visible {\r\n border-color: var(--text);\r\n background: var(--text);\r\n color: var(--bg);\r\n outline: none;\r\n}\r\n\r\n.works-loop__viewport {\r\n width: 100%;\r\n min-width: 0;\r\n overflow-x: auto;\r\n overflow-y: hidden;\r\n -webkit-overflow-scrolling: touch;\r\n overscroll-behavior-inline: contain;\r\n scroll-snap-type: x mandatory;\r\n scrollbar-width: none;\r\n cursor: grab;\r\n touch-action: pan-x pan-y;\r\n}\r\n\r\n.works-loop__viewport::-webkit-scrollbar {\r\n display: none;\r\n}\r\n\r\n.works-loop__viewport.is-dragging {\r\n cursor: grabbing;\r\n scroll-snap-type: none;\r\n user-select: none;\r\n}\r\n\r\n.works-loop__track {\r\n display: flex;\r\n align-items: flex-start;\r\n width: max-content;\r\n max-width: none;\r\n gap: clamp(10px, 1.2vw, 16px);\r\n padding-right: var(--page-x);\r\n}\r\n\r\n.works-loop__item {\r\n position: relative;\r\n flex: 0 0 clamp(250px, 28vw, 410px);\r\n width: clamp(250px, 28vw, 410px);\r\n aspect-ratio: 16 \/ 9;\r\n overflow: hidden;\r\n background: #171717;\r\n scroll-snap-align: start;\r\n scroll-snap-stop: always;\r\n contain: layout paint;\r\n}\r\n\r\n.works-loop__thumbnail,\r\n.works-loop__item iframe {\r\n position: absolute;\r\n inset: 0;\r\n display: block;\r\n width: 100%;\r\n height: 100%;\r\n border: 0;\r\n}\r\n\r\n.works-loop__thumbnail {\r\n z-index: 1;\r\n object-fit: cover;\r\n object-position: center center;\r\n background: #171717;\r\n transform: none;\r\n}\r\n\r\n.works-loop__item iframe {\r\n z-index: 4;\r\n background: #111;\r\n}\r\n\r\nbody .works-loop .works-loop__item {\r\n position: relative !important;\r\n aspect-ratio: 16 \/ 9 !important;\r\n overflow: hidden !important;\r\n}\r\n\r\nbody .works-loop .works-loop__item > img.works-loop__thumbnail,\r\nbody .works-loop .works-loop__item > iframe {\r\n position: absolute !important;\r\n inset: 0 !important;\r\n display: block !important;\r\n width: 100% !important;\r\n height: 100% !important;\r\n min-width: 100% !important;\r\n min-height: 100% !important;\r\n max-width: none !important;\r\n max-height: none !important;\r\n margin: 0 !important;\r\n padding: 0 !important;\r\n border: 0 !important;\r\n aspect-ratio: auto !important;\r\n}\r\n\r\nbody .works-loop .works-loop__item > img.works-loop__thumbnail {\r\n object-fit: cover !important;\r\n object-position: center center !important;\r\n}\r\n\r\n.works-loop__item::after {\r\n content: \"\";\r\n position: absolute;\r\n inset: 0;\r\n z-index: 5;\r\n pointer-events: none;\r\n box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);\r\n}\r\n\r\n.works-loop__play {\r\n position: absolute;\r\n inset: 0;\r\n z-index: 3;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 100%;\r\n padding: 0;\r\n border: 0;\r\n background: transparent;\r\n color: #fff;\r\n font: inherit;\r\n text-decoration: none;\r\n cursor: pointer;\r\n -webkit-tap-highlight-color: transparent;\r\n}\r\n\r\n.works-loop__play-icon {\r\n position: relative;\r\n width: 54px;\r\n height: 54px;\r\n display: block;\r\n border: 1px solid rgba(255, 255, 255, .82);\r\n border-radius: 50%;\r\n background: rgba(0, 0, 0, .42);\r\n transition: transform .16s ease, background-color .16s ease;\r\n}\r\n\r\n.works-loop__play-icon::after {\r\n content: \"\";\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n margin-left: 2px;\r\n transform: translate(-50%, -50%);\r\n border-top: 7px solid transparent;\r\n border-bottom: 7px solid transparent;\r\n border-left: 11px solid currentColor;\r\n}\r\n\r\n.works-loop__play:hover .works-loop__play-icon,\r\n.works-loop__play:focus-visible .works-loop__play-icon {\r\n transform: scale(1.06);\r\n background: rgba(0, 0, 0, .68);\r\n}\r\n\r\n.works-loop__play:focus-visible {\r\n outline: 2px solid #fff;\r\n outline-offset: -4px;\r\n}\r\n\r\n.works-loop__status {\r\n position: absolute;\r\n left: 12px;\r\n bottom: 10px;\r\n z-index: 2;\r\n color: rgba(255, 255, 255, .78);\r\n font-size: 9px;\r\n line-height: 1.3;\r\n letter-spacing: .1em;\r\n text-transform: uppercase;\r\n pointer-events: none;\r\n}\r\n\r\n@media (max-width: 720px) {\r\n .works-loop {\r\n margin-top: 48px;\r\n padding-top: 20px;\r\n }\r\n\r\n .works-loop__header {\r\n margin-bottom: 16px;\r\n }\r\n\r\n .works-loop__controls {\r\n display: none;\r\n }\r\n\r\n .works-loop__track {\r\n gap: 10px;\r\n padding-right: 18px;\r\n }\r\n\r\n .works-loop__item {\r\n flex-basis: min(82vw, 330px);\r\n width: min(82vw, 330px);\r\n }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n .works-loop__viewport {\r\n scroll-behavior: auto !important;\r\n }\r\n\r\n .works-loop__arrow,\r\n .works-loop__play-icon {\r\n transition: none;\r\n }\r\n}\r\n\r\n.construction-title {\r\n position: relative;\r\n left: 50%;\r\n width: 100vw;\r\n max-width: none;\r\n margin: 0 0 clamp(56px, 7vw, 96px) -50vw;\r\n padding: 0 var(--page-x);\r\n text-align: center;\r\n font-family: var(--serif);\r\n font-weight: 400;\r\n font-size: clamp(58px, 9.5vw, 168px);\r\n line-height: .9;\r\n letter-spacing: -.075em;\r\n white-space: normal;\r\n}\r\n\r\n.construction-title span {\r\n display: inline;\r\n font-family: var(--serif);\r\n font-style: italic;\r\n letter-spacing: -.085em;\r\n}\r\n\r\n@media (max-width: 720px) {\r\n .construction-title {\r\n font-size: clamp(48px, 14vw, 82px);\r\n line-height: .94;\r\n margin-bottom: 48px;\r\n }\r\n}\r\n\r\n.page {\r\n width: 100%;\r\n min-width: 0;\r\n max-width: 100%;\r\n grid-template-columns: minmax(0, 1fr);\r\n overflow-x: hidden;\r\n overflow-x: clip;\r\n}\r\n\r\nmain,\r\n.grid,\r\n.hero,\r\n.info,\r\n.clients,\r\n.clients__marquee,\r\n.works-loop,\r\n.works-loop__viewport,\r\n.project-contact,\r\n.project-contact__layout {\r\n min-width: 0;\r\n max-width: 100%;\r\n}\r\n\r\n@media (max-width: 900px) {\r\n main {\r\n width: calc(100% - (var(--page-x) * 2)) !important;\r\n max-width: 100% !important;\r\n margin-right: auto !important;\r\n margin-left: auto !important;\r\n }\r\n\r\n .grid,\r\n .project-contact__layout {\r\n width: 100% !important;\r\n grid-template-columns: minmax(0, 1fr) !important;\r\n }\r\n\r\n .hero,\r\n .info,\r\n .services,\r\n .clients,\r\n .works-loop,\r\n .project-contact,\r\n .contact-form {\r\n width: 100% !important;\r\n max-width: 100% !important;\r\n }\r\n}\r\n\r\n.construction-title {\r\n margin-bottom: clamp(34px, 4vw, 56px) !important;\r\n}\r\n\r\nmain > .grid {\r\n width: min(100%, 980px) !important;\r\n margin: 0 auto !important;\r\n grid-template-columns: minmax(0, 1fr) !important;\r\n justify-content: center !important;\r\n justify-items: center !important;\r\n gap: clamp(52px, 6vw, 82px) !important;\r\n text-align: center !important;\r\n}\r\n\r\nmain > .grid .hero {\r\n width: 100% !important;\r\n max-width: 100% !important;\r\n justify-self: center !important;\r\n padding: 0 !important;\r\n text-align: center !important;\r\n}\r\n\r\nmain > .grid .contact {\r\n width: min(100%, 440px) !important;\r\n margin: 0 auto !important;\r\n padding-top: 0 !important;\r\n text-align: center !important;\r\n}\r\n\r\nmain > .grid .intro {\r\n margin-right: auto !important;\r\n margin-left: auto !important;\r\n text-align: center !important;\r\n}\r\n\r\nmain > .grid .socials {\r\n justify-content: center !important;\r\n}\r\n\r\nmain > .grid .info {\r\n width: min(100%, 900px) !important;\r\n max-width: 900px !important;\r\n margin: 0 auto !important;\r\n justify-self: center !important;\r\n overflow: hidden !important;\r\n text-align: center !important;\r\n}\r\n\r\nmain > .grid .services {\r\n width: 100% !important;\r\n max-width: 820px !important;\r\n margin: 0 auto !important;\r\n}\r\n\r\nmain > .grid .section-title,\r\nmain > .grid .clients__label {\r\n text-align: center !important;\r\n}\r\n\r\nmain > .grid .services__list {\r\n width: 100% !important;\r\n max-width: 760px !important;\r\n margin-right: auto !important;\r\n margin-left: auto !important;\r\n justify-items: center !important;\r\n}\r\n\r\nmain > .grid .service {\r\n display: inline-grid !important;\r\n grid-template-columns: auto auto !important;\r\n justify-content: center !important;\r\n text-align: center !important;\r\n}\r\n\r\nmain > .grid .clients {\r\n width: 100% !important;\r\n max-width: 900px !important;\r\n margin-right: auto !important;\r\n margin-left: auto !important;\r\n}\r\n\r\n@media (max-width: 720px) {\r\n .construction-title {\r\n margin-bottom: 30px !important;\r\n }\r\n\r\n main > .grid {\r\n gap: 44px !important;\r\n }\r\n\r\n main > .grid .services__list {\r\n max-width: 360px !important;\r\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\r\n justify-items: center !important;\r\n }\r\n\r\n main > .grid .service {\r\n width: 100% !important;\r\n grid-template-columns: auto auto !important;\r\n justify-content: center !important;\r\n text-align: center !important;\r\n }\r\n}\r\n\r\nmain > .construction-title {\r\n text-align: center !important;\r\n}\r\n\r\nmain > .grid {\r\n display: flex !important;\r\n flex-direction: column !important;\r\n align-items: center !important;\r\n justify-content: flex-start !important;\r\n width: min(100%, 1120px) !important;\r\n max-width: 1120px !important;\r\n margin-right: auto !important;\r\n margin-left: auto !important;\r\n gap: clamp(58px, 6vw, 86px) !important;\r\n text-align: center !important;\r\n}\r\n\r\nmain > .grid > .hero,\r\nmain > .grid > .info {\r\n width: 100% !important;\r\n max-width: 100% !important;\r\n margin-right: auto !important;\r\n margin-left: auto !important;\r\n justify-self: auto !important;\r\n align-self: auto !important;\r\n text-align: center !important;\r\n}\r\n\r\nmain > .grid .contact {\r\n width: min(100%, 520px) !important;\r\n margin-right: auto !important;\r\n margin-left: auto !important;\r\n text-align: center !important;\r\n}\r\n\r\nmain > .grid .intro,\r\nmain > .grid .section-title,\r\nmain > .grid .clients__label {\r\n text-align: center !important;\r\n}\r\n\r\nmain > .grid .socials {\r\n justify-content: center !important;\r\n}\r\n\r\nmain > .grid .services {\r\n width: min(100%, 900px) !important;\r\n max-width: 900px !important;\r\n margin-right: auto !important;\r\n margin-left: auto !important;\r\n}\r\n\r\nmain > .grid .services__list {\r\n width: min(100%, 820px) !important;\r\n max-width: 820px !important;\r\n margin-right: auto !important;\r\n margin-left: auto !important;\r\n justify-items: center !important;\r\n}\r\n\r\nmain > .grid .service {\r\n justify-content: center !important;\r\n text-align: center !important;\r\n}\r\n\r\nmain > .grid .clients {\r\n width: min(100%, 1040px) !important;\r\n max-width: 1040px !important;\r\n margin-right: auto !important;\r\n margin-left: auto !important;\r\n text-align: center !important;\r\n}\r\n\r\nmain > .grid .clients__marquee {\r\n width: 100% !important;\r\n margin-right: auto !important;\r\n margin-left: auto !important;\r\n}\r\n\r\nmain > .works-loop {\r\n width: min(100%, 1180px) !important;\r\n max-width: 1180px !important;\r\n margin-right: auto !important;\r\n margin-left: auto !important;\r\n}\r\n\r\nmain > .works-loop .works-loop__header {\r\n flex-direction: column !important;\r\n align-items: center !important;\r\n justify-content: center !important;\r\n gap: 14px !important;\r\n text-align: center !important;\r\n}\r\n\r\nmain > .works-loop .works-loop__header .section-title {\r\n width: 100% !important;\r\n text-align: center !important;\r\n}\r\n\r\nmain > .works-loop .works-loop__controls {\r\n justify-content: center !important;\r\n}\r\n\r\nmain > .works-loop .works-loop__viewport {\r\n width: 100% !important;\r\n margin-right: auto !important;\r\n margin-left: auto !important;\r\n}\r\n\r\n@media (max-width: 720px) {\r\n main > .grid {\r\n gap: 46px !important;\r\n }\r\n\r\n main > .grid .services__list {\r\n width: min(100%, 380px) !important;\r\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\r\n }\r\n\r\n main > .works-loop .works-loop__header {\r\n gap: 12px !important;\r\n }\r\n}\r\n\r\nmain > .grid .info {\r\n display: grid !important;\r\n grid-template-columns: minmax(280px, .82fr) minmax(0, 1.18fr) !important;\r\n align-items: start !important;\r\n gap: clamp(44px, 6vw, 88px) !important;\r\n width: min(100%, 1120px) !important;\r\n max-width: 1120px !important;\r\n overflow: visible !important;\r\n}\r\n\r\nmain > .grid .services,\r\nmain > .grid .clients {\r\n width: 100% !important;\r\n max-width: none !important;\r\n margin: 0 !important;\r\n}\r\n\r\nmain > .grid .clients {\r\n padding-top: 0 !important;\r\n border-top: 0 !important;\r\n overflow: hidden !important;\r\n}\r\n\r\nmain > .grid .services__list {\r\n width: 100% !important;\r\n max-width: 440px !important;\r\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\r\n column-gap: clamp(24px, 3vw, 42px) !important;\r\n row-gap: 24px !important;\r\n}\r\n\r\nmain > .grid .service {\r\n display: flex !important;\r\n width: 100% !important;\r\n align-items: center !important;\r\n justify-content: center !important;\r\n grid-template-columns: none !important;\r\n gap: 0 !important;\r\n text-align: center !important;\r\n}\r\n\r\nmain > .grid .service::before {\r\n content: none !important;\r\n display: none !important;\r\n}\r\n\r\nmain > .works-loop {\r\n width: min(100%, 1440px) !important;\r\n max-width: 1440px !important;\r\n overflow: visible !important;\r\n}\r\n\r\nmain > .works-loop .works-loop__header {\r\n display: block !important;\r\n margin-bottom: 18px !important;\r\n}\r\n\r\nmain > .works-loop .works-loop__carousel {\r\n display: grid !important;\r\n grid-template-columns: 44px minmax(0, 1fr) 44px !important;\r\n align-items: center !important;\r\n gap: clamp(10px, 1.2vw, 18px) !important;\r\n width: 100% !important;\r\n}\r\n\r\nmain > .works-loop .works-loop__arrow {\r\n display: inline-flex !important;\r\n position: relative !important;\r\n z-index: 8 !important;\r\n flex: 0 0 auto !important;\r\n}\r\n\r\nmain > .works-loop .works-loop__viewport {\r\n min-width: 0 !important;\r\n width: 100% !important;\r\n}\r\n\r\nmain > .works-loop .works-loop__track {\r\n gap: clamp(8px, .8vw, 12px) !important;\r\n padding-right: 0 !important;\r\n}\r\n\r\nmain > .works-loop .works-loop__item {\r\n flex: 0 0 clamp(190px, 17vw, 250px) !important;\r\n width: clamp(190px, 17vw, 250px) !important;\r\n}\r\n\r\n@media (max-width: 900px) {\r\n main > .grid .info {\r\n grid-template-columns: minmax(0, 1fr) !important;\r\n gap: 46px !important;\r\n width: 100% !important;\r\n }\r\n\r\n main > .grid .services,\r\n main > .grid .clients {\r\n width: min(100%, 620px) !important;\r\n margin-right: auto !important;\r\n margin-left: auto !important;\r\n }\r\n\r\n main > .grid .clients {\r\n padding-top: 26px !important;\r\n border-top: 1px solid var(--line) !important;\r\n }\r\n}\r\n\r\n@media (max-width: 720px) {\r\n main > .grid .services__list {\r\n width: min(100%, 380px) !important;\r\n max-width: 380px !important;\r\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\r\n column-gap: 12px !important;\r\n row-gap: 16px !important;\r\n }\r\n\r\n main > .works-loop .works-loop__carousel {\r\n grid-template-columns: 36px minmax(0, 1fr) 36px !important;\r\n gap: 8px !important;\r\n }\r\n\r\n main > .works-loop .works-loop__arrow {\r\n width: 36px !important;\r\n height: 36px !important;\r\n font-size: 16px !important;\r\n }\r\n\r\n main > .works-loop .works-loop__item {\r\n flex-basis: min(62vw, 260px) !important;\r\n width: min(62vw, 260px) !important;\r\n }\r\n}\r\n\r\n:root {\r\n --section-width: 1240px;\r\n}\r\n\r\nmain > .construction-title,\r\nmain > .grid,\r\nmain > .works-loop,\r\nmain > .project-contact {\r\n width: min(100%, var(--section-width)) !important;\r\n max-width: var(--section-width) !important;\r\n margin-right: auto !important;\r\n margin-left: auto !important;\r\n}\r\n\r\nmain > .construction-title {\r\n position: static !important;\r\n left: auto !important;\r\n padding-right: 0 !important;\r\n padding-left: 0 !important;\r\n font-size: clamp(58px, 8vw, 128px) !important;\r\n text-align: center !important;\r\n}\r\n\r\nmain > .grid .hero,\r\nmain > .grid .contact,\r\nmain > .grid .info {\r\n width: 100% !important;\r\n max-width: 100% !important;\r\n}\r\n\r\nmain > .grid .info {\r\n display: flex !important;\r\n flex-direction: column !important;\r\n align-items: stretch !important;\r\n gap: clamp(38px, 4.5vw, 60px) !important;\r\n overflow: hidden !important;\r\n}\r\n\r\nmain > .grid .services,\r\nmain > .grid .clients {\r\n width: 100% !important;\r\n max-width: 100% !important;\r\n margin-right: auto !important;\r\n margin-left: auto !important;\r\n}\r\n\r\nmain > .grid .services__list {\r\n width: 100% !important;\r\n max-width: 100% !important;\r\n display: grid !important;\r\n grid-template-columns: repeat(3, minmax(0, 1fr)) !important;\r\n column-gap: clamp(28px, 4vw, 64px) !important;\r\n row-gap: 22px !important;\r\n align-items: center !important;\r\n justify-items: stretch !important;\r\n}\r\n\r\nmain > .grid .service {\r\n display: flex !important;\r\n width: 100% !important;\r\n min-height: 34px !important;\r\n align-items: center !important;\r\n justify-content: center !important;\r\n padding: 0 8px !important;\r\n text-align: center !important;\r\n}\r\n\r\nmain > .grid .service::before {\r\n content: none !important;\r\n display: none !important;\r\n}\r\n\r\nmain > .grid .clients {\r\n padding-top: 30px !important;\r\n border-top: 1px solid var(--line) !important;\r\n}\r\n\r\nmain > .works-loop {\r\n overflow: visible !important;\r\n}\r\n\r\nmain > .works-loop .works-loop__carousel {\r\n width: 100% !important;\r\n grid-template-columns: 48px minmax(0, 1fr) 48px !important;\r\n gap: clamp(12px, 1.5vw, 22px) !important;\r\n}\r\n\r\nmain > .works-loop .works-loop__track {\r\n gap: clamp(12px, 1.2vw, 18px) !important;\r\n}\r\n\r\nmain > .works-loop .works-loop__item {\r\n flex: 0 0 clamp(300px, 28vw, 380px) !important;\r\n width: clamp(300px, 28vw, 380px) !important;\r\n}\r\n\r\nmain > .project-contact .project-contact__layout {\r\n width: 100% !important;\r\n max-width: 100% !important;\r\n}\r\n\r\n@media (max-width: 900px) {\r\n main > .construction-title,\r\n main > .grid,\r\n main > .works-loop,\r\n main > .project-contact {\r\n width: 100% !important;\r\n max-width: 100% !important;\r\n }\r\n\r\n main > .grid .info {\r\n gap: 42px !important;\r\n }\r\n\r\n main > .grid .services__list {\r\n grid-template-columns: repeat(3, minmax(0, 1fr)) !important;\r\n column-gap: 18px !important;\r\n }\r\n\r\n main > .works-loop .works-loop__item {\r\n flex-basis: clamp(280px, 42vw, 340px) !important;\r\n width: clamp(280px, 42vw, 340px) !important;\r\n }\r\n}\r\n\r\n@media (max-width: 720px) {\r\n main > .construction-title {\r\n font-size: clamp(48px, 14vw, 82px) !important;\r\n }\r\n\r\n main > .grid .services__list {\r\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\r\n column-gap: 12px !important;\r\n row-gap: 16px !important;\r\n }\r\n\r\n main > .grid .clients {\r\n padding-top: 26px !important;\r\n }\r\n\r\n main > .works-loop .works-loop__carousel {\r\n grid-template-columns: 38px minmax(0, 1fr) 38px !important;\r\n gap: 8px !important;\r\n }\r\n\r\n main > .works-loop .works-loop__item {\r\n flex-basis: min(74vw, 320px) !important;\r\n width: min(74vw, 320px) !important;\r\n }\r\n}\r\n\r\nmain > .construction-title,\r\nmain > .grid,\r\nmain > .works-loop,\r\nmain > .project-contact {\r\n width: 100% !important;\r\n max-width: none !important;\r\n margin-right: 0 !important;\r\n margin-left: 0 !important;\r\n}\r\n\r\nmain > .grid,\r\nmain > .grid > .hero,\r\nmain > .grid > .info,\r\nmain > .grid .services,\r\nmain > .grid .clients,\r\nmain > .grid .clients__marquee,\r\nmain > .project-contact .project-contact__layout {\r\n width: 100% !important;\r\n max-width: none !important;\r\n}\r\n\r\nmain > .grid .contact {\r\n width: 100% !important;\r\n max-width: none !important;\r\n}\r\n\r\nmain > .grid .intro {\r\n max-width: 560px !important;\r\n margin-right: auto !important;\r\n margin-left: auto !important;\r\n}\r\n\r\nmain > .grid .services__list {\r\n width: 100% !important;\r\n max-width: none !important;\r\n grid-template-columns: repeat(3, minmax(0, 1fr)) !important;\r\n}\r\n\r\nmain > .grid .clients {\r\n width: 100% !important;\r\n max-width: none !important;\r\n}\r\n\r\n@media (min-width: 901px) {\r\n main > .works-loop {\r\n overflow: visible !important;\r\n }\r\n\r\n main > .works-loop .works-loop__carousel {\r\n display: block !important;\r\n width: 100% !important;\r\n }\r\n\r\n main > .works-loop .works-loop__arrow {\r\n display: none !important;\r\n }\r\n\r\n main > .works-loop .works-loop__viewport {\r\n width: 100% !important;\r\n overflow: visible !important;\r\n scroll-snap-type: none !important;\r\n cursor: default !important;\r\n touch-action: auto !important;\r\n }\r\n\r\n main > .works-loop .works-loop__track {\r\n display: grid !important;\r\n grid-template-columns: repeat(4, minmax(0, 1fr)) !important;\r\n gap: clamp(12px, 1.25vw, 22px) !important;\r\n width: 100% !important;\r\n max-width: none !important;\r\n padding: 0 !important;\r\n transform: none !important;\r\n }\r\n\r\n main > .works-loop .works-loop__item {\r\n width: 100% !important;\r\n min-width: 0 !important;\r\n max-width: none !important;\r\n flex: none !important;\r\n scroll-snap-align: none !important;\r\n }\r\n}\r\n\r\n@media (min-width: 901px) and (max-width: 1250px) {\r\n main > .works-loop .works-loop__track {\r\n grid-template-columns: repeat(3, minmax(0, 1fr)) !important;\r\n }\r\n}\r\n\r\n@media (max-width: 900px) {\r\n main > .works-loop .works-loop__carousel {\r\n display: grid !important;\r\n grid-template-columns: 38px minmax(0, 1fr) 38px !important;\r\n gap: 8px !important;\r\n }\r\n\r\n main > .works-loop .works-loop__arrow {\r\n display: inline-flex !important;\r\n }\r\n\r\n main > .works-loop .works-loop__viewport {\r\n overflow-x: auto !important;\r\n overflow-y: hidden !important;\r\n scroll-snap-type: x mandatory !important;\r\n cursor: grab !important;\r\n }\r\n\r\n main > .works-loop .works-loop__track {\r\n display: flex !important;\r\n width: max-content !important;\r\n gap: 12px !important;\r\n }\r\n\r\n main > .works-loop .works-loop__item {\r\n flex: 0 0 min(74vw, 340px) !important;\r\n width: min(74vw, 340px) !important;\r\n }\r\n}\r\n\r\n@media (min-width: 901px) {\r\n main > .works-loop .works-loop__carousel {\r\n display: block !important;\r\n width: 100% !important;\r\n }\r\n\r\n main > .works-loop .works-loop__arrow,\r\n main > .works-loop .works-loop__controls {\r\n display: none !important;\r\n }\r\n\r\n main > .works-loop .works-loop__viewport {\r\n width: 100% !important;\r\n overflow-x: auto !important;\r\n overflow-y: hidden !important;\r\n -webkit-overflow-scrolling: touch !important;\r\n overscroll-behavior-inline: contain !important;\r\n scroll-snap-type: x mandatory !important;\r\n scrollbar-width: none !important;\r\n cursor: grab !important;\r\n touch-action: pan-x pan-y !important;\r\n }\r\n\r\n main > .works-loop .works-loop__viewport::-webkit-scrollbar {\r\n display: none !important;\r\n }\r\n\r\n main > .works-loop .works-loop__viewport.is-dragging {\r\n cursor: grabbing !important;\r\n scroll-snap-type: none !important;\r\n }\r\n\r\n main > .works-loop .works-loop__track {\r\n --video-strip-gap: 16px;\r\n display: flex !important;\r\n width: 100% !important;\r\n max-width: none !important;\r\n gap: var(--video-strip-gap) !important;\r\n padding: 0 !important;\r\n transform: none !important;\r\n }\r\n\r\n main > .works-loop .works-loop__item {\r\n flex: 0 0 calc(25% - 12px) !important;\r\n width: calc(25% - 12px) !important;\r\n min-width: 0 !important;\r\n max-width: none !important;\r\n scroll-snap-align: start !important;\r\n scroll-snap-stop: always !important;\r\n }\r\n}\r\n\r\n@media (min-width: 901px) {\r\n main > .works-loop {\r\n overflow: visible !important;\r\n }\r\n\r\n main > .works-loop .works-loop__carousel {\r\n display: block !important;\r\n width: 100% !important;\r\n }\r\n\r\n main > .works-loop .works-loop__arrow,\r\n main > .works-loop .works-loop__controls {\r\n display: none !important;\r\n }\r\n\r\n main > .works-loop .works-loop__viewport {\r\n width: 100% !important;\r\n overflow: visible !important;\r\n scroll-snap-type: none !important;\r\n cursor: default !important;\r\n touch-action: auto !important;\r\n }\r\n\r\n main > .works-loop .works-loop__track {\r\n display: grid !important;\r\n grid-template-columns: repeat(4, minmax(0, 1fr)) !important;\r\n gap: clamp(12px, 1.25vw, 22px) !important;\r\n width: 100% !important;\r\n max-width: none !important;\r\n padding: 0 !important;\r\n transform: none !important;\r\n }\r\n\r\n main > .works-loop .works-loop__item {\r\n width: 100% !important;\r\n min-width: 0 !important;\r\n max-width: none !important;\r\n flex: none !important;\r\n scroll-snap-align: none !important;\r\n }\r\n}\r\n\r\n@media (max-width: 720px) {\r\n main > .works-loop {\r\n overflow: hidden !important;\r\n }\r\n\r\n main > .works-loop .works-loop__carousel {\r\n display: block !important;\r\n width: 100% !important;\r\n }\r\n\r\n main > .works-loop .works-loop__arrow,\r\n main > .works-loop .works-loop__controls {\r\n display: none !important;\r\n }\r\n\r\n main > .works-loop .works-loop__viewport {\r\n width: 100% !important;\r\n overflow-x: auto !important;\r\n overflow-y: hidden !important;\r\n -webkit-overflow-scrolling: touch !important;\r\n overscroll-behavior-inline: contain !important;\r\n scroll-snap-type: x mandatory !important;\r\n scrollbar-width: none !important;\r\n touch-action: pan-x pan-y !important;\r\n cursor: grab !important;\r\n }\r\n\r\n main > .works-loop .works-loop__viewport::-webkit-scrollbar {\r\n display: none !important;\r\n }\r\n\r\n main > .works-loop .works-loop__track {\r\n display: flex !important;\r\n width: max-content !important;\r\n max-width: none !important;\r\n gap: 10px !important;\r\n padding: 0 18px 0 0 !important;\r\n transform: none !important;\r\n }\r\n\r\n main > .works-loop .works-loop__item {\r\n flex: 0 0 clamp(145px, 43vw, 190px) !important;\r\n width: clamp(145px, 43vw, 190px) !important;\r\n min-width: 0 !important;\r\n max-width: none !important;\r\n scroll-snap-align: start !important;\r\n scroll-snap-stop: normal !important;\r\n }\r\n}\r\n\r\n@media (max-width: 720px) {\r\n main > .works-loop {\r\n overflow: visible !important;\r\n }\r\n\r\n main > .works-loop .works-loop__carousel {\r\n display: block !important;\r\n width: 100% !important;\r\n }\r\n\r\n main > .works-loop .works-loop__arrow,\r\n main > .works-loop .works-loop__controls {\r\n display: none !important;\r\n }\r\n\r\n main > .works-loop .works-loop__viewport {\r\n width: 100% !important;\r\n overflow: visible !important;\r\n scroll-snap-type: none !important;\r\n scrollbar-width: auto !important;\r\n touch-action: auto !important;\r\n cursor: default !important;\r\n }\r\n\r\n main > .works-loop .works-loop__track {\r\n display: grid !important;\r\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\r\n gap: 10px !important;\r\n width: 100% !important;\r\n max-width: none !important;\r\n padding: 0 !important;\r\n transform: none !important;\r\n }\r\n\r\n main > .works-loop .works-loop__item {\r\n width: 100% !important;\r\n min-width: 0 !important;\r\n max-width: none !important;\r\n flex: none !important;\r\n scroll-snap-align: none !important;\r\n scroll-snap-stop: normal !important;\r\n }\r\n}\r\n\r\n.websites {\r\n width: 100%;\r\n margin-top: clamp(48px, 6vw, 80px);\r\n padding-top: 24px;\r\n border-top: 1px solid var(--line);\r\n font-family: var(--inter);\r\n overflow: hidden;\r\n}\r\n\r\n.websites__header {\r\n width: 100%;\r\n margin-bottom: 20px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 20px;\r\n}\r\n\r\n.websites__header .section-title {\r\n margin: 0;\r\n text-align: left;\r\n}\r\n\r\n.websites__controls {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n}\r\n\r\n.websites__arrow {\r\n appearance: none;\r\n -webkit-appearance: none;\r\n width: 42px;\r\n height: 42px;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n border: 1px solid var(--line);\r\n border-radius: 50%;\r\n background: transparent;\r\n color: var(--text);\r\n font-family: var(--sans);\r\n font-size: 18px;\r\n line-height: 1;\r\n cursor: pointer;\r\n transition: border-color .16s ease, background-color .16s ease, color .16s ease, opacity .16s ease;\r\n}\r\n\r\n.websites__arrow:hover,\r\n.websites__arrow:focus-visible {\r\n border-color: var(--text);\r\n background: var(--text);\r\n color: var(--bg);\r\n outline: none;\r\n}\r\n\r\n.websites__arrow:disabled {\r\n opacity: .28;\r\n cursor: default;\r\n pointer-events: none;\r\n}\r\n\r\n.websites__links {\r\n display: flex;\r\n align-items: stretch;\r\n gap: clamp(10px, 1.2vw, 16px);\r\n width: 100%;\r\n overflow-x: auto;\r\n overflow-y: hidden;\r\n padding: 0 0 8px;\r\n scrollbar-width: none;\r\n -webkit-overflow-scrolling: touch;\r\n overscroll-behavior-inline: contain;\r\n scroll-snap-type: x proximity;\r\n scroll-behavior: smooth;\r\n touch-action: pan-x pan-y;\r\n}\r\n\r\n.websites__links::-webkit-scrollbar {\r\n display: none;\r\n}\r\n\r\n.website-link {\r\n position: relative;\r\n isolation: isolate;\r\n flex: 0 0 clamp(220px, 21vw, 292px);\r\n width: clamp(220px, 21vw, 292px);\r\n aspect-ratio: .78;\r\n min-width: 0;\r\n overflow: hidden;\r\n border-radius: clamp(22px, 2.5vw, 30px);\r\n background: #f6f6f6;\r\n color: #000;\r\n text-decoration: none;\r\n scroll-snap-align: start;\r\n -webkit-tap-highlight-color: transparent;\r\n}\r\n\r\n.website-link::before {\r\n content: \"\";\r\n position: absolute;\r\n z-index: 0;\r\n left: 0;\r\n right: 0;\r\n top: 24%;\r\n bottom: 0;\r\n border-radius: clamp(22px, 2.5vw, 30px);\r\n background: #eeeeee;\r\n transition: top .62s cubic-bezier(.22,.78,.2,1);\r\n}\r\n\r\n.website-link::after {\r\n content: \"\";\r\n position: absolute;\r\n z-index: 0;\r\n left: 0;\r\n top: 15%;\r\n width: 48%;\r\n height: 15%;\r\n border-radius: clamp(22px, 2.5vw, 30px) clamp(22px, 2.5vw, 30px) clamp(26px, 2.8vw, 34px) 0;\r\n background: #eeeeee;\r\n transition: top .62s cubic-bezier(.22,.78,.2,1);\r\n}\r\n\r\n.website-link__number,\r\n.website-link__content,\r\n.website-link__arrow {\r\n position: absolute;\r\n z-index: 2;\r\n}\r\n\r\n.website-link__number {\r\n top: 29%;\r\n left: clamp(20px, 2.4vw, 28px);\r\n font-family: var(--inter);\r\n font-size: clamp(48px, 5.2vw, 66px);\r\n font-weight: 400;\r\n line-height: .9;\r\n letter-spacing: -.075em;\r\n font-variant-numeric: tabular-nums;\r\n transition: top .62s cubic-bezier(.22,.78,.2,1);\r\n}\r\n\r\n.website-link__arrow {\r\n top: 28.5%;\r\n right: clamp(18px, 2.2vw, 26px);\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 24px;\r\n height: 24px;\r\n font-size: clamp(19px, 2vw, 23px);\r\n font-weight: 300;\r\n line-height: 1;\r\n transition: top .62s cubic-bezier(.22,.78,.2,1), transform .32s ease;\r\n}\r\n\r\n.website-link__content {\r\n left: clamp(20px, 2.4vw, 28px);\r\n right: clamp(20px, 2.4vw, 28px);\r\n bottom: clamp(20px, 2.5vw, 28px);\r\n display: grid;\r\n gap: 7px;\r\n opacity: 1;\r\n transform: translateY(0);\r\n transition: opacity .24s ease, transform .42s cubic-bezier(.22,.78,.2,1);\r\n}\r\n\r\n.website-link__name {\r\n display: block;\r\n font-family: var(--inter);\r\n font-size: clamp(15px, 1.45vw, 19px);\r\n line-height: 1.12;\r\n font-weight: 500;\r\n letter-spacing: -.035em;\r\n}\r\n\r\n.website-link__description {\r\n display: -webkit-box;\r\n overflow: hidden;\r\n -webkit-box-orient: vertical;\r\n -webkit-line-clamp: 2;\r\n color: #777;\r\n font-family: var(--inter);\r\n font-size: clamp(11px, .95vw, 13px);\r\n font-weight: 400;\r\n line-height: 1.35;\r\n letter-spacing: -.01em;\r\n}\r\n\r\n.website-link--preview::before,\r\n.website-link--preview::after {\r\n z-index: 1;\r\n}\r\n\r\n.website-link--preview::before {\r\n top: 48%;\r\n}\r\n\r\n.website-link--preview::after {\r\n top: 40%;\r\n height: 14%;\r\n}\r\n\r\n.website-link__preview {\r\n position: absolute;\r\n z-index: 0;\r\n top: 10px;\r\n right: 10px;\r\n left: 10px;\r\n width: calc(100% - 20px);\r\n height: 55%;\r\n display: block;\r\n border-radius: clamp(16px, 2vw, 22px);\r\n object-fit: cover;\r\n object-position: 50% 26%;\r\n background: #ddd;\r\n transform: translateZ(0);\r\n}\r\n\r\n.website-link--preview .website-link__number {\r\n top: 54%;\r\n}\r\n\r\n.website-link--preview .website-link__arrow {\r\n top: 53.5%;\r\n}\r\n\r\n.website-link:hover,\r\n.website-link:focus-visible {\r\n outline: none;\r\n}\r\n\r\n.website-link:hover::before,\r\n.website-link:focus-visible::before {\r\n top: 58%;\r\n}\r\n\r\n.website-link:hover::after,\r\n.website-link:focus-visible::after {\r\n top: 50%;\r\n}\r\n\r\n.website-link:hover .website-link__number,\r\n.website-link:focus-visible .website-link__number {\r\n top: 61%;\r\n}\r\n\r\n.website-link:hover .website-link__arrow,\r\n.website-link:focus-visible .website-link__arrow {\r\n top: 60%;\r\n transform: translate(3px, -3px);\r\n}\r\n\r\n.website-link:hover .website-link__content,\r\n.website-link:focus-visible .website-link__content {\r\n opacity: 0;\r\n transform: translateY(14px);\r\n}\r\n\r\n@media (max-width: 720px) {\r\n .websites {\r\n margin-top: 46px;\r\n }\r\n\r\n .websites__header {\r\n justify-content: center;\r\n }\r\n\r\n .websites__header .section-title {\r\n text-align: center;\r\n }\r\n\r\n .websites__controls {\r\n display: none;\r\n }\r\n\r\n .websites__links {\r\n gap: 12px;\r\n scroll-snap-type: x mandatory;\r\n }\r\n\r\n .website-link {\r\n flex-basis: min(72vw, 270px);\r\n width: min(72vw, 270px);\r\n }\r\n}\r\n\r\n@media (max-width: 420px) {\r\n .website-link {\r\n flex-basis: min(78vw, 250px);\r\n width: min(78vw, 250px);\r\n }\r\n\r\n .website-link__number {\r\n left: 20px;\r\n font-size: clamp(46px, 15vw, 58px);\r\n }\r\n\r\n .website-link__arrow {\r\n right: 18px;\r\n font-size: 20px;\r\n }\r\n\r\n .website-link__content {\r\n left: 20px;\r\n right: 20px;\r\n bottom: 20px;\r\n }\r\n\r\n .website-link__name {\r\n font-size: 16px;\r\n }\r\n\r\n .website-link__description {\r\n font-size: 11.5px;\r\n }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n .websites__links {\r\n scroll-behavior: auto;\r\n }\r\n\r\n .websites__arrow,\r\n .website-link::before,\r\n .website-link::after,\r\n .website-link__number,\r\n .website-link__content,\r\n .website-link__arrow {\r\n transition: none !important;\r\n }\r\n}\r\n\r\n:root {\r\n --logo-box-width: 156px;\r\n --logo-box-height: 58px;\r\n --logo-gap: clamp(38px, 4.4vw, 66px);\r\n}\r\n\r\n.clients__logo img,\r\n.clients__logo svg,\r\n.clients__text-logo {\r\n transform: scale(1.38) !important;\r\n transform-origin: center center !important;\r\n}\r\n\r\n.clients__logo--arp,\r\n.clients__logo--pes,\r\n.clients__logo--nck,\r\n.clients__logo--btt,\r\n.clients__logo--bok,\r\n.clients__logo--medicover {\r\n height: 62px !important;\r\n}\r\n\r\n@media (max-width: 720px) {\r\n :root {\r\n --logo-box-width: 132px;\r\n --logo-box-height: 50px;\r\n --logo-gap: 30px;\r\n }\r\n\r\n .clients__logo img,\r\n .clients__logo svg,\r\n .clients__text-logo {\r\n transform: scale(1.32) !important;\r\n }\r\n}\r\n\r\n@media (max-width: 520px) {\r\n :root {\r\n --logo-box-width: 120px;\r\n --logo-box-height: 46px;\r\n --logo-gap: 26px;\r\n }\r\n\r\n .clients__logo img,\r\n .clients__logo svg,\r\n .clients__text-logo {\r\n transform: scale(1.28) !important;\r\n }\r\n\r\n .clients__logo--arp,\r\n .clients__logo--pes,\r\n .clients__logo--nck,\r\n .clients__logo--btt,\r\n .clients__logo--bok,\r\n .clients__logo--medicover {\r\n height: 54px !important;\r\n }\r\n}\r\n\r\nmain > .construction-title {\r\n font-family: var(--serif) !important;\r\n font-weight: 400 !important;\r\n letter-spacing: -.065em !important;\r\n -webkit-font-smoothing: antialiased;\r\n}\r\n\r\nmain > .construction-title span {\r\n font-family: var(--serif) !important;\r\n font-weight: 400 !important;\r\n letter-spacing: -.07em !important;\r\n}\r\n\r\n:root {\r\n --text: #050505;\r\n --muted: #4a4742;\r\n --soft: #6d6963;\r\n --line: rgba(0, 0, 0, .22);\r\n --logo-gray: #3f3d39;\r\n}\r\n\r\nmain > .construction-title,\r\n.project-contact__title {\r\n color: #000;\r\n}\r\n\r\n.section-title,\r\n.clients__label {\r\n color: #4a4742;\r\n}\r\n\r\n.service::before {\r\n color: #5b5751;\r\n}\r\n\r\n.social-link {\r\n color: #35322f;\r\n}\r\n\r\n.social-link:hover,\r\n.social-link:focus-visible {\r\n color: #000;\r\n}\r\n\r\n.clients__logo {\r\n color: #35322f;\r\n}\r\n\r\n.clients__logo img,\r\n.clients__logo svg,\r\n.clients__text-logo {\r\n opacity: .76 !important;\r\n}\r\n\r\n.clients__logo img {\r\n filter: grayscale(1) saturate(0) brightness(.48) contrast(1.08) !important;\r\n}\r\n\r\n.clients__logo--crosscore img {\r\n filter: grayscale(1) saturate(0) brightness(.42) contrast(1.1) !important;\r\n opacity: .8 !important;\r\n}\r\n\r\n.website-link {\r\n background: #050505;\r\n color: #f6f6f6;\r\n}\r\n\r\n.website-link::before,\r\n.website-link::after {\r\n background: #111;\r\n}\r\n\r\n.website-link__description {\r\n color: rgba(246, 246, 246, .64);\r\n}\r\n\r\n.websites__arrow,\r\n.works-loop__arrow {\r\n border-color: rgba(0, 0, 0, .34);\r\n}\r\n\r\n.websites__arrow:hover,\r\n.websites__arrow:focus-visible,\r\n.works-loop__arrow:hover,\r\n.works-loop__arrow:focus-visible {\r\n border-color: #050505;\r\n background: #050505;\r\n color: #f6f6f6;\r\n}\r\n\r\n.contact-form .message-builder {\r\n background: #0b0b0b !important;\r\n border-color: #0b0b0b !important;\r\n color: #f6f6f6;\r\n}\r\n\r\n.contact-form .builder-head,\r\n.contact-form .builder-label {\r\n color: rgba(246, 246, 246, .68);\r\n}\r\n\r\n.contact-form .builder-hint,\r\n.contact-form .builder-final-note,\r\n.contact-form .builder-preview-text {\r\n color: rgba(246, 246, 246, .52);\r\n}\r\n\r\n.contact-form .builder-head,\r\n.contact-form .builder-preview,\r\n.contact-form .builder-actions {\r\n border-color: rgba(255, 255, 255, .18) !important;\r\n}\r\n\r\n.contact-form .builder-progress {\r\n background: rgba(255, 255, 255, .18);\r\n}\r\n\r\n.contact-form .builder-progress-bar {\r\n background: #f6f6f6;\r\n}\r\n\r\n.contact-form .builder-option,\r\n.contact-form .builder-nav {\r\n border-color: rgba(255, 255, 255, .26) !important;\r\n color: #f6f6f6 !important;\r\n background: transparent !important;\r\n}\r\n\r\n.contact-form .builder-option:hover,\r\n.contact-form .builder-option:focus-visible,\r\n.contact-form .builder-option.is-active,\r\n.contact-form .builder-nav:hover,\r\n.contact-form .builder-nav:focus-visible {\r\n border-color: #f6f6f6 !important;\r\n background: #f6f6f6 !important;\r\n color: #050505 !important;\r\n}\r\n\r\n.contact-form .builder-input,\r\n.contact-form .builder-textarea,\r\n.contact-form .builder-preview-text {\r\n border-bottom-color: rgba(255, 255, 255, .24) !important;\r\n color: #f6f6f6 !important;\r\n}\r\n\r\n.contact-form .builder-input:focus,\r\n.contact-form .builder-textarea:focus,\r\n.contact-form .builder-preview-text:focus {\r\n border-bottom-color: #f6f6f6 !important;\r\n}\r\n\r\n.contact-form .builder-input::placeholder,\r\n.contact-form .builder-textarea::placeholder {\r\n color: rgba(246, 246, 246, .38) !important;\r\n}\r\n\r\n.contact-form .builder-antirobot {\r\n border-color: rgba(255, 255, 255, .24) !important;\r\n}\r\n\r\n.contact-form .builder-antirobot label {\r\n color: rgba(246, 246, 246, .78) !important;\r\n}\r\n\r\n.contact-form .builder-antirobot input[type=\"checkbox\"] {\r\n accent-color: #f6f6f6;\r\n}\r\n\r\n.contact-form .wpcf7-submit {\r\n border-color: #f6f6f6 !important;\r\n background: #f6f6f6 !important;\r\n color: #050505 !important;\r\n}\r\n\r\n.contact-form .wpcf7-submit:hover,\r\n.contact-form .wpcf7-submit:focus-visible {\r\n background: transparent !important;\r\n color: #f6f6f6 !important;\r\n}\r\n\r\n.contact-form .wpcf7 form .wpcf7-response-output {\r\n border-color: rgba(255, 255, 255, .22);\r\n color: rgba(246, 246, 246, .7);\r\n}\r\n\r\n.clients,\r\n.websites,\r\n.works-loop,\r\n.project-contact {\r\n border-top-color: rgba(0, 0, 0, .24) !important;\r\n}\r\n\r\nmain {\r\n padding-bottom: 0 !important;\r\n}\r\n\r\nmain > .project-contact {\r\n width: 100vw !important;\r\n max-width: none !important;\r\n margin-right: calc(50% - 50vw) !important;\r\n margin-left: calc(50% - 50vw) !important;\r\n padding: clamp(56px, 7vw, 96px)\r\n max(var(--page-x), calc((100vw - 1240px) \/ 2))\r\n clamp(64px, 8vw, 112px) !important;\r\n border-top: 0 !important;\r\n background: #050505 !important;\r\n color: #f6f6f6 !important;\r\n}\r\n\r\nmain > .project-contact .project-contact__layout {\r\n width: 100% !important;\r\n max-width: 1240px !important;\r\n margin: 0 auto !important;\r\n}\r\n\r\nmain > .project-contact .project-contact__title {\r\n color: #f6f6f6 !important;\r\n}\r\n\r\nmain > .project-contact .section-title {\r\n color: rgba(246, 246, 246, .56) !important;\r\n}\r\n\r\nmain > .project-contact .project-contact__copy {\r\n color: rgba(246, 246, 246, .68) !important;\r\n}\r\n\r\nmain > .project-contact .contact-form {\r\n border-top: 0 !important;\r\n padding-top: 0 !important;\r\n}\r\n\r\nmain > .project-contact .contact-form .message-builder {\r\n border: 0 !important;\r\n background: #0b0b0b !important;\r\n}\r\n\r\nmain > .project-contact .contact-form .builder-head {\r\n border-bottom: 0 !important;\r\n}\r\n\r\n@media (max-width: 760px) {\r\n main > .project-contact {\r\n padding-right: var(--page-x) !important;\r\n padding-left: var(--page-x) !important;\r\n }\r\n}\r\n\r\n@media (min-width: 901px) {\r\n main > .works-loop .works-loop__track {\r\n display: grid !important;\r\n grid-template-columns: repeat(5, minmax(0, 1fr)) !important;\r\n gap: clamp(10px, 1vw, 16px) !important;\r\n width: 100% !important;\r\n max-width: none !important;\r\n padding: 0 !important;\r\n transform: none !important;\r\n }\r\n\r\n main > .works-loop .works-loop__item {\r\n width: 100% !important;\r\n min-width: 0 !important;\r\n max-width: none !important;\r\n flex: none !important;\r\n scroll-snap-align: none !important;\r\n }\r\n}\r\n\r\n@media (min-width: 721px) {\r\n main > .grid .clients__label {\r\n text-align: left !important;\r\n }\r\n\r\n main > .works-loop .works-loop__header {\r\n align-items: flex-start !important;\r\n justify-content: flex-start !important;\r\n text-align: left !important;\r\n }\r\n\r\n main > .works-loop .works-loop__header .section-title {\r\n text-align: left !important;\r\n }\r\n}\r\n\r\n@media (max-width: 720px) {\r\n main > .grid .clients__label,\r\n main > .works-loop .works-loop__header,\r\n main > .works-loop .works-loop__header .section-title {\r\n text-align: center !important;\r\n }\r\n\r\n main > .works-loop .works-loop__header {\r\n align-items: center !important;\r\n justify-content: center !important;\r\n }\r\n}\r\n\r\n@media (min-width: 721px) {\r\n main > .construction-title {\r\n width: 100% !important;\r\n max-width: none !important;\r\n margin-right: 0 !important;\r\n margin-left: 0 !important;\r\n text-align: left !important;\r\n }\r\n\r\n main > .grid {\r\n width: 100% !important;\r\n max-width: none !important;\r\n margin-right: 0 !important;\r\n margin-left: 0 !important;\r\n align-items: stretch !important;\r\n text-align: left !important;\r\n }\r\n\r\n main > .grid > .hero,\r\n main > .grid > .info {\r\n width: 100% !important;\r\n max-width: none !important;\r\n margin-right: 0 !important;\r\n margin-left: 0 !important;\r\n text-align: left !important;\r\n }\r\n\r\n main > .grid .contact {\r\n width: 100% !important;\r\n max-width: none !important;\r\n margin-right: 0 !important;\r\n margin-left: 0 !important;\r\n text-align: left !important;\r\n }\r\n\r\n main > .grid .intro {\r\n max-width: 560px !important;\r\n margin-right: 0 !important;\r\n margin-left: 0 !important;\r\n text-align: left !important;\r\n }\r\n\r\n main > .grid .socials {\r\n justify-content: flex-start !important;\r\n }\r\n\r\n main > .grid .info {\r\n justify-items: stretch !important;\r\n }\r\n\r\n main > .grid .services {\r\n width: 100% !important;\r\n max-width: none !important;\r\n margin-right: 0 !important;\r\n margin-left: 0 !important;\r\n text-align: left !important;\r\n }\r\n\r\n main > .grid .services .section-title {\r\n text-align: left !important;\r\n }\r\n\r\n main > .grid .services__list {\r\n width: 100% !important;\r\n max-width: none !important;\r\n margin-right: 0 !important;\r\n margin-left: 0 !important;\r\n justify-items: start !important;\r\n }\r\n\r\n main > .grid .service {\r\n justify-content: start !important;\r\n text-align: left !important;\r\n }\r\n}\r\n\r\nmain > .grid .services {\r\n border-top: 1px solid var(--line) !important;\r\n padding-top: 30px !important;\r\n}\r\n\r\n@media (min-width: 721px) {\r\n main > .project-contact .project-contact__layout {\r\n width: 100% !important;\r\n max-width: none !important;\r\n margin: 0 !important;\r\n }\r\n\r\n main > .project-contact .project-contact__intro,\r\n main > .project-contact .project-contact__intro .section-title,\r\n main > .project-contact .project-contact__title,\r\n main > .project-contact .project-contact__copy {\r\n margin-left: 0 !important;\r\n margin-right: 0 !important;\r\n text-align: left !important;\r\n }\r\n}\r\n\r\n.clients__logo--nck img,\r\n.clients__logo--nck svg,\r\n.clients__logo--nck .clients__text-logo,\r\n.clients__logo--btt img,\r\n.clients__logo--btt svg,\r\n.clients__logo--btt .clients__text-logo {\r\n transform: scale(1.50) !important;\r\n}\r\n\r\n@media (max-width: 720px) {\r\n .clients__logo--nck img,\r\n .clients__logo--nck svg,\r\n .clients__logo--nck .clients__text-logo,\r\n .clients__logo--btt img,\r\n .clients__logo--btt svg,\r\n .clients__logo--btt .clients__text-logo {\r\n transform: scale(1.44) !important;\r\n }\r\n}\r\n\r\n@media (max-width: 520px) {\r\n .clients__logo--nck img,\r\n .clients__logo--nck svg,\r\n .clients__logo--nck .clients__text-logo,\r\n .clients__logo--btt img,\r\n .clients__logo--btt svg,\r\n .clients__logo--btt .clients__text-logo {\r\n transform: scale(1.40) !important;\r\n }\r\n}\r\n\r\nmain > .grid .services__accordion {\r\n width: 100%;\r\n margin: 0;\r\n border-bottom: 0;\r\n}\r\n\r\nmain > .grid .service-accordion {\r\n width: 100%;\r\n margin: 0;\r\n border-top: 1px solid var(--line);\r\n}\r\n\r\nmain > .grid .service-accordion:first-child {\r\n border-top: 0;\r\n}\r\n\r\nmain > .grid .service-accordion summary {\r\n position: relative;\r\n display: grid;\r\n grid-template-columns: 34px minmax(0, 1fr) 28px;\r\n align-items: center;\r\n gap: 12px;\r\n min-height: 62px;\r\n margin: 0;\r\n padding: 0;\r\n color: var(--text);\r\n cursor: pointer;\r\n list-style: none;\r\n user-select: none;\r\n}\r\n\r\nmain > .grid .service-accordion summary::-webkit-details-marker {\r\n display: none;\r\n}\r\n\r\nmain > .grid .service-accordion__no {\r\n color: var(--soft);\r\n font-size: 9px;\r\n font-weight: 500;\r\n line-height: 1;\r\n letter-spacing: .08em;\r\n}\r\n\r\nmain > .grid .service-accordion__name {\r\n min-width: 0;\r\n font-size: clamp(14px, 1.1vw, 17px);\r\n font-weight: 400;\r\n line-height: 1.25;\r\n letter-spacing: -.025em;\r\n}\r\n\r\nmain > .grid .service-accordion__toggle {\r\n position: relative;\r\n width: 28px;\r\n height: 28px;\r\n justify-self: end;\r\n}\r\n\r\nmain > .grid .service-accordion__toggle::before,\r\nmain > .grid .service-accordion__toggle::after {\r\n content: \"\";\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n width: 12px;\r\n height: 1px;\r\n background: currentColor;\r\n transform: translate(-50%, -50%);\r\n transition: transform .18s ease, opacity .18s ease;\r\n}\r\n\r\nmain > .grid .service-accordion__toggle::after {\r\n transform: translate(-50%, -50%) rotate(90deg);\r\n}\r\n\r\nmain > .grid .service-accordion[open] .service-accordion__toggle::after {\r\n opacity: 0;\r\n transform: translate(-50%, -50%) rotate(0deg);\r\n}\r\n\r\nmain > .grid .service-accordion__content {\r\n max-width: 620px;\r\n padding: 0 40px 20px 46px;\r\n color: var(--muted);\r\n font-size: 12px;\r\n line-height: 1.65;\r\n letter-spacing: -.005em;\r\n}\r\n\r\n@media (hover: hover) and (pointer: fine) {\r\n main > .grid .service-accordion summary:hover .service-accordion__name {\r\n opacity: .58;\r\n }\r\n}\r\n\r\nmain > .grid .service-accordion summary:focus-visible {\r\n outline: 1px solid currentColor;\r\n outline-offset: 4px;\r\n}\r\n\r\nmain > .project-contact {\r\n padding-left: var(--page-x) !important;\r\n padding-right: var(--page-x) !important;\r\n}\r\n\r\nmain > .project-contact .project-contact__layout {\r\n width: 100% !important;\r\n max-width: none !important;\r\n margin: 0 !important;\r\n}\r\n\r\nmain > .project-contact .project-contact__intro {\r\n justify-self: start !important;\r\n margin: 0 !important;\r\n text-align: left !important;\r\n}\r\n\r\nmain > .project-contact .project-contact__intro .section-title,\r\nmain > .project-contact .project-contact__title,\r\nmain > .project-contact .project-contact__copy {\r\n margin-left: 0 !important;\r\n margin-right: 0 !important;\r\n text-align: left !important;\r\n}\r\n\r\n@media (max-width: 720px) {\r\n main > .grid .service-accordion summary {\r\n grid-template-columns: 28px minmax(0, 1fr) 28px;\r\n min-height: 58px;\r\n text-align: left;\r\n }\r\n\r\n main > .grid .service-accordion__content {\r\n max-width: none;\r\n padding: 0 36px 18px 40px;\r\n text-align: left;\r\n }\r\n\r\n main > .project-contact .project-contact__intro,\r\n main > .project-contact .project-contact__intro .section-title,\r\n main > .project-contact .project-contact__title,\r\n main > .project-contact .project-contact__copy {\r\n margin-left: 0 !important;\r\n margin-right: 0 !important;\r\n text-align: left !important;\r\n }\r\n}\r\n\r\n@media (min-width: 721px) {\r\n main > .grid .services__accordion {\r\n display: grid !important;\r\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\r\n column-gap: clamp(28px, 4vw, 56px) !important;\r\n align-items: start !important;\r\n }\r\n\r\n main > .grid .service-accordion {\r\n min-width: 0 !important;\r\n }\r\n\r\n main > .grid .service-accordion:nth-child(-n + 2) {\r\n border-top: 0 !important;\r\n }\r\n\r\n main > .grid .service-accordion__name {\r\n font-size: clamp(19px, 1.65vw, 24px) !important;\r\n line-height: 1.15 !important;\r\n letter-spacing: -.035em !important;\r\n }\r\n\r\n main > .grid .service-accordion__content {\r\n max-width: none !important;\r\n padding-right: 34px !important;\r\n }\r\n}\r\n\r\n@media (max-width: 720px) {\r\n main > .grid .services__accordion {\r\n display: grid !important;\r\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\r\n column-gap: 18px !important;\r\n row-gap: 0 !important;\r\n align-items: start !important;\r\n }\r\n\r\n main > .grid .service-accordion {\r\n min-width: 0 !important;\r\n }\r\n\r\n main > .grid .service-accordion__name {\r\n font-size: 17px !important;\r\n }\r\n}\r\n\r\nmain > .grid .service-accordion {\r\n border-top: 0 !important;\r\n border-bottom: 0 !important;\r\n}\r\n\r\nmain > .grid .service-accordion summary {\r\n grid-template-columns: minmax(0, 1fr) 28px !important;\r\n}\r\n\r\nmain > .grid .service-accordion__content {\r\n padding-left: 0 !important;\r\n}\r\n\r\n@media (max-width: 720px) {\r\n main > .grid .service-accordion summary {\r\n grid-template-columns: minmax(0, 1fr) 28px !important;\r\n }\r\n\r\n main > .grid .service-accordion__content {\r\n padding-left: 0 !important;\r\n }\r\n}\r\n\r\nmain > .grid .service-accordion summary {\r\n grid-template-columns: minmax(0, 1fr) !important;\r\n cursor: pointer;\r\n}\r\n\r\nmain > .grid .service-accordion__toggle,\r\nmain > .grid .service-accordion__toggle::before,\r\nmain > .grid .service-accordion__toggle::after {\r\n display: none !important;\r\n content: none !important;\r\n}\r\n\r\nmain > .grid .service-accordion__heading {\r\n display: block;\r\n min-height: 0;\r\n margin: 0 0 8px;\r\n padding: 0;\r\n color: var(--text);\r\n cursor: default;\r\n user-select: text;\r\n}\r\n\r\nmain > .grid .service-accordion__content {\r\n display: block !important;\r\n padding-top: 0 !important;\r\n}\r\n\r\n@media (min-width: 721px) {\r\n main > .grid .service-accordion {\r\n padding: 12px 0 18px;\r\n }\r\n}\r\n\r\n@media (max-width: 720px) {\r\n main > .grid .service-accordion {\r\n padding: 10px 0 16px;\r\n }\r\n}\r\n\r\nmain > .grid .service-accordion__heading {\r\n width: 100%;\r\n border: 0;\r\n background: transparent;\r\n font: inherit;\r\n text-align: left;\r\n color: var(--text);\r\n appearance: none;\r\n -webkit-appearance: none;\r\n}\r\n\r\n@media (min-width: 721px) {\r\n main > .grid .service-accordion__heading {\r\n pointer-events: none;\r\n }\r\n\r\n main > .grid .service-accordion__content {\r\n display: block !important;\r\n }\r\n}\r\n\r\n@media (max-width: 720px) {\r\n main > .grid .service-accordion {\r\n padding: 8px 0 10px !important;\r\n }\r\n\r\n main > .grid .service-accordion__heading {\r\n display: flex;\r\n align-items: center;\r\n min-height: 44px;\r\n margin: 0 !important;\r\n padding: 8px 0 !important;\r\n cursor: pointer;\r\n touch-action: manipulation;\r\n }\r\n\r\n main > .grid .service-accordion__heading:focus-visible {\r\n outline: 1px solid currentColor;\r\n outline-offset: 4px;\r\n }\r\n\r\n main > .grid .service-accordion__content {\r\n display: none !important;\r\n padding: 0 0 12px !important;\r\n }\r\n\r\n main > .grid .service-accordion.is-open .service-accordion__content {\r\n display: block !important;\r\n }\r\n}\r\n\r\n.clients__logo--playboy {\r\n --logo-w: 62px !important;\r\n --logo-h: 32px !important;\r\n}\r\n\r\n.clients__logo--bit {\r\n width: 158px !important;\r\n min-width: 158px !important;\r\n --logo-w: 108px !important;\r\n --logo-h: 32px !important;\r\n}\r\n\r\n.clients__logo--medicover {\r\n width: 184px !important;\r\n min-width: 184px !important;\r\n height: 64px !important;\r\n --logo-w: 132px !important;\r\n --logo-h: 38px !important;\r\n}\r\n\r\n@media (max-width: 720px) {\r\n .clients__logo--playboy {\r\n --logo-w: 56px !important;\r\n --logo-h: 29px !important;\r\n }\r\n\r\n .clients__logo--bit {\r\n width: 146px !important;\r\n min-width: 146px !important;\r\n --logo-w: 100px !important;\r\n --logo-h: 30px !important;\r\n }\r\n\r\n .clients__logo--medicover {\r\n width: 160px !important;\r\n min-width: 160px !important;\r\n height: 58px !important;\r\n --logo-w: 122px !important;\r\n --logo-h: 35px !important;\r\n }\r\n}\r\n\r\n@media (max-width: 520px) {\r\n .clients__logo--playboy {\r\n --logo-w: 52px !important;\r\n --logo-h: 27px !important;\r\n }\r\n\r\n .clients__logo--bit {\r\n width: 134px !important;\r\n min-width: 134px !important;\r\n --logo-w: 94px !important;\r\n --logo-h: 28px !important;\r\n }\r\n\r\n .clients__logo--medicover {\r\n width: 154px !important;\r\n min-width: 154px !important;\r\n height: 56px !important;\r\n --logo-w: 116px !important;\r\n --logo-h: 33px !important;\r\n }\r\n}\r\n\r\nbody .websites .website-link--preview {\r\n background: #dce3ec !important;\r\n color: #111 !important;\r\n box-shadow: inset 0 0 0 1px rgba(17, 24, 39, .16);\r\n}\r\n\r\nbody .websites .website-link--preview::before,\r\nbody .websites .website-link--preview::after {\r\n background: #e9edf3 !important;\r\n}\r\n\r\nbody .websites .website-link--preview::before {\r\n top: 48%;\r\n}\r\n\r\nbody .websites .website-link--preview::after {\r\n top: 40%;\r\n height: 14%;\r\n}\r\n\r\nbody .websites .website-link--preview > img.website-link__preview {\r\n position: absolute !important;\r\n z-index: 0 !important;\r\n top: 10px !important;\r\n right: 10px !important;\r\n bottom: auto !important;\r\n left: 10px !important;\r\n display: block !important;\r\n width: calc(100% - 20px) !important;\r\n height: 55% !important;\r\n min-width: 0 !important;\r\n min-height: 0 !important;\r\n max-width: none !important;\r\n max-height: none !important;\r\n margin: 0 !important;\r\n padding: 0 !important;\r\n border: 0 !important;\r\n border-radius: clamp(16px, 2vw, 22px) !important;\r\n object-fit: cover !important;\r\n object-position: 50% 35% !important;\r\n opacity: 1 !important;\r\n filter: none !important;\r\n mix-blend-mode: normal !important;\r\n transform: none !important;\r\n}\r\n\r\nbody .websites .website-link--preview .website-link__number {\r\n top: 54%;\r\n}\r\n\r\nbody .websites .website-link--preview .website-link__arrow {\r\n top: 53.5%;\r\n}\r\n\r\nbody .websites .website-link--preview .website-link__description {\r\n color: #6f747c !important;\r\n}\r\n\r\n @media (max-width: 720px) {\r\n main > .grid .clients__marquee {\r\n cursor: grab;\r\n touch-action: pan-y;\r\n user-select: none;\r\n -webkit-user-select: none;\r\n }\r\n\r\n main > .grid .clients__marquee.is-dragging {\r\n cursor: grabbing;\r\n }\r\n\r\n main > .grid .clients__track {\r\n animation: none !important;\r\n will-change: transform;\r\n }\r\n }\r\n\r\n @media (max-width: 720px) and (prefers-reduced-motion: reduce) {\r\n main > .grid .clients__group[aria-hidden=\"true\"] {\r\n display: flex !important;\r\n }\r\n }\r\n\r\n main > .testimonials {\r\n width: 100%;\r\n margin: clamp(56px, 7vw, 96px) 0 0;\r\n padding-top: 24px;\r\n border-top: 1px solid var(--line);\r\n }\r\n\r\n main > .testimonials .testimonials__header {\r\n margin-bottom: clamp(44px, 6vw, 90px);\r\n }\r\n\r\n main > .testimonials .testimonials__header .section-title {\r\n margin: 0;\r\n text-align: left;\r\n }\r\n\r\n .testimonial-stage {\r\n width: 100%;\r\n min-height: clamp(300px, 32vw, 430px);\r\n display: grid;\r\n place-items: center;\r\n padding: clamp(12px, 2vw, 24px) 0 clamp(24px, 3.5vw, 48px);\r\n text-align: center;\r\n touch-action: pan-y;\r\n }\r\n\r\n .testimonial-stage__inner {\r\n width: min(100%, 920px);\r\n display: grid;\r\n justify-items: center;\r\n gap: 0;\r\n }\r\n.testimonial-quote {\r\n max-width: 820px;\r\n margin: 0;\r\n color: var(--text);\r\n font-family: var(--sans);\r\n font-size: clamp(19px, 1.65vw, 24px);\r\n font-weight: 400;\r\n line-height: 1.42;\r\n letter-spacing: -.025em;\r\n text-wrap: balance;\r\n }\r\n\r\n .testimonial-author {\r\n display: grid;\r\n justify-items: center;\r\n gap: 4px;\r\n margin-top: clamp(24px, 3vw, 34px);\r\n }\r\n\r\n .testimonial-author strong {\r\n color: var(--text);\r\n font-size: 12px;\r\n font-weight: 500;\r\n line-height: 1.3;\r\n letter-spacing: -.012em;\r\n }\r\n\r\n .testimonial-author span {\r\n max-width: 420px;\r\n color: var(--muted);\r\n font-size: 10px;\r\n line-height: 1.45;\r\n letter-spacing: .01em;\r\n }\r\n\r\n .testimonial-mobile-cue {\r\n display: none;\r\n }\r\n\r\n .testimonial-stage {\r\n position: relative;\r\n }\r\n\r\n .testimonial-side-arrow {\r\n position: absolute;\r\n top: 50%;\r\n z-index: 3;\r\n width: 48px;\r\n height: 48px;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n border: 1px solid var(--line);\r\n border-radius: 50%;\r\n background: transparent;\r\n color: var(--text);\r\n font-family: var(--sans);\r\n font-size: 20px;\r\n line-height: 1;\r\n cursor: pointer;\r\n transform: translateY(-50%);\r\n transition:\r\n background-color .16s ease,\r\n border-color .16s ease,\r\n color .16s ease,\r\n transform .16s ease;\r\n }\r\n\r\n .testimonial-side-arrow--prev {\r\n left: 0;\r\n }\r\n\r\n .testimonial-side-arrow--next {\r\n right: 0;\r\n }\r\n\r\n .testimonial-side-arrow:hover,\r\n .testimonial-side-arrow:focus-visible {\r\n border-color: var(--text);\r\n background: var(--text);\r\n color: var(--bg);\r\n outline: none;\r\n }\r\n\r\n .testimonial-side-arrow:active {\r\n transform: translateY(-50%) scale(.96);\r\n }\r\n\r\n .testimonial-stage.is-changing .testimonial-quote,\r\n .testimonial-stage.is-changing .testimonial-author {\r\n opacity: .16;\r\n transform: translateY(4px);\r\n filter: blur(5px);\r\n }\r\n\r\n .testimonial-quote,\r\n .testimonial-author {\r\n transition:\r\n opacity .15s ease,\r\n transform .22s ease,\r\n filter .22s ease;\r\n }\r\n\r\n @media (max-width: 720px) {\r\n .testimonial-side-arrow {\r\n display: none;\r\n }\r\n\r\n main > .testimonials {\r\n width: 100vw;\r\n margin-top: 52px;\r\n margin-right: calc(50% - 50vw);\r\n margin-left: calc(50% - 50vw);\r\n padding-top: 24px;\r\n }\r\n\r\n main > .testimonials .testimonials__header {\r\n margin-bottom: 40px;\r\n }\r\n\r\n main > .testimonials .testimonials__header .section-title {\r\n text-align: center;\r\n }\r\n\r\n .testimonial-stage {\r\n min-height: 300px;\r\n padding: 4px 0 30px;\r\n }\r\n\r\n .testimonial-stage__inner {\r\n width: 100%;\r\n }\r\n.testimonial-quote {\r\n max-width: 620px;\r\n font-size: 17px;\r\n line-height: 1.5;\r\n letter-spacing: -.02em;\r\n }\r\n\r\n .testimonial-author {\r\n margin-top: 28px;\r\n }\r\n\r\n .testimonial-author span {\r\n max-width: 290px;\r\n }\r\n\r\n .testimonial-mobile-cue {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 10px;\r\n margin-top: 22px;\r\n color: var(--soft);\r\n font-size: 8px;\r\n font-weight: 500;\r\n line-height: 1;\r\n letter-spacing: .14em;\r\n text-transform: uppercase;\r\n user-select: none;\r\n pointer-events: none;\r\n }\r\n\r\n .testimonial-mobile-cue__dots {\r\n display: flex;\r\n align-items: center;\r\n gap: 5px;\r\n }\r\n\r\n .testimonial-mobile-cue__dot {\r\n width: 4px;\r\n height: 4px;\r\n border-radius: 50%;\r\n background: currentColor;\r\n opacity: .32;\r\n transition: width .18s ease, opacity .18s ease;\r\n }\r\n\r\n .testimonial-mobile-cue__dot.is-active {\r\n width: 13px;\r\n border-radius: 999px;\r\n opacity: .9;\r\n }\r\n\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n .testimonial-quote,\r\n .testimonial-author {\r\n transition: none;\r\n }\r\n }\r\n\r\n .clients__logo--arp {\r\n width: 178px !important;\r\n min-width: 178px !important;\r\n height: 74px !important;\r\n --logo-w: 154px;\r\n --logo-h: 48px;\r\n }\r\n\r\n .clients__logo--nck {\r\n width: 198px !important;\r\n min-width: 198px !important;\r\n height: 82px !important;\r\n --logo-w: 172px;\r\n --logo-h: 58px;\r\n }\r\n\r\n .clients__logo--bok {\r\n width: 158px !important;\r\n min-width: 158px !important;\r\n height: 72px !important;\r\n --logo-w: 136px;\r\n --logo-h: 46px;\r\n }\r\n\r\n .clients__logo--arp img,\r\n .clients__logo--arp svg,\r\n .clients__logo--arp .clients__text-logo,\r\n .clients__logo--bok img,\r\n .clients__logo--bok svg,\r\n .clients__logo--bok .clients__text-logo {\r\n transform: scale(1.54) !important;\r\n transform-origin: center center !important;\r\n }\r\n\r\n .clients__logo--nck img,\r\n .clients__logo--nck svg,\r\n .clients__logo--nck .clients__text-logo {\r\n transform: scale(1.62) !important;\r\n transform-origin: center center !important;\r\n }\r\n\r\n .clients__group {\r\n min-height: 92px;\r\n }\r\n\r\n @media (max-width: 720px) {\r\n .clients__logo--arp {\r\n width: 154px !important;\r\n min-width: 154px !important;\r\n height: 66px !important;\r\n --logo-w: 136px;\r\n --logo-h: 43px;\r\n }\r\n\r\n .clients__logo--nck {\r\n width: 174px !important;\r\n min-width: 174px !important;\r\n height: 74px !important;\r\n --logo-w: 154px;\r\n --logo-h: 52px;\r\n }\r\n\r\n .clients__logo--bok {\r\n width: 140px !important;\r\n min-width: 140px !important;\r\n height: 64px !important;\r\n --logo-w: 122px;\r\n --logo-h: 41px;\r\n }\r\n\r\n .clients__logo--arp img,\r\n .clients__logo--arp svg,\r\n .clients__logo--arp .clients__text-logo,\r\n .clients__logo--bok img,\r\n .clients__logo--bok svg,\r\n .clients__logo--bok .clients__text-logo {\r\n transform: scale(1.46) !important;\r\n }\r\n\r\n .clients__logo--nck img,\r\n .clients__logo--nck svg,\r\n .clients__logo--nck .clients__text-logo {\r\n transform: scale(1.54) !important;\r\n }\r\n\r\n .clients__group {\r\n min-height: 82px;\r\n }\r\n }\r\n\r\n @media (max-width: 520px) {\r\n .clients__logo--arp {\r\n width: 146px !important;\r\n min-width: 146px !important;\r\n }\r\n\r\n .clients__logo--nck {\r\n width: 164px !important;\r\n min-width: 164px !important;\r\n }\r\n\r\n .clients__logo--bok {\r\n width: 132px !important;\r\n min-width: 132px !important;\r\n }\r\n }\r\n\r\n .clients__logo--nck {\r\n height: 98px !important;\r\n }\r\n\r\n .clients__group {\r\n min-height: 116px !important;\r\n }\r\n\r\n @media (max-width: 720px) {\r\n .clients__logo--nck {\r\n height: 88px !important;\r\n }\r\n\r\n .clients__group {\r\n min-height: 104px !important;\r\n }\r\n }\r\n\r\n @media (max-width: 520px) {\r\n .clients__logo--nck {\r\n height: 86px !important;\r\n }\r\n\r\n .clients__group {\r\n min-height: 100px !important;\r\n }\r\n }\r\n\r\nbody .websites .website-link {\r\n background: #e4e4e4 !important;\r\n color: var(--text) !important;\r\n}\r\n\r\nbody .websites .website-link--preview {\r\n box-shadow: none !important;\r\n border: 0 !important;\r\n}\r\n\r\nbody .websites .website-link::before,\r\nbody .websites .website-link::after {\r\n background: #eeeeee !important;\r\n}\r\n\r\nbody .websites .website-link__description {\r\n color: var(--muted) !important;\r\n}\r\n\r\nbody .websites .website-link--preview::before {\r\n z-index: 2 !important;\r\n top: 24% !important;\r\n bottom: 0 !important;\r\n border-radius: clamp(22px, 2.5vw, 30px) !important;\r\n}\r\n\r\nbody .websites .website-link--preview::after {\r\n z-index: 2 !important;\r\n left: 0 !important;\r\n top: 15% !important;\r\n width: 48% !important;\r\n height: 15% !important;\r\n border-radius: clamp(22px, 2.5vw, 30px) clamp(22px, 2.5vw, 30px) clamp(26px, 2.8vw, 34px) 0 !important;\r\n}\r\n\r\nbody .websites .website-link--preview .website-link__number {\r\n top: 29% !important;\r\n z-index: 3 !important;\r\n}\r\n\r\nbody .websites .website-link--preview .website-link__arrow {\r\n top: 28.5% !important;\r\n z-index: 3 !important;\r\n}\r\n\r\nbody .websites .website-link--preview .website-link__content {\r\n z-index: 3 !important;\r\n opacity: 1 !important;\r\n transform: translateY(0) !important;\r\n transition: opacity .24s ease, transform .42s cubic-bezier(.22,.78,.2,1) !important;\r\n}\r\n\r\nbody .websites .website-link:hover .website-link__content,\r\nbody .websites .website-link:focus-visible .website-link__content {\r\n opacity: 1 !important;\r\n transform: translateY(0) !important;\r\n}\r\n\r\nbody .websites .website-link--preview > img.website-link__preview {\r\n position: absolute !important;\r\n z-index: 1 !important;\r\n top: auto !important;\r\n right: 1px !important;\r\n\r\n bottom: -10px !important;\r\n left: 1px !important;\r\n display: block !important;\r\n width: calc(100% - 2px) !important;\r\n height: calc(100% + 10px) !important;\r\n min-width: 0 !important;\r\n min-height: 0 !important;\r\n max-width: none !important;\r\n max-height: none !important;\r\n margin: 0 !important;\r\n padding: 0 !important;\r\n border: 0 !important;\r\n border-radius: inherit !important;\r\n object-fit: cover !important;\r\n object-position: 50% 34% !important;\r\n opacity: 1 !important;\r\n filter: none !important;\r\n mix-blend-mode: normal !important;\r\n\r\n clip-path: none !important;\r\n -webkit-clip-path: none !important;\r\n transform: translate3d(0, 0, 0) scale(1.01) !important;\r\n transform-origin: center bottom !important;\r\n transition: transform .62s cubic-bezier(.22,.78,.2,1) !important;\r\n pointer-events: none !important;\r\n}\r\n\r\nbody .websites .website-link--preview:hover::before,\r\nbody .websites .website-link--preview:focus-visible::before {\r\n top: 58% !important;\r\n}\r\n\r\nbody .websites .website-link--preview:hover::after,\r\nbody .websites .website-link--preview:focus-visible::after {\r\n top: 50% !important;\r\n}\r\n\r\nbody .websites .website-link--preview:hover .website-link__number,\r\nbody .websites .website-link--preview:focus-visible .website-link__number {\r\n top: 61% !important;\r\n}\r\n\r\nbody .websites .website-link--preview:hover .website-link__arrow,\r\nbody .websites .website-link--preview:focus-visible .website-link__arrow {\r\n top: 60% !important;\r\n transform: translate(3px, -3px) !important;\r\n}\r\n\r\nbody .websites .website-link--preview:hover > img.website-link__preview,\r\nbody .websites .website-link--preview:focus-visible > img.website-link__preview {\r\n transform: translate3d(0, -10px, 0) scale(1.01) !important;\r\n}\r\n\r\nbody .websites .website-link {\r\n --website-card-text-x: clamp(20px, 2.4vw, 28px);\r\n}\r\n\r\nbody .websites .website-link .website-link__number {\r\n left: var(--website-card-text-x) !important;\r\n text-align: left !important;\r\n transition: top .62s cubic-bezier(.22,.78,.2,1), transform .32s ease !important;\r\n}\r\n\r\nbody .websites .website-link .website-link__content {\r\n left: var(--website-card-text-x) !important;\r\n right: var(--website-card-text-x) !important;\r\n text-align: left !important;\r\n}\r\n\r\nbody .websites .website-link .website-link__name,\r\nbody .websites .website-link .website-link__description {\r\n text-align: left !important;\r\n}\r\n\r\nbody .websites .website-link:hover .website-link__number,\r\nbody .websites .website-link:focus-visible .website-link__number {\r\n transform: translateY(-14px) !important;\r\n}\r\n\r\n@media (max-width: 420px) {\r\n body .websites .website-link {\r\n --website-card-text-x: 20px;\r\n }\r\n\r\n body .websites .website-link:hover .website-link__number,\r\n body .websites .website-link:focus-visible .website-link__number {\r\n transform: translateY(-10px) !important;\r\n }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n body .websites .website-link--preview > img.website-link__preview {\r\n transition: none !important;\r\n }\r\n}\r\n\r\nbody .websites .website-link::before,\r\nbody .websites .website-link--preview::before {\r\n left: 0 !important;\r\n border-radius: 10px 10px 4px 4px !important;\r\n}\r\n\r\nbody .websites .website-link::after,\r\nbody .websites .website-link--preview::after {\r\n content: none !important;\r\n display: none !important;\r\n}\r\n\r\nbody .websites .website-link__front-tab {\r\n position: absolute !important;\r\n z-index: 2 !important;\r\n left: 0 !important;\r\n top: 15% !important;\r\n width: 58% !important;\r\n height: 17% !important;\r\n display: block !important;\r\n overflow: visible !important;\r\n pointer-events: none !important;\r\n transform: none !important;\r\n backface-visibility: visible !important;\r\n will-change: auto !important;\r\n transition: top .62s cubic-bezier(.22,.78,.2,1) !important;\r\n shape-rendering: auto !important;\r\n}\r\n\r\nbody .websites .website-link__front-tab path {\r\n fill: #eeeeee !important;\r\n stroke: none !important;\r\n shape-rendering: auto !important;\r\n}\r\n\r\nbody .websites .website-link:hover .website-link__front-tab,\r\nbody .websites .website-link:focus-visible .website-link__front-tab {\r\n top: 50% !important;\r\n}\r\n\r\n@media (max-width: 520px) {\r\n body .websites .website-link::before,\r\n body .websites .website-link--preview::before {\r\n border-radius: 8px 8px 3px 3px !important;\r\n }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n body .websites .website-link__front-tab {\r\n transition: none !important;\r\n }\r\n}\r\n\r\nbody .websites .website-link__arrow {\r\n color: var(--text) !important;\r\n font-size: 0 !important;\r\n -webkit-text-fill-color: currentColor !important;\r\n}\r\n\r\nbody .websites .website-link__arrow svg {\r\n display: block !important;\r\n width: 24px !important;\r\n height: 24px !important;\r\n overflow: visible !important;\r\n fill: none !important;\r\n stroke: currentColor !important;\r\n stroke-width: 1.45 !important;\r\n stroke-linecap: square !important;\r\n stroke-linejoin: miter !important;\r\n pointer-events: none !important;\r\n}\r\n\r\nbody .websites .website-link::before,\r\nbody .websites .website-link--preview::before {\r\n background: transparent !important;\r\n -webkit-backdrop-filter: none !important;\r\n backdrop-filter: none !important;\r\n}\r\n\r\nbody .websites .website-link__front-tab {\r\n opacity: 0 !important;\r\n}\r\n\r\nbody .websites .website-link__front-tab path {\r\n fill: transparent !important;\r\n}\r\n\r\nbody .websites .website-link__number,\r\nbody .websites .website-link__content,\r\nbody .websites .website-link__arrow {\r\n z-index: 3 !important;\r\n}\r\n\r\nbody .websites .website-link::after,\r\nbody .websites .website-link--preview::after {\r\n content: \"\" !important;\r\n position: absolute !important;\r\n z-index: 2 !important;\r\n inset: 0 !important;\r\n top: 0 !important;\r\n right: 0 !important;\r\n bottom: 0 !important;\r\n left: 0 !important;\r\n width: 100% !important;\r\n height: 100% !important;\r\n display: block !important;\r\n border: 0 !important;\r\n border-radius: 0 !important;\r\n background: rgba(238, 238, 238, .62) !important;\r\n -webkit-backdrop-filter: blur(18px) saturate(1.18) !important;\r\n backdrop-filter: blur(18px) saturate(1.18) !important;\r\n\r\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;\r\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;\r\n -webkit-mask-repeat: no-repeat !important;\r\n mask-repeat: no-repeat !important;\r\n -webkit-mask-position: 0 0 !important;\r\n mask-position: 0 0 !important;\r\n -webkit-mask-size: 100% 100% !important;\r\n mask-size: 100% 100% !important;\r\n\r\n pointer-events: none !important;\r\n transform: translate3d(0, 0, 0) !important;\r\n transform-origin: top left !important;\r\n transition: transform .62s cubic-bezier(.22,.78,.2,1) !important;\r\n}\r\n\r\nbody .websites .website-link:hover::after,\r\nbody .websites .website-link:focus-visible::after {\r\n\r\n top: 0 !important;\r\n right: 0 !important;\r\n bottom: 0 !important;\r\n left: 0 !important;\r\n transform: translate3d(0, 34%, 0) !important;\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n body .websites .website-link::after,\r\n body .websites .website-link--preview::after {\r\n transition: none !important;\r\n }\r\n}\r\n\r\n@media (max-width: 720px) {\r\n main > .testimonials .testimonials__header {\r\n margin-bottom: 28px !important;\r\n }\r\n\r\n .testimonial-stage {\r\n min-height: 240px !important;\r\n padding: 2px 20px 24px !important;\r\n }\r\n\r\n .testimonial-stage__inner {\r\n width: min(100%, 520px) !important;\r\n }\r\n\r\n .testimonial-quote {\r\n max-width: 520px !important;\r\n font-size: 15px !important;\r\n line-height: 1.48 !important;\r\n letter-spacing: -.018em !important;\r\n text-wrap: pretty !important;\r\n }\r\n\r\n .testimonial-author {\r\n gap: 3px !important;\r\n margin-top: 20px !important;\r\n }\r\n\r\n .testimonial-author strong {\r\n font-size: 11px !important;\r\n }\r\n\r\n .testimonial-author span {\r\n max-width: 270px !important;\r\n font-size: 9px !important;\r\n line-height: 1.4 !important;\r\n }\r\n\r\n .testimonial-mobile-cue {\r\n gap: 8px !important;\r\n margin-top: 16px !important;\r\n font-size: 7px !important;\r\n }\r\n}\r\n\r\n@media (max-width: 420px) {\r\n .testimonial-stage {\r\n min-height: 220px !important;\r\n padding-right: 18px !important;\r\n padding-left: 18px !important;\r\n }\r\n\r\n .testimonial-quote {\r\n font-size: 14px !important;\r\n line-height: 1.46 !important;\r\n }\r\n\r\n .testimonial-author {\r\n margin-top: 18px !important;\r\n }\r\n}\r\n\r\nbody .websites .website-link--preview {\r\n overflow: hidden !important;\r\n -webkit-clip-path: inset(0 round clamp(22px, 2.5vw, 30px)) !important;\r\n clip-path: inset(0 round clamp(22px, 2.5vw, 30px)) !important;\r\n}\r\n\r\nbody .websites .website-link--preview > img.website-link__preview {\r\n position: absolute !important;\r\n z-index: 1 !important;\r\n inset: 0 !important;\r\n top: 0 !important;\r\n right: 0 !important;\r\n bottom: 0 !important;\r\n left: 0 !important;\r\n width: 100% !important;\r\n height: 100% !important;\r\n min-width: 100% !important;\r\n min-height: 100% !important;\r\n max-width: none !important;\r\n max-height: none !important;\r\n margin: 0 !important;\r\n padding: 0 !important;\r\n border: 0 !important;\r\n border-radius: 0 !important;\r\n object-fit: cover !important;\r\n\r\n object-position: 50% 34% !important;\r\n\r\n -webkit-clip-path: none !important;\r\n clip-path: none !important;\r\n transform: none !important;\r\n transform-origin: center center !important;\r\n will-change: object-position !important;\r\n transition: object-position .62s cubic-bezier(.22,.78,.2,1) !important;\r\n pointer-events: none !important;\r\n}\r\n\r\nbody .websites .website-link--preview:hover > img.website-link__preview,\r\nbody .websites .website-link--preview:focus-visible > img.website-link__preview {\r\n inset: 0 !important;\r\n top: 0 !important;\r\n right: 0 !important;\r\n bottom: 0 !important;\r\n left: 0 !important;\r\n transform: none !important;\r\n object-position: 50% calc(34% - 10px) !important;\r\n}\r\n\r\nbody .websites .website-link--preview::after {\r\n box-shadow: none !important;\r\n outline: 0 !important;\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n body .websites .website-link--preview > img.website-link__preview {\r\n transition: none !important;\r\n }\r\n}\r\n\r\n\r\n\/* Client logo carousel: native swipe + desktop arrows *\/\r\n.clients__header {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 16px;\r\n margin-bottom: 24px;\r\n}\r\n\r\n.clients__header .clients__label {\r\n margin: 0 !important;\r\n}\r\n\r\n.clients__controls {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n flex: 0 0 auto;\r\n}\r\n\r\n.clients__arrow {\r\n appearance: none;\r\n -webkit-appearance: none;\r\n width: 36px;\r\n height: 36px;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n border: 1px solid var(--line);\r\n border-radius: 50%;\r\n background: transparent;\r\n color: var(--text);\r\n font-family: var(--sans);\r\n font-size: 16px;\r\n line-height: 1;\r\n cursor: pointer;\r\n transition: border-color .16s ease, background-color .16s ease, color .16s ease;\r\n}\r\n\r\n.clients__arrow:hover,\r\n.clients__arrow:focus-visible {\r\n border-color: var(--text);\r\n background: var(--text);\r\n color: var(--bg);\r\n outline: none;\r\n}\r\n\r\nmain > .grid .clients__marquee {\r\n overflow: hidden !important;\r\n overscroll-behavior-inline: contain;\r\n touch-action: pan-y !important;\r\n cursor: default !important;\r\n}\r\n\r\n\/* Keep autoplay on the compositor. JS only changes animation time for swipe\/arrows. *\/\r\nmain > .grid .clients__track {\r\n transform: translate3d(0, 0, 0);\r\n will-change: transform !important;\r\n backface-visibility: hidden;\r\n -webkit-backface-visibility: hidden;\r\n}\r\n\r\nmain > .grid .clients.is-logo-carousel-enhanced .clients__track {\r\n animation: none !important;\r\n}\r\n\r\n.clients__logo--iratcr {\r\n width: 142px !important;\r\n min-width: 142px !important;\r\n --logo-w: 126px;\r\n --logo-h: 36px;\r\n}\r\n\r\n.clients__logo--iratcr img {\r\n object-fit: cover !important;\r\n object-position: center center !important;\r\n filter: grayscale(1) saturate(0) brightness(.48) contrast(1.08) !important;\r\n opacity: .62 !important;\r\n}\r\n\r\n.clients__logo--adventure-lab {\r\n width: 142px !important;\r\n min-width: 142px !important;\r\n --logo-w: 126px;\r\n --logo-h: 38px;\r\n}\r\n\r\n@media (max-width: 900px) and (min-width: 721px) {\r\n .clients__header {\r\n position: relative;\r\n justify-content: center;\r\n }\r\n\r\n .clients__controls {\r\n position: absolute;\r\n right: 0;\r\n }\r\n}\r\n\r\n@media (max-width: 720px) {\r\n .clients__header {\r\n justify-content: center;\r\n }\r\n\r\n .clients__controls {\r\n display: none;\r\n }\r\n\r\n main > .grid .clients__marquee {\r\n cursor: grab !important;\r\n }\r\n\r\n main > .grid .clients__marquee:active {\r\n cursor: grabbing !important;\r\n }\r\n\r\n .clients__logo--iratcr,\r\n .clients__logo--adventure-lab {\r\n width: 124px !important;\r\n min-width: 124px !important;\r\n --logo-w: 110px;\r\n --logo-h: 34px;\r\n }\r\n}\r\n\r\n@media (max-width: 520px) {\r\n .clients__logo--iratcr,\r\n .clients__logo--adventure-lab {\r\n width: 112px !important;\r\n min-width: 112px !important;\r\n --logo-w: 100px;\r\n --logo-h: 31px;\r\n }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n .clients__controls {\r\n display: none !important;\r\n }\r\n}\r\n\r\n\r\n\r\n\/* Animated construction title \u2014 matched to the existing editorial design *\/\r\nmain > .construction-title--animated {\r\n --construction-ink: var(--text);\r\n overflow: visible !important;\r\n text-wrap: balance;\r\n}\r\n\r\nmain > .construction-title--animated .construction-word {\r\n display: inline-block !important;\r\n white-space: nowrap;\r\n font-family: var(--serif) !important;\r\n font-weight: 400 !important;\r\n line-height: inherit;\r\n \/* A touch more breathing room gives animated glyphs their own visual slot. *\/\r\n letter-spacing: -.025em !important;\r\n}\r\n\r\nmain > .construction-title--animated .construction-word--roman {\r\n font-style: normal !important;\r\n}\r\n\r\nmain > .construction-title--animated .construction-word--italic {\r\n font-style: italic !important;\r\n letter-spacing: -.03em !important;\r\n}\r\n\r\nmain > .construction-title--animated .construction-space {\r\n display: inline-block !important;\r\n width: .18em;\r\n font-size: inherit;\r\n font-style: normal !important;\r\n}\r\n\r\nmain > .construction-title--animated .construction-letter {\r\n --letter-x: 0em;\r\n --letter-y: 0em;\r\n --letter-r: 0deg;\r\n\r\n display: inline-block;\r\n position: relative;\r\n \/* Reserve a tiny safety gutter around every glyph. The movement is still\r\n strong, but adjacent letters do not visually collide. *\/\r\n margin: 0 .03em;\r\n padding: 0;\r\n color: var(--construction-ink);\r\n font: inherit;\r\n font-weight: inherit;\r\n line-height: inherit;\r\n letter-spacing: 0;\r\n -webkit-text-stroke: 0 transparent !important;\r\n transform: translate3d(var(--letter-x), var(--letter-y), 0) rotate(var(--letter-r));\r\n transform-origin: 50% 58%;\r\n transition: transform 720ms cubic-bezier(.16,.84,.22,1);\r\n will-change: transform;\r\n text-align: center;\r\n}\r\n\r\nmain > .construction-title--animated:hover .construction-letter {\r\n transition-duration: 540ms;\r\n}\r\n\r\n@media (max-width: 720px) {\r\n main > .construction-title--animated .construction-space {\r\n width: .14em;\r\n }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n main > .construction-title--animated .construction-letter {\r\n color: var(--construction-ink) !important;\r\n -webkit-text-stroke: 0 transparent !important;\r\n transform: none !important;\r\n transition: none !important;\r\n }\r\n}\r\n\r\n\r\n\/* Fluid type-collage morph: two glyph faces occupy one fixed slot and\r\n dissolve into each other. The parent itself still only translates\/rotates. *\/\r\n.construction-letter {\r\n overflow: visible;\r\n isolation: isolate;\r\n}\r\n\r\n.construction-letter__measure {\r\n display: inline-block;\r\n visibility: hidden;\r\n pointer-events: none;\r\n font-family: Georgia, \"Times New Roman\", Times, serif;\r\n font: inherit;\r\n line-height: inherit;\r\n}\r\n\r\n.construction-letter__face {\r\n position: absolute;\r\n margin: 0;\r\n padding: 0;\r\n border: 0;\r\n text-decoration: none;\r\n inset: 0;\r\n display: flex;\r\n align-items: baseline;\r\n justify-content: center;\r\n color: inherit;\r\n line-height: inherit;\r\n letter-spacing: 0 !important;\r\n white-space: nowrap;\r\n pointer-events: none;\r\n font-size: 1em !important;\r\n\r\n opacity: 0;\r\n filter: blur(5px);\r\n transform: translateZ(0);\r\n transition:\r\n opacity 760ms cubic-bezier(.22,.61,.36,1),\r\n filter 760ms cubic-bezier(.22,.61,.36,1);\r\n will-change: opacity, filter;\r\n}\r\n\r\n.construction-letter__face.is-visible {\r\n opacity: 1;\r\n filter: blur(0);\r\n}\r\n\r\nmain > .construction-title--animated:hover .construction-letter__face {\r\n transition-duration: 760ms;\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n .construction-letter__face {\r\n transition: none !important;\r\n filter: none !important;\r\n }\r\n}\r\n\r\n\r\n\/* --- final tuning: no blur, stable font morph, hero only centered --- *\/\r\n\r\n\/* No blur at any point in the font morph. *\/\r\nmain > .construction-title--animated .construction-letter__face {\r\n filter: none !important;\r\n transition: opacity 620ms cubic-bezier(.22,.61,.36,1) !important;\r\n will-change: opacity !important;\r\n}\r\n\r\n\/* Keep every glyph inside a fixed line box so changing font metrics\r\n cannot change the title height or move the rest of the page. *\/\r\nmain > .construction-title--animated .construction-letter {\r\n line-height: 1em !important;\r\n height: 1em !important;\r\n vertical-align: baseline !important;\r\n}\r\n\r\nmain > .construction-title--animated .construction-letter__measure,\r\nmain > .construction-title--animated .construction-letter__face {\r\n line-height: 1em !important;\r\n height: 1em !important;\r\n}\r\n\r\n\/* Center ONLY the hero block. No selectors below touch .info,\r\n services, clients, works, testimonials or contact sections. *\/\r\nmain > .grid > .hero {\r\n margin-inline: auto !important;\r\n align-self: center !important;\r\n justify-self: center !important;\r\n text-align: center !important;\r\n}\r\n\r\nmain > .grid > .hero .contact {\r\n margin-inline: auto !important;\r\n}\r\n\r\nmain > .grid > .hero .socials {\r\n justify-content: center !important;\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n main > .construction-title--animated .construction-letter__face {\r\n transition: none !important;\r\n }\r\n}\r\n\r\n\r\n\/* =========================================================\r\n FINAL HERO \/ TYPEWRITER INTERACTION\r\n ========================================================= *\/\r\n\r\n\/* Entire hero = title + supporting copy + social icons. *\/\r\nmain > .construction-hero {\r\n width: min(100%, 1040px);\r\n margin: 0 auto clamp(54px, 7vw, 92px);\r\n padding-inline: clamp(2px, 1vw, 12px);\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n text-align: center;\r\n overflow: visible;\r\n}\r\n\r\nmain > .construction-hero > .construction-title {\r\n width: 100%;\r\n max-width: 100%;\r\n margin: 0 auto;\r\n text-align: center;\r\n overflow: visible !important;\r\n}\r\n\r\nmain > .construction-hero > .contact {\r\n width: min(100%, 340px);\r\n margin: clamp(34px, 4.5vw, 58px) auto 0 !important;\r\n padding-top: 0 !important;\r\n text-align: center;\r\n}\r\n\r\nmain > .construction-hero > .contact .intro {\r\n margin-left: auto;\r\n margin-right: auto;\r\n}\r\n\r\nmain > .construction-hero > .contact .socials {\r\n justify-content: center !important;\r\n}\r\n\r\n\/* The original left hero column is gone. Keep the rest of the desktop\r\n layout aligned to its original right-hand column. *\/\r\nmain > .grid > .info {\r\n grid-column: 2;\r\n}\r\n\r\n\/* Title is completely normal before interaction. *\/\r\nmain > .construction-hero .construction-title--animated {\r\n cursor: default;\r\n user-select: none;\r\n -webkit-user-select: none;\r\n touch-action: manipulation;\r\n text-wrap: balance;\r\n overflow: visible !important;\r\n}\r\n\r\nmain > .construction-hero .construction-word {\r\n display: inline-block !important;\r\n white-space: nowrap;\r\n overflow: visible;\r\n}\r\n\r\n\/* Every letter keeps a stable base-font slot. The visible font sits\r\n absolutely on top, so changing typeface never reflows the page. *\/\r\nmain > .construction-hero .construction-letter {\r\n --letter-x: 0em;\r\n --letter-y: 0em;\r\n --letter-r: 0deg;\r\n\r\n position: relative !important;\r\n display: inline-block !important;\r\n width: auto;\r\n height: 1em !important;\r\n margin: 0 .022em !important;\r\n padding: 0 !important;\r\n line-height: 1em !important;\r\n vertical-align: baseline !important;\r\n overflow: visible !important;\r\n\r\n transform:\r\n translate3d(var(--letter-x), var(--letter-y), 0)\r\n rotate(var(--letter-r)) !important;\r\n transform-origin: 50% 58%;\r\n transition: transform 240ms steps(3, end) !important;\r\n}\r\n\r\nmain > .construction-hero .construction-letter__measure {\r\n position: relative;\r\n display: inline-block !important;\r\n visibility: hidden !important;\r\n pointer-events: none;\r\n white-space: pre;\r\n font-family: Georgia, \"Times New Roman\", Times, serif !important;\r\n font-weight: 400 !important;\r\n font-style: inherit !important;\r\n font-size: 1em !important;\r\n line-height: 1em !important;\r\n letter-spacing: 0 !important;\r\n}\r\n\r\n\/* One visible glyph only. No blur and no crossfade. *\/\r\nmain > .construction-hero .construction-letter__face {\r\n position: absolute !important;\r\n inset: 0 !important;\r\n display: flex !important;\r\n align-items: baseline;\r\n justify-content: center;\r\n margin: 0 !important;\r\n padding: 0 !important;\r\n border: 0 !important;\r\n opacity: 1 !important;\r\n filter: none !important;\r\n transition: none !important;\r\n animation: none;\r\n white-space: nowrap;\r\n pointer-events: none;\r\n color: inherit !important;\r\n line-height: 1em !important;\r\n letter-spacing: 0 !important;\r\n}\r\n\r\n\/* Mechanical typewriter strike: disappear for one \"key hit\", switch face,\r\n then snap back. No scaling, no skew, no blur. *\/\r\n@keyframes constructionTypeStrike {\r\n 0% { transform: translateY(0); opacity: 1; }\r\n 45% { transform: translateY(.075em); opacity: 0; }\r\n 55% { transform: translateY(-.045em); opacity: 0; }\r\n 100% { transform: translateY(0); opacity: 1; }\r\n}\r\n\r\nmain > .construction-hero .construction-letter.is-typing .construction-letter__face {\r\n animation: constructionTypeStrike 135ms steps(2, end) both !important;\r\n}\r\n\r\n\/* Fine pointer: hover is the interaction. *\/\r\n@media (hover: hover) and (pointer: fine) {\r\n main > .construction-hero .construction-title--animated {\r\n cursor: crosshair;\r\n }\r\n}\r\n\r\n\/* Touch: tap toggles the effect. *\/\r\n@media (hover: none), (pointer: coarse) {\r\n main > .construction-hero .construction-title--animated {\r\n cursor: pointer;\r\n -webkit-tap-highlight-color: transparent;\r\n }\r\n}\r\n\r\n\/* Mobile: protect the long word from clipping. *\/\r\n@media (max-width: 900px) {\r\n main > .grid > .info {\r\n grid-column: 1;\r\n }\r\n\r\n main > .construction-hero {\r\n width: 100%;\r\n margin-bottom: clamp(48px, 10vw, 72px);\r\n padding-inline: 0;\r\n }\r\n}\r\n\r\n@media (max-width: 720px) {\r\n main > .construction-hero > .construction-title {\r\n width: calc(100vw - (var(--page-x) * 2));\r\n max-width: 100%;\r\n padding-inline: 1px;\r\n font-size: clamp(40px, 12.6vw, 58px) !important;\r\n line-height: 1.02 !important;\r\n letter-spacing: -.055em !important;\r\n }\r\n\r\n main > .construction-hero .construction-word {\r\n max-width: 100%;\r\n }\r\n\r\n main > .construction-hero .construction-word--roman,\r\n main > .construction-hero .construction-word--italic {\r\n letter-spacing: -.018em !important;\r\n }\r\n\r\n main > .construction-hero .construction-letter {\r\n margin-inline: .012em !important;\r\n }\r\n\r\n main > .construction-hero > .contact {\r\n margin-top: 32px !important;\r\n }\r\n}\r\n\r\n@media (max-width: 420px) {\r\n main > .construction-hero > .construction-title {\r\n font-size: clamp(38px, 11.7vw, 49px) !important;\r\n line-height: 1.04 !important;\r\n }\r\n\r\n main > .construction-hero .construction-space {\r\n width: .11em !important;\r\n }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n main > .construction-hero .construction-letter {\r\n transform: none !important;\r\n transition: none !important;\r\n }\r\n\r\n main > .construction-hero .construction-letter.is-typing .construction-letter__face {\r\n animation: none !important;\r\n }\r\n}\r\n\r\n\r\n\/* =========================================================\r\n PATCH v13 \u2014 real hero centering + no clipping\r\n ========================================================= *\/\r\n\r\n\/* Treat the whole hero as one centered block. *\/\r\nmain > .construction-hero {\r\n width: min(100%, 1180px) !important;\r\n margin: 0 auto clamp(56px, 7vw, 96px) !important;\r\n padding-inline: 0 !important;\r\n display: grid !important;\r\n justify-items: center !important;\r\n align-items: start !important;\r\n text-align: center !important;\r\n}\r\n\r\n\/* Make the title itself a centered, fit-content block so the text\r\n doesn't look offset inside a full-width heading box. *\/\r\nmain > .construction-hero > .construction-title {\r\n display: inline-block !important;\r\n width: auto !important;\r\n max-width: calc(100vw - (var(--page-x) * 2)) !important;\r\n margin: 0 auto !important;\r\n text-align: center !important;\r\n text-wrap: initial !important;\r\n overflow: visible !important;\r\n font-size: clamp(54px, 8vw, 112px) !important;\r\n line-height: .98 !important;\r\n letter-spacing: -.06em !important;\r\n}\r\n\r\n\/* Controlled line breaks on desktop:\r\n line 1 = \"Strona\"\r\n line 2 = \"w przebudowie\" *\/\r\nmain > .construction-hero > .construction-title > .construction-word--roman:first-of-type {\r\n display: block !important;\r\n margin: 0 auto -.02em !important;\r\n}\r\n\r\nmain > .construction-hero > .construction-title > .construction-word:nth-of-type(2),\r\nmain > .construction-hero > .construction-title > .construction-word:nth-of-type(3) {\r\n display: inline-block !important;\r\n vertical-align: top;\r\n}\r\n\r\n\/* Remove any leftover balancing that can produce awkward offsets. *\/\r\nmain > .construction-hero .construction-title--animated {\r\n text-wrap: initial !important;\r\n width: auto !important;\r\n}\r\n\r\n\/* Tighter, but still safe, slots so the headline doesn't become enormous. *\/\r\nmain > .construction-hero .construction-letter {\r\n margin-inline: .012em !important;\r\n}\r\n\r\n\/* Supporting copy + icons centered as part of the same hero block. *\/\r\nmain > .construction-hero > .contact {\r\n width: min(100%, 360px) !important;\r\n margin: clamp(30px, 4vw, 48px) auto 0 !important;\r\n text-align: center !important;\r\n}\r\n\r\nmain > .construction-hero > .contact .intro {\r\n text-align: center !important;\r\n}\r\n\r\nmain > .construction-hero > .contact .socials {\r\n justify-content: center !important;\r\n}\r\n\r\n\/* Tablet \/ small laptop *\/\r\n@media (max-width: 900px) {\r\n main > .construction-hero {\r\n width: 100% !important;\r\n margin-bottom: clamp(46px, 9vw, 72px) !important;\r\n }\r\n\r\n main > .construction-hero > .construction-title {\r\n max-width: calc(100vw - (var(--page-x) * 2)) !important;\r\n font-size: clamp(44px, 10.5vw, 76px) !important;\r\n line-height: 1.01 !important;\r\n letter-spacing: -.055em !important;\r\n }\r\n}\r\n\r\n\/* Mobile: stack each word to guarantee no clipping. *\/\r\n@media (max-width: 720px) {\r\n main > .construction-hero > .construction-title {\r\n display: block !important;\r\n width: calc(100vw - (var(--page-x) * 2)) !important;\r\n max-width: calc(100vw - (var(--page-x) * 2)) !important;\r\n font-size: clamp(36px, 11.8vw, 56px) !important;\r\n line-height: 1.02 !important;\r\n letter-spacing: -.045em !important;\r\n }\r\n\r\n main > .construction-hero > .construction-title > .construction-word {\r\n display: block !important;\r\n width: 100% !important;\r\n margin: 0 auto !important;\r\n white-space: nowrap !important;\r\n text-align: center !important;\r\n }\r\n\r\n main > .construction-hero > .construction-title > .construction-word:nth-of-type(2) {\r\n margin-top: -.04em !important;\r\n margin-bottom: -.05em !important;\r\n }\r\n\r\n main > .construction-hero .construction-letter {\r\n margin-inline: .008em !important;\r\n }\r\n\r\n main > .construction-hero > .contact {\r\n margin-top: 28px !important;\r\n }\r\n}\r\n\r\n@media (max-width: 420px) {\r\n main > .construction-hero > .construction-title {\r\n font-size: clamp(31px, 10.9vw, 44px) !important;\r\n line-height: 1.04 !important;\r\n letter-spacing: -.038em !important;\r\n }\r\n\r\n main > .construction-hero .construction-letter {\r\n margin-inline: .004em !important;\r\n }\r\n\r\n main > .construction-hero > .contact {\r\n width: min(100%, 320px) !important;\r\n }\r\n}\r\n\r\n\r\n\/* =========================================================\r\n PATCH v14 \u2014 remove legacy 50vw offset + slightly larger socials\r\n ========================================================= *\/\r\n\r\n\/* IMPORTANT: an older .construction-title rule used:\r\n position: relative; left: 50%; width: 100vw; margin-left: -50vw.\r\n Later rules changed the width\/margin but left `left:50%` active.\r\n Reset the legacy full-bleed positioning completely. *\/\r\nmain > .construction-hero > h1.construction-title {\r\n position: relative !important;\r\n left: auto !important;\r\n right: auto !important;\r\n inset-inline: auto !important;\r\n transform: none !important;\r\n\r\n display: inline-block !important;\r\n width: auto !important;\r\n max-width: calc(100vw - (var(--page-x) * 2)) !important;\r\n\r\n margin-left: auto !important;\r\n margin-right: auto !important;\r\n padding-left: 0 !important;\r\n padding-right: 0 !important;\r\n\r\n text-align: center !important;\r\n box-sizing: border-box !important;\r\n}\r\n\r\n\/* Ensure the hero's centering context itself has no horizontal offset. *\/\r\nmain > .construction-hero {\r\n position: relative !important;\r\n left: auto !important;\r\n right: auto !important;\r\n margin-left: auto !important;\r\n margin-right: auto !important;\r\n justify-items: center !important;\r\n align-items: start !important;\r\n}\r\n\r\n\/* Slightly larger social icons, keeping the existing visual weight. *\/\r\nmain > .construction-hero .socials {\r\n gap: 20px !important;\r\n}\r\n\r\nmain > .construction-hero .social-link {\r\n width: 26px !important;\r\n height: 26px !important;\r\n}\r\n\r\nmain > .construction-hero .social-link svg {\r\n width: 20px !important;\r\n height: 20px !important;\r\n}\r\n\r\n\/* Mobile remains centered and cannot inherit the old full-viewport title offset. *\/\r\n@media (max-width: 720px) {\r\n main > .construction-hero > h1.construction-title {\r\n position: relative !important;\r\n left: auto !important;\r\n right: auto !important;\r\n width: calc(100vw - (var(--page-x) * 2)) !important;\r\n max-width: calc(100vw - (var(--page-x) * 2)) !important;\r\n margin-left: auto !important;\r\n margin-right: auto !important;\r\n padding-inline: 0 !important;\r\n }\r\n\r\n main > .construction-hero .social-link {\r\n width: 27px !important;\r\n height: 27px !important;\r\n }\r\n\r\n main > .construction-hero .social-link svg {\r\n width: 21px !important;\r\n height: 21px !important;\r\n }\r\n}\r\n\r\n<\/style>\r\n<\/head>\r\n\r\n<body>\r\n <div class=\"page\">\r\n <main>\r\n\r\n\r\n\r\n <section class=\"construction-hero\" aria-label=\"Strona w przebudowie\">\r\n <h1 class=\"construction-title construction-title--animated\" aria-label=\"Strona w przebudowie\" data-construction-title>\r\n <span class=\"construction-word construction-word--roman\" aria-hidden=\"true\"><b class=\"construction-letter\">S<\/b><b class=\"construction-letter\">t<\/b><b class=\"construction-letter\">r<\/b><b class=\"construction-letter\">o<\/b><b class=\"construction-letter\">n<\/b><b class=\"construction-letter\">a<\/b><\/span> <span class=\"construction-word construction-word--italic\" aria-hidden=\"true\"><b class=\"construction-letter\">w<\/b><\/span> <span class=\"construction-word construction-word--italic\" aria-hidden=\"true\"><b class=\"construction-letter\">p<\/b><b class=\"construction-letter\">r<\/b><b class=\"construction-letter\">z<\/b><b class=\"construction-letter\">e<\/b><b class=\"construction-letter\">b<\/b><b class=\"construction-letter\">u<\/b><b class=\"construction-letter\">d<\/b><b class=\"construction-letter\">o<\/b><b class=\"construction-letter\">w<\/b><b class=\"construction-letter\">i<\/b><b class=\"construction-letter\">e<\/b><\/span>\r\n <\/h1>\r\n <section class=\"contact\" aria-label=\"Kontakt\">\r\n <p class=\"intro\">Do tego czasu mo\u017cesz znale\u017a\u0107 mnie tutaj:<\/p>\r\n\r\n <nav class=\"socials\" aria-label=\"Social links\">\r\n <a class=\"social-link\" href=\"https:\/\/www.linkedin.com\/in\/michalplebaniak\/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"LinkedIn\">\r\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n <path d=\"M4.98 3.5C4.98 4.88 3.86 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1s2.48 1.12 2.48 2.5ZM.28 8h4.44v15H.28V8Zm7.32 0h4.25v2.05h.06c.59-1.12 2.04-2.3 4.2-2.3 4.49 0 5.32 2.96 5.32 6.8V23h-4.43v-7.5c0-1.79-.03-4.09-2.49-4.09-2.5 0-2.88 1.95-2.88 3.96V23H7.6V8Z\"\/>\r\n <\/svg>\r\n <\/a>\r\n\r\n <a class=\"social-link\" href=\"https:\/\/www.instagram.com\/michal.plebaniak\/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Instagram\">\r\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n <path d=\"M7.75 2h8.5A5.76 5.76 0 0 1 22 7.75v8.5A5.76 5.76 0 0 1 16.25 22h-8.5A5.76 5.76 0 0 1 2 16.25v-8.5A5.76 5.76 0 0 1 7.75 2Zm0 2A3.75 3.75 0 0 0 4 7.75v8.5A3.75 3.75 0 0 0 7.75 20h8.5A3.75 3.75 0 0 0 20 16.25v-8.5A3.75 3.75 0 0 0 16.25 4h-8.5ZM12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6Zm5.25-2.55a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4Z\"\/>\r\n <\/svg>\r\n <\/a>\r\n\r\n <a class=\"social-link\" href=\"https:\/\/vimeo.com\/michalplebaniak\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Vimeo\">\r\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n <path d=\"M22.38 6.04c-.1 2.2-1.64 5.2-4.63 9.02-3.09 3.99-5.7 5.98-7.84 5.98-1.32 0-2.44-1.22-3.36-3.66L4.7 10.7C4.02 8.27 3.3 7.05 2.55 7.05c-.16 0-.74.35-1.71 1.03L0 7.01c1.07-.94 2.13-1.89 3.18-2.83 1.43-1.24 2.5-1.9 3.22-1.97 1.7-.16 2.75 1 3.15 3.48.43 2.68.73 4.35.9 5 .5 2.23 1.06 3.34 1.66 3.34.47 0 1.17-.74 2.11-2.22.94-1.48 1.44-2.6 1.51-3.38.13-1.28-.37-1.92-1.51-1.92-.54 0-1.09.12-1.66.37 1.1-3.6 3.2-5.34 6.3-5.23 2.3.07 3.47 1.54 3.52 4.39Z\"\/>\r\n <\/svg>\r\n <\/a>\r\n <\/nav>\r\n <\/section>\r\n <\/section>\r\n\r\n <section class=\"grid\" aria-label=\"Strona w przebudowie\">\r\n\r\n\r\n <aside class=\"info\">\r\n <section class=\"panel services\" aria-label=\"Us\u0142ugi\">\r\n <p class=\"section-title\">Us\u0142ugi<\/p>\r\n\r\n <div class=\"services__accordion\">\r\n <div class=\"service-accordion is-open\">\r\n <button class=\"service-accordion__heading\" type=\"button\" aria-expanded=\"true\" aria-controls=\"service-wideo-content\">\r\n <span class=\"service-accordion__name\">Video<\/span>\r\n <\/button>\r\n <div class=\"service-accordion__content\" id=\"service-wideo-content\">\r\n Filmy promocyjne, social media, relacje z event\u00f3w, wywiady i animacje dopasowane do marki oraz kana\u0142u komunikacji.\r\n <\/div>\r\n <\/div>\r\n <div class=\"service-accordion is-open\">\r\n <button class=\"service-accordion__heading\" type=\"button\" aria-expanded=\"true\" aria-controls=\"service-web-content\">\r\n <span class=\"service-accordion__name\">Web design<\/span>\r\n <\/button>\r\n <div class=\"service-accordion__content\" id=\"service-web-content\">\r\n Strony i landing page\u2019e z naciskiem na prost\u0105 struktur\u0119, estetyk\u0119, responsywno\u015b\u0107 i wygodn\u0105 obs\u0142ug\u0119.\r\n <\/div>\r\n <\/div>\r\n <div class=\"service-accordion is-open\">\r\n <button class=\"service-accordion__heading\" type=\"button\" aria-expanded=\"true\" aria-controls=\"service-content-day-content\">\r\n <span class=\"service-accordion__name\">Content day<\/span>\r\n <\/button>\r\n <div class=\"service-accordion__content\" id=\"service-content-day-content\">\r\n Zdj\u0119cia, video i inne formaty publikacji w jednym procesie. Zapas tre\u015bci na ca\u0142y miesi\u0105c w jeden dzie\u0144 zdj\u0119ciowy.\r\n <\/div>\r\n <\/div>\r\n <div class=\"service-accordion is-open\">\r\n <button class=\"service-accordion__heading\" type=\"button\" aria-expanded=\"true\" aria-controls=\"service-fotografia-content\">\r\n <span class=\"service-accordion__name\">Fotografia<\/span>\r\n <\/button>\r\n <div class=\"service-accordion__content\" id=\"service-fotografia-content\">\r\n Sesje wizerunkowe, produktowe i eventowe, od koncepcji po gotowe zdj\u0119cia do kampanii, stron i social media.\r\n <\/div>\r\n <\/div>\r\n <div class=\"service-accordion is-open\">\r\n <button class=\"service-accordion__heading\" type=\"button\" aria-expanded=\"true\" aria-controls=\"service-design-content\">\r\n <span class=\"service-accordion__name\">Design<\/span>\r\n <\/button>\r\n <div class=\"service-accordion__content\" id=\"service-design-content\">\r\n Kompletna identyfikacja wizualna, projekty logo, prezentacje, strony internetowe, materia\u0142y do social media, kampanii i komunikacji firmowej.\r\n <\/div>\r\n <\/div>\r\n <div class=\"service-accordion is-open\">\r\n <button class=\"service-accordion__heading\" type=\"button\" aria-expanded=\"true\" aria-controls=\"service-marketing-content\">\r\n <span class=\"service-accordion__name\">Marketing<\/span>\r\n <\/button>\r\n <div class=\"service-accordion__content\" id=\"service-marketing-content\">\r\n Koncepcje kampanii, social media, content i komunikacja, zaplanowane wok\u00f3\u0142 konkretnych cel\u00f3w biznesowych.\r\n <\/div>\r\n <\/div>\r\n <div class=\"service-accordion is-open\">\r\n <button class=\"service-accordion__heading\" type=\"button\" aria-expanded=\"true\" aria-controls=\"service-consulting-content\">\r\n <span class=\"service-accordion__name\">Consulting<\/span>\r\n <\/button>\r\n <div class=\"service-accordion__content\" id=\"service-consulting-content\">\r\n Konsultacje kreatywne i strategiczne pomagaj\u0105ce uporz\u0105dkowa\u0107 mark\u0119, komunikacj\u0119 i dalsze dzia\u0142ania.\r\n <\/div>\r\n <\/div>\r\n <div class=\"service-accordion is-open\">\r\n <button class=\"service-accordion__heading\" type=\"button\" aria-expanded=\"true\" aria-controls=\"service-ai-content-content\">\r\n <span class=\"service-accordion__name\">AI content<\/span>\r\n <\/button>\r\n <div class=\"service-accordion__content\" id=\"service-ai-content-content\">\r\n Obrazy produktowe, mockupy, workflow i tre\u015bci wspierane AI.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"clients\" aria-label=\"Klienci\">\r\n <div class=\"clients__header\">\r\n <p class=\"clients__label\">Wybrani klienci<\/p>\r\n <div class=\"clients__controls\" aria-label=\"Sterowanie logotypami klient\u00f3w\">\r\n <button class=\"clients__arrow clients__arrow--prev\" type=\"button\" aria-label=\"Poprzednie logotypy\" aria-controls=\"clients-logo-strip\">\u2190<\/button>\r\n <button class=\"clients__arrow clients__arrow--next\" type=\"button\" aria-label=\"Nast\u0119pne logotypy\" aria-controls=\"clients-logo-strip\">\u2192<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"clients__marquee\" id=\"clients-logo-strip\">\r\n <div class=\"clients__track\">\r\n <div class=\"clients__group\">\r\n <span class=\"clients__logo clients__logo--playboy\">\r\n <img src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/6\/6b\/Playboy_logo.svg\" alt=\"Playboy\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\r\n <\/span>\r\n\r\n <span class=\"clients__logo clients__logo--esquire\">\r\n <img src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/2\/25\/Esquire_logo_%282017%29.svg\" alt=\"Esquire\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\r\n <\/span>\r\n\r\n <span class=\"clients__logo clients__logo--cosmo\">\r\n <img src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/3\/32\/Cosmopolitan_logo.svg\" alt=\"Cosmopolitan\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\r\n <\/span>\r\n\r\n <span class=\"clients__logo clients__logo--arp clients__logo--blend\">\r\n <img src=\"https:\/\/michalplebaniak.com\/wp-content\/uploads\/2026\/08\/ARP.png\" alt=\"Agencja Rozwoju Pomorza\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\r\n <\/span>\r\n\r\n <span class=\"clients__logo clients__logo--pes\">\r\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\" \/>\r\n <\/span>\r\n\r\n <span class=\"clients__logo clients__logo--nck\">\r\n <img src=\"https:\/\/michalplebaniak.com\/wp-content\/uploads\/2026\/08\/NCK.png\" alt=\"Narodowe Centrum Kultury\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\r\n <\/span>\r\n\r\n <span class=\"clients__logo clients__logo--bit\">\r\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\" \/>\r\n <\/span>\r\n\r\n <span class=\"clients__logo clients__logo--btt\">\r\n <img src=\"https:\/\/klubbokserskigdansk.pl\/wp-content\/uploads\/2022\/11\/logo3.png\" alt=\"Klub Bokserski BTT\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\r\n <\/span>\r\n\r\n <span class=\"clients__logo clients__logo--sans\">\r\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\" \/>\r\n <\/span>\r\n\r\n <span class=\"clients__logo clients__logo--crosscore\">\r\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\" \/>\r\n <\/span>\r\n\r\n <span class=\"clients__logo clients__logo--agora\">\r\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\" \/>\r\n <\/span>\r\n\r\n <span class=\"clients__logo clients__logo--bok\">\r\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\" \/>\r\n <\/span>\r\n\r\n <span class=\"clients__logo clients__logo--medicover\">\r\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\" \/>\r\n <\/span>\r\n\r\n <span class=\"clients__logo clients__logo--iratcr\">\r\n <img src=\"https:\/\/michalplebaniak.com\/wp-content\/uploads\/2026\/08\/IRAtCR-w.png\" alt=\"Geocaching\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\r\n <\/span>\r\n\r\n <span class=\"clients__logo clients__logo--adventure-lab\">\r\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\" \/>\r\n <\/span>\r\n\r\n <span class=\"clients__logo clients__logo--bazaar\" aria-label=\"Harper's Bazaar\">\r\n <span class=\"clients__text-logo\" aria-hidden=\"true\">Bazaar<\/span>\r\n <\/span>\r\n <\/div>\r\n\r\n <div class=\"clients__group\" aria-hidden=\"true\">\r\n <span class=\"clients__logo clients__logo--playboy\">\r\n <img src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/6\/6b\/Playboy_logo.svg\" alt=\"\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\r\n <\/span>\r\n\r\n <span class=\"clients__logo clients__logo--esquire\">\r\n <img src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/2\/25\/Esquire_logo_%282017%29.svg\" alt=\"\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\r\n <\/span>\r\n\r\n <span class=\"clients__logo clients__logo--cosmo\">\r\n <img src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/3\/32\/Cosmopolitan_logo.svg\" alt=\"\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\r\n <\/span>\r\n\r\n <span class=\"clients__logo clients__logo--arp clients__logo--blend\">\r\n <img src=\"https:\/\/michalplebaniak.com\/wp-content\/uploads\/2026\/08\/ARP.png\" alt=\"\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\r\n <\/span>\r\n\r\n <span class=\"clients__logo clients__logo--pes\">\r\n <img src=\"https:\/\/michalplebaniak.com\/wp-content\/uploads\/2026\/08\/logotyp-pes-rgb-png.png\" alt=\"\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\r\n <\/span>\r\n\r\n <span class=\"clients__logo clients__logo--nck\">\r\n <img src=\"https:\/\/michalplebaniak.com\/wp-content\/uploads\/2026\/08\/NCK.png\" alt=\"\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\r\n <\/span>\r\n\r\n <span class=\"clients__logo clients__logo--bit\">\r\n <img src=\"https:\/\/companieslogo.com\/img\/orig\/11B.WA_BIG-6530fcb7.png?t=1720244490\" alt=\"\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\r\n <\/span>\r\n\r\n <span class=\"clients__logo clients__logo--btt\">\r\n <img src=\"https:\/\/klubbokserskigdansk.pl\/wp-content\/uploads\/2022\/11\/logo3.png\" alt=\"\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\r\n <\/span>\r\n\r\n <span class=\"clients__logo clients__logo--sans\">\r\n <img src=\"https:\/\/michalplebaniak.com\/wp-content\/uploads\/2026\/08\/Sopocka-Akademia-Nauk-Stosowanych.png\" alt=\"\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\r\n <\/span>\r\n\r\n <span class=\"clients__logo clients__logo--crosscore\">\r\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\" \/>\r\n <\/span>\r\n\r\n <span class=\"clients__logo clients__logo--agora\">\r\n <img src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/7\/7e\/Agora_S.A._2025.svg\" alt=\"\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\r\n <\/span>\r\n\r\n <span class=\"clients__logo clients__logo--bok\">\r\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\" \/>\r\n <\/span>\r\n\r\n <span class=\"clients__logo clients__logo--medicover\">\r\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\" \/>\r\n <\/span>\r\n\r\n <span class=\"clients__logo clients__logo--iratcr\">\r\n <img src=\"https:\/\/michalplebaniak.com\/wp-content\/uploads\/2026\/08\/IRAtCR-w.png\" alt=\"\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\r\n <\/span>\r\n\r\n <span class=\"clients__logo clients__logo--adventure-lab\">\r\n <img src=\"https:\/\/michalplebaniak.com\/wp-content\/uploads\/2026\/08\/Adventure_Lab_Logo_300dpi.png\" alt=\"\" decoding=\"async\" loading=\"lazy\" fetchpriority=\"low\" \/>\r\n <\/span>\r\n\r\n <span class=\"clients__logo clients__logo--bazaar\">\r\n <span class=\"clients__text-logo\">Bazaar<\/span>\r\n <\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <\/aside>\r\n <\/section>\r\n\r\n<section class=\"websites\" aria-label=\"Wybrane strony internetowe\" data-websites-carousel>\r\n <div class=\"websites__header\">\r\n <p class=\"section-title\">Wybrane strony internetowe<\/p>\r\n <div class=\"websites__controls\" aria-label=\"Sterowanie karuzel\u0105 stron internetowych\">\r\n <button class=\"websites__arrow websites__arrow--prev\" type=\"button\" aria-label=\"Poprzedni projekt\">\u2190<\/button>\r\n <button class=\"websites__arrow websites__arrow--next\" type=\"button\" aria-label=\"Nast\u0119pny projekt\">\u2192<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"websites__links\" tabindex=\"0\" aria-label=\"Karuzela projekt\u00f3w stron internetowych. Na telefonie przesu\u0144 palcem.\">\r\n <a class=\"website-link website-link--preview\" href=\"http:\/\/prestigejewellery.pl\/\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n <svg class=\"website-link__front-tab\" viewBox=\"0 0 580 170\" preserveAspectRatio=\"none\" aria-hidden=\"true\" focusable=\"false\">\r\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\" \/>\r\n <\/svg>\r\n <img class=\"website-link__preview\" src=\"https:\/\/michalplebaniak.com\/wp-content\/uploads\/2026\/05\/ChatGPT-Image-8-maj-2026-12_45_54.png\" onerror=\"this.onerror=null;this.src='assets\/prestige-folder-preview.png';\" alt=\"\" loading=\"lazy\" decoding=\"async\" aria-hidden=\"true\" fetchpriority=\"low\" \/>\r\n <span class=\"website-link__number\" aria-hidden=\"true\">01<\/span>\r\n <span class=\"website-link__content\">\r\n <span class=\"website-link__name\">Galeria Bi\u017cuterii Prestige<\/span>\r\n <span class=\"website-link__description\">Elegancka prezentacja marki, kolekcji bi\u017cuterii i oferty salonu.<\/span>\r\n <\/span>\r\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>\r\n <\/a>\r\n <a class=\"website-link\" href=\"https:\/\/michalplebaniak.com\/talent-complete\/\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n <svg class=\"website-link__front-tab\" viewBox=\"0 0 580 170\" preserveAspectRatio=\"none\" aria-hidden=\"true\" focusable=\"false\">\r\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\" \/>\r\n <\/svg>\r\n <span class=\"website-link__number\" aria-hidden=\"true\">02<\/span>\r\n <span class=\"website-link__content\">\r\n <span class=\"website-link__name\">Talent Complete<\/span>\r\n <span class=\"website-link__description\">Serwis us\u0142ugi HR skupiony na rekrutacji, talentach i wsparciu biznesu.<\/span>\r\n <\/span>\r\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>\r\n <\/a>\r\n <a class=\"website-link\" href=\"https:\/\/crosscoregdansk.pl\/\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n <svg class=\"website-link__front-tab\" viewBox=\"0 0 580 170\" preserveAspectRatio=\"none\" aria-hidden=\"true\" focusable=\"false\">\r\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\" \/>\r\n <\/svg>\r\n <span class=\"website-link__number\" aria-hidden=\"true\">03<\/span>\r\n <span class=\"website-link__content\">\r\n <span class=\"website-link__name\">CrossCore Gda\u0144sk<\/span>\r\n <span class=\"website-link__description\">Dynamiczna strona klubu treningowego z ofert\u0105 zaj\u0119\u0107 i kontaktem.<\/span>\r\n <\/span>\r\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>\r\n <\/a>\r\n <a class=\"website-link\" href=\"https:\/\/bajkvv.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n <svg class=\"website-link__front-tab\" viewBox=\"0 0 580 170\" preserveAspectRatio=\"none\" aria-hidden=\"true\" focusable=\"false\">\r\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\" \/>\r\n <\/svg>\r\n <span class=\"website-link__number\" aria-hidden=\"true\">04<\/span>\r\n <span class=\"website-link__content\">\r\n <span class=\"website-link__name\">Agata Bajkov<\/span>\r\n <span class=\"website-link__description\">Personalna marka trenerki z ofert\u0105 trening\u00f3w i wsp\u00f3\u0142pracy indywidualnej.<\/span>\r\n <\/span>\r\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>\r\n <\/a>\r\n <a class=\"website-link\" href=\"https:\/\/nordtrailrace.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n <svg class=\"website-link__front-tab\" viewBox=\"0 0 580 170\" preserveAspectRatio=\"none\" aria-hidden=\"true\" focusable=\"false\">\r\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\" \/>\r\n <\/svg>\r\n <span class=\"website-link__number\" aria-hidden=\"true\">05<\/span>\r\n <span class=\"website-link__content\">\r\n <span class=\"website-link__name\">Nord Trail Race<\/span>\r\n <span class=\"website-link__description\">Strona biegu terenowego z informacjami o trasie, zapisach i wydarzeniu.<\/span>\r\n <\/span>\r\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>\r\n <\/a>\r\n <a class=\"website-link\" href=\"https:\/\/michalplebaniak.com\/lura-cafe\/\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n <svg class=\"website-link__front-tab\" viewBox=\"0 0 580 170\" preserveAspectRatio=\"none\" aria-hidden=\"true\" focusable=\"false\">\r\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\" \/>\r\n <\/svg>\r\n <span class=\"website-link__number\" aria-hidden=\"true\">06<\/span>\r\n <span class=\"website-link__content\">\r\n <span class=\"website-link__name\">Lura Cafe<\/span>\r\n <span class=\"website-link__description\">Strona kawiarni Lura z ofert\u0105 kawy, produktami marki i informacjami o lokalu.<\/span>\r\n <\/span>\r\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>\r\n <\/a>\r\n <a class=\"website-link\" href=\"https:\/\/michalplebaniak.com\/amber-org\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n <svg class=\"website-link__front-tab\" viewBox=\"0 0 580 170\" preserveAspectRatio=\"none\" aria-hidden=\"true\" focusable=\"false\">\r\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\" \/>\r\n <\/svg>\r\n <span class=\"website-link__number\" aria-hidden=\"true\">07<\/span>\r\n <span class=\"website-link__content\">\r\n <span class=\"website-link__name\">Amber Org<\/span>\r\n <span class=\"website-link__description\">Work in Progress \u2014 projekt strony Amber Org, obecnie w trakcie realizacji.<\/span>\r\n <\/span>\r\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>\r\n <\/a>\r\n <\/div>\r\n<\/section>\r\n\r\n<section class=\"works-loop\" aria-label=\"Wybrane realizacje wideo\" data-works-loop>\r\n <div class=\"works-loop__header\">\r\n <p class=\"section-title\">Wybrane realizacje<\/p>\r\n <\/div>\r\n\r\n <div class=\"works-loop__carousel\" aria-label=\"Sterowanie karuzel\u0105\">\r\n <button class=\"works-loop__arrow works-loop__arrow--prev\" type=\"button\" aria-label=\"Poprzednia realizacja\">\u2190<\/button>\r\n\r\n <div class=\"works-loop__viewport\" tabindex=\"0\" aria-label=\"Karuzela realizacji. Przesu\u0144 palcem lub u\u017cyj strza\u0142ek.\">\r\n <div class=\"works-loop__track\">\r\n <div class=\"works-loop__item\" data-youtube-id=\"kMQtY2t2M_Q\" data-video-url=\"https:\/\/youtu.be\/kMQtY2t2M_Q\"><\/div>\r\n <div class=\"works-loop__item\" data-youtube-id=\"w3bjcWP0-zM\"><\/div>\r\n <div class=\"works-loop__item\" data-youtube-id=\"DsV_hk9__6A\" data-video-url=\"https:\/\/youtu.be\/DsV_hk9__6A\"><\/div>\r\n <div class=\"works-loop__item\" data-vimeo-id=\"1214957722\" data-thumbnail-refresh=\"true\"><\/div>\r\n <div class=\"works-loop__item\" data-vimeo-id=\"1204144635\"><\/div>\r\n <div class=\"works-loop__item\" data-vimeo-id=\"1191830305\"><\/div>\r\n <div class=\"works-loop__item\" data-vimeo-id=\"310873953\"><\/div>\r\n <div class=\"works-loop__item\" data-vimeo-id=\"1154238773\"><\/div>\r\n <div class=\"works-loop__item\" data-vimeo-id=\"276783004\"><\/div>\r\n <div class=\"works-loop__item\" data-vimeo-id=\"310875799\"><\/div>\r\n <div class=\"works-loop__item\" data-vimeo-id=\"310881669\"><\/div>\r\n <div class=\"works-loop__item\" data-vimeo-id=\"273568381\"><\/div>\r\n <div class=\"works-loop__item\" data-vimeo-id=\"405101306\"><\/div>\r\n <div class=\"works-loop__item\" data-vimeo-id=\"1154324138\"><\/div>\r\n <div class=\"works-loop__item\" data-vimeo-id=\"1161850865\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <button class=\"works-loop__arrow works-loop__arrow--next\" type=\"button\" aria-label=\"Nast\u0119pna realizacja\">\u2192<\/button>\r\n <\/div>\r\n<\/section>\r\n\r\n<section class=\"testimonials\" aria-labelledby=\"testimonials-heading\" data-testimonials>\r\n <div class=\"testimonials__header\">\r\n <p class=\"section-title\" id=\"testimonials-heading\">Rekomendacje<\/p>\r\n <\/div>\r\n\r\n <div class=\"testimonial-stage\">\r\n <button class=\"testimonial-side-arrow testimonial-side-arrow--prev\" type=\"button\" data-testimonial-prev aria-label=\"Poprzednia rekomendacja\">\u2190<\/button>\r\n\r\n <div class=\"testimonial-stage__inner\">\r\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>\r\n\r\n <div class=\"testimonial-author\">\r\n <strong data-testimonial-name>Grzegorz Witkowski<\/strong>\r\n <span data-testimonial-role>Head of Marketing @ Scalo<\/span>\r\n <\/div>\r\n\r\n <div class=\"testimonial-mobile-cue\" aria-hidden=\"true\">\r\n <span>Przesu\u0144<\/span>\r\n <span class=\"testimonial-mobile-cue__dots\" data-testimonial-dots><\/span>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <button class=\"testimonial-side-arrow testimonial-side-arrow--next\" type=\"button\" data-testimonial-next aria-label=\"Nast\u0119pna rekomendacja\">\u2192<\/button>\r\n <\/div>\r\n<\/section>\r\n\r\n<section class=\"project-contact\" aria-label=\"Formularz kontaktowy\">\r\n <div class=\"project-contact__layout\">\r\n <div class=\"project-contact__intro\">\r\n <p class=\"section-title\">Kontakt<\/p>\r\n\r\n <h2 class=\"project-contact__title\">\r\n Porozmawiajmy\r\n <span>o projekcie.<\/span>\r\n <\/h2>\r\n\r\n <p class=\"project-contact__copy\">\r\n Wybierz us\u0142ug\u0119, termin i bud\u017cet krok po kroku. Na ko\u0144cu wpiszesz dane\r\n kontaktowe, zobaczysz gotow\u0105 wiadomo\u015b\u0107 i wy\u015blesz zapytanie.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"contact-form\">\r\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\/1008#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=\"135\"\/><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\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <\/main>\r\n <\/div>\r\n\r\n<script>\r\n(function () {\r\n \"use strict\";\r\n\r\n function initWebsitesCarousel(section) {\r\n if (!section || section.dataset.carouselReady === \"true\") return;\r\n\r\n var viewport = section.querySelector(\".websites__links\");\r\n var previous = section.querySelector(\".websites__arrow--prev\");\r\n var next = section.querySelector(\".websites__arrow--next\");\r\n if (!viewport || !viewport.children.length) return;\r\n\r\n section.dataset.carouselReady = \"true\";\r\n\r\n var reducedMotion = window.matchMedia && window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\r\n var ticking = false;\r\n\r\n function gapSize() {\r\n var styles = window.getComputedStyle(viewport);\r\n return parseFloat(styles.columnGap || styles.gap || \"0\") || 0;\r\n }\r\n\r\n function stepSize() {\r\n var first = viewport.firstElementChild;\r\n return first ? first.getBoundingClientRect().width + gapSize() : viewport.clientWidth;\r\n }\r\n\r\n function maxScroll() {\r\n return Math.max(0, viewport.scrollWidth - viewport.clientWidth);\r\n }\r\n\r\n function updateButtons() {\r\n var max = maxScroll();\r\n var left = viewport.scrollLeft;\r\n var tolerance = 3;\r\n\r\n if (previous) previous.disabled = left <= tolerance;\r\n if (next) next.disabled = left >= max - tolerance;\r\n }\r\n\r\n function move(direction) {\r\n viewport.scrollBy({\r\n left: direction * stepSize(),\r\n behavior: reducedMotion ? \"auto\" : \"smooth\"\r\n });\r\n }\r\n\r\n if (previous) previous.addEventListener(\"click\", function () { move(-1); });\r\n if (next) next.addEventListener(\"click\", function () { move(1); });\r\n\r\n viewport.addEventListener(\"keydown\", function (event) {\r\n if (event.key === \"ArrowLeft\") {\r\n event.preventDefault();\r\n move(-1);\r\n } else if (event.key === \"ArrowRight\") {\r\n event.preventDefault();\r\n move(1);\r\n }\r\n });\r\n\r\n viewport.addEventListener(\"scroll\", function () {\r\n if (ticking) return;\r\n ticking = true;\r\n window.requestAnimationFrame(function () {\r\n ticking = false;\r\n updateButtons();\r\n });\r\n }, { passive: true });\r\n\r\n window.addEventListener(\"resize\", updateButtons, { passive: true });\r\n updateButtons();\r\n }\r\n\r\n function bootWebsitesCarousels() {\r\n Array.prototype.forEach.call(\r\n document.querySelectorAll(\"[data-websites-carousel]\"),\r\n initWebsitesCarousel\r\n );\r\n }\r\n\r\n if (document.readyState === \"loading\") {\r\n document.addEventListener(\"DOMContentLoaded\", bootWebsitesCarousels);\r\n } else {\r\n bootWebsitesCarousels();\r\n }\r\n}());\r\n;\r\n(function () {\r\n \"use strict\";\r\n\r\n function list(nodes) {\r\n return Array.prototype.slice.call(nodes || []);\r\n }\r\n\r\n function playerProvider(item) {\r\n if (item.getAttribute(\"data-youtube-id\")) return \"youtube\";\r\n if (item.getAttribute(\"data-vimeo-id\")) return \"vimeo\";\r\n return \"\";\r\n }\r\n\r\n function postToPlayer(iframe, method) {\r\n if (!iframe || !iframe.contentWindow) return;\r\n\r\n var provider = iframe.getAttribute(\"data-player-provider\");\r\n\r\n try {\r\n if (provider === \"youtube\") {\r\n iframe.contentWindow.postMessage(JSON.stringify({\r\n event: \"command\",\r\n func: method === \"pause\" ? \"pauseVideo\" : method,\r\n args: []\r\n }), \"https:\/\/www.youtube-nocookie.com\");\r\n } else {\r\n iframe.contentWindow.postMessage({ method: method }, \"https:\/\/player.vimeo.com\");\r\n }\r\n } catch (error) {\r\n\r\n }\r\n }\r\n\r\n function pausePlayers(section) {\r\n list(section.querySelectorAll(\"iframe\")).forEach(function (iframe) {\r\n postToPlayer(iframe, \"pause\");\r\n });\r\n }\r\n\r\n function applyMediaSizing(element) {\r\n\r\n element.style.setProperty(\"position\", \"absolute\", \"important\");\r\n element.style.setProperty(\"inset\", \"0\", \"important\");\r\n element.style.setProperty(\"display\", \"block\", \"important\");\r\n element.style.setProperty(\"width\", \"100%\", \"important\");\r\n element.style.setProperty(\"height\", \"100%\", \"important\");\r\n element.style.setProperty(\"min-width\", \"100%\", \"important\");\r\n element.style.setProperty(\"min-height\", \"100%\", \"important\");\r\n element.style.setProperty(\"max-width\", \"none\", \"important\");\r\n element.style.setProperty(\"max-height\", \"none\", \"important\");\r\n element.style.setProperty(\"margin\", \"0\", \"important\");\r\n element.style.setProperty(\"padding\", \"0\", \"important\");\r\n element.style.setProperty(\"border\", \"0\", \"important\");\r\n }\r\n\r\n function insertThumbnail(item, source, alt, status) {\r\n var image = document.createElement(\"img\");\r\n image.className = \"works-loop__thumbnail\";\r\n image.src = source;\r\n image.alt = alt || \"Miniatura realizacji wideo\";\r\n image.loading = \"lazy\";\r\n image.decoding = \"async\";\r\n\r\n applyMediaSizing(image);\r\n image.style.setProperty(\"object-fit\", \"cover\", \"important\");\r\n image.style.setProperty(\"object-position\", \"center center\", \"important\");\r\n\r\n image.addEventListener(\"load\", function () {\r\n if (status && status.parentNode) status.remove();\r\n }, { once: true });\r\n\r\n image.addEventListener(\"error\", function () {\r\n if (status) status.textContent = \"Otw\u00f3rz wideo\";\r\n }, { once: true });\r\n\r\n item.insertBefore(image, item.firstChild);\r\n }\r\n\r\n function loadVideoThumbnail(item) {\r\n var provider = playerProvider(item);\r\n var vimeoId = item.getAttribute(\"data-vimeo-id\");\r\n var youtubeId = item.getAttribute(\"data-youtube-id\");\r\n if (!provider) return;\r\n\r\n var status = document.createElement(\"span\");\r\n status.className = \"works-loop__status\";\r\n status.textContent = \"\u0141adowanie miniatury\";\r\n item.appendChild(status);\r\n\r\n if (provider === \"youtube\") {\r\n insertThumbnail(\r\n item,\r\n \"https:\/\/i.ytimg.com\/vi\/\" + encodeURIComponent(youtubeId) + \"\/hqdefault.jpg\",\r\n \"Miniatura realizacji wideo z YouTube\",\r\n status\r\n );\r\n return;\r\n }\r\n\r\n var refreshThumbnail = item.getAttribute(\"data-thumbnail-refresh\") === \"true\";\r\n var cacheBust = refreshThumbnail ? \"&cb=\" + Date.now() : \"\";\r\n var endpoint = \"https:\/\/vimeo.com\/api\/oembed.json?url=\" +\r\n encodeURIComponent(\"https:\/\/vimeo.com\/\" + vimeoId) + \"&width=960&dnt=1\" + cacheBust;\r\n\r\n fetch(endpoint, {\r\n mode: \"cors\",\r\n credentials: \"omit\",\r\n cache: refreshThumbnail ? \"no-store\" : \"default\"\r\n })\r\n .then(function (response) {\r\n if (!response.ok) throw new Error(\"Vimeo thumbnail request failed\");\r\n return response.json();\r\n })\r\n .then(function (data) {\r\n if (!data || !data.thumbnail_url) throw new Error(\"Missing Vimeo thumbnail\");\r\n\r\n var thumbnailSource = data.thumbnail_url;\r\n if (refreshThumbnail) {\r\n thumbnailSource += (thumbnailSource.indexOf(\"?\") === -1 ? \"?\" : \"&\") +\r\n \"cb=\" + Date.now();\r\n }\r\n\r\n insertThumbnail(\r\n item,\r\n thumbnailSource,\r\n data.title ? data.title : \"Miniatura realizacji wideo\",\r\n status\r\n );\r\n })\r\n .catch(function () {\r\n status.textContent = \"Otw\u00f3rz wideo\";\r\n });\r\n }\r\n\r\n function videoDirectUrl(item) {\r\n var customUrl = item.getAttribute(\"data-video-url\");\r\n var youtubeId = item.getAttribute(\"data-youtube-id\");\r\n var vimeoId = item.getAttribute(\"data-vimeo-id\");\r\n\r\n if (customUrl) {\r\n return customUrl;\r\n }\r\n\r\n if (youtubeId) {\r\n return \"https:\/\/www.youtube.com\/watch?v=\" + encodeURIComponent(youtubeId);\r\n }\r\n\r\n if (vimeoId) {\r\n return \"https:\/\/vimeo.com\/\" + encodeURIComponent(vimeoId);\r\n }\r\n\r\n return \"\";\r\n }\r\n\r\n function createVideoLink(item) {\r\n var directUrl = videoDirectUrl(item);\r\n if (!directUrl) return;\r\n\r\n var link = document.createElement(\"a\");\r\n var icon = document.createElement(\"span\");\r\n\r\n link.className = \"works-loop__play\";\r\n link.href = directUrl;\r\n link.target = \"_blank\";\r\n link.rel = \"noopener noreferrer\";\r\n link.draggable = false;\r\n link.setAttribute(\"aria-label\", \"Otw\u00f3rz wideo w nowej karcie\");\r\n\r\n icon.className = \"works-loop__play-icon\";\r\n icon.setAttribute(\"aria-hidden\", \"true\");\r\n link.appendChild(icon);\r\n\r\n item.appendChild(link);\r\n }\r\n\r\n function initWorksLoop(section) {\r\n if (!section || section.getAttribute(\"data-loop-ready\") === \"true\") return;\r\n\r\n var viewport = section.querySelector(\".works-loop__viewport\");\r\n var track = section.querySelector(\".works-loop__track\");\r\n var previous = section.querySelector(\".works-loop__arrow--prev\");\r\n var next = section.querySelector(\".works-loop__arrow--next\");\r\n if (!viewport || !track || !track.children.length) return;\r\n\r\n section.setAttribute(\"data-loop-ready\", \"true\");\r\n\r\n var items = list(track.children);\r\n var reducedMotion = window.matchMedia && window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\r\n var dragging = false;\r\n var dragStartX = 0;\r\n var dragStartScroll = 0;\r\n var suppressVideoClick = false;\r\n\r\n function gapSize() {\r\n var styles = window.getComputedStyle(track);\r\n return parseFloat(styles.columnGap || styles.gap || \"0\") || 0;\r\n }\r\n\r\n function stepSize() {\r\n var first = track.firstElementChild;\r\n return first ? first.getBoundingClientRect().width + gapSize() : viewport.clientWidth;\r\n }\r\n\r\n function nearestIndex() {\r\n var step = stepSize();\r\n if (!step) return 0;\r\n return Math.max(0, Math.min(items.length - 1, Math.round(viewport.scrollLeft \/ step)));\r\n }\r\n\r\n function move(direction, userInitiated) {\r\n var current = nearestIndex();\r\n var target = current + direction;\r\n\r\n if (target >= items.length) target = 0;\r\n if (target < 0) target = items.length - 1;\r\n\r\n pausePlayers(section);\r\n viewport.scrollTo({\r\n left: target * stepSize(),\r\n behavior: reducedMotion ? \"auto\" : \"smooth\"\r\n });\r\n\r\n }\r\n\r\n items.forEach(createVideoLink);\r\n\r\n if (\"IntersectionObserver\" in window) {\r\n var thumbnailObserver = new IntersectionObserver(function (entries, observer) {\r\n entries.forEach(function (entry) {\r\n if (!entry.isIntersecting) return;\r\n observer.unobserve(entry.target);\r\n loadVideoThumbnail(entry.target);\r\n });\r\n }, { rootMargin: \"400px 200px\", threshold: 0.01 });\r\n\r\n items.forEach(function (item) { thumbnailObserver.observe(item); });\r\n } else {\r\n items.forEach(loadVideoThumbnail);\r\n }\r\n\r\n if (previous) {\r\n previous.addEventListener(\"click\", function () {\r\n move(-1, true);\r\n });\r\n }\r\n\r\n if (next) {\r\n next.addEventListener(\"click\", function () {\r\n move(1, true);\r\n });\r\n }\r\n\r\n viewport.addEventListener(\"keydown\", function (event) {\r\n if (event.key === \"ArrowLeft\") {\r\n event.preventDefault();\r\n move(-1, true);\r\n } else if (event.key === \"ArrowRight\") {\r\n event.preventDefault();\r\n move(1, true);\r\n }\r\n });\r\n\r\n viewport.addEventListener(\"pointerdown\", function (event) {\r\n if (event.pointerType !== \"mouse\") return;\r\n\r\n dragging = true;\r\n suppressVideoClick = false;\r\n dragStartX = event.clientX;\r\n dragStartScroll = viewport.scrollLeft;\r\n\r\n });\r\n\r\n viewport.addEventListener(\"pointermove\", function (event) {\r\n if (!dragging) return;\r\n\r\n var deltaX = event.clientX - dragStartX;\r\n\r\n if (!suppressVideoClick && Math.abs(deltaX) > 6) {\r\n suppressVideoClick = true;\r\n viewport.classList.add(\"is-dragging\");\r\n\r\n if (viewport.setPointerCapture) {\r\n viewport.setPointerCapture(event.pointerId);\r\n }\r\n }\r\n\r\n if (!suppressVideoClick) return;\r\n\r\n event.preventDefault();\r\n viewport.scrollLeft = dragStartScroll - deltaX;\r\n });\r\n\r\n viewport.addEventListener(\"click\", function (event) {\r\n if (!suppressVideoClick || !event.target.closest(\".works-loop__play\")) return;\r\n event.preventDefault();\r\n suppressVideoClick = false;\r\n }, true);\r\n\r\n function endDrag(event) {\r\n if (!dragging) return;\r\n dragging = false;\r\n viewport.classList.remove(\"is-dragging\");\r\n if (viewport.hasPointerCapture && viewport.hasPointerCapture(event.pointerId)) {\r\n viewport.releasePointerCapture(event.pointerId);\r\n }\r\n }\r\n\r\n viewport.addEventListener(\"pointerup\", endDrag);\r\n viewport.addEventListener(\"pointercancel\", endDrag);\r\n\r\n document.addEventListener(\"visibilitychange\", function () {\r\n if (document.hidden) pausePlayers(section);\r\n });\r\n }\r\n\r\n function bootWorksLoops() {\r\n list(document.querySelectorAll(\"[data-works-loop]\")).forEach(initWorksLoop);\r\n }\r\n\r\n if (document.readyState === \"loading\") {\r\n document.addEventListener(\"DOMContentLoaded\", bootWorksLoops);\r\n } else {\r\n bootWorksLoops();\r\n }\r\n}());\r\n;\r\n(function () {\r\n \"use strict\";\r\n\r\n function pad(value) {\r\n return String(value).padStart(2, \"0\");\r\n }\r\n\r\n function initBuilder(root) {\r\n if (!root || root.dataset.ready === \"true\") return;\r\n\r\n const steps = Array.from(root.querySelectorAll(\".builder-step\"));\r\n const counter = root.querySelector(\".builder-counter\");\r\n const progress = root.querySelector(\".builder-progress-bar\");\r\n const previous = root.querySelector(\".builder-prev\");\r\n const next = root.querySelector(\".builder-next\");\r\n const preview = root.querySelector(\".builder-preview-text\");\r\n const cf7Form = root.closest(\".wpcf7-form\");\r\n const antirobot = root.querySelector('[name=\"antirobot\"]');\r\n const submit = cf7Form\r\n ? cf7Form.querySelector('input[type=\"submit\"], button[type=\"submit\"]')\r\n : null;\r\n let submitWrap = root.querySelector(\".builder-submit-wrap\");\r\n const actions = root.querySelector(\".builder-actions\");\r\n\r\n function normalizeActionButtons() {\r\n if (!actions || !previous || !next || !submit) return;\r\n\r\n if (!submitWrap) {\r\n submitWrap = document.createElement(\"div\");\r\n submitWrap.className = \"builder-submit-wrap\";\r\n submitWrap.appendChild(submit);\r\n }\r\n\r\n const spinner = cf7Form\r\n ? cf7Form.querySelector(\".wpcf7-spinner\")\r\n : null;\r\n const backSlot = document.createElement(\"div\");\r\n const forwardSlot = document.createElement(\"div\");\r\n\r\n backSlot.className = \"builder-action-slot builder-action-slot--back\";\r\n forwardSlot.className = \"builder-action-slot builder-action-slot--forward\";\r\n\r\n backSlot.appendChild(previous);\r\n forwardSlot.appendChild(next);\r\n forwardSlot.appendChild(submitWrap);\r\n\r\n if (spinner && !submitWrap.contains(spinner)) {\r\n submitWrap.appendChild(spinner);\r\n }\r\n\r\n actions.replaceChildren(backSlot, forwardSlot);\r\n }\r\n\r\n normalizeActionButtons();\r\n\r\n const spamGate = {\r\n honeypot: null,\r\n startedAt: null,\r\n proof: null\r\n };\r\n\r\n const fields = {\r\n projectName: root.querySelector('[name=\"project-name\"]'),\r\n extraInfo: root.querySelector('[name=\"extra-info\"]'),\r\n name: root.querySelector('[name=\"your-name\"]'),\r\n email: root.querySelector('[name=\"your-email\"]'),\r\n phone: root.querySelector('[name=\"your-phone\"]'),\r\n service: root.querySelector('[name=\"service\"]'),\r\n deadline: root.querySelector('[name=\"deadline\"]'),\r\n budget: root.querySelector('[name=\"budget\"]'),\r\n message: root.querySelector('[name=\"your-message\"]')\r\n };\r\n\r\n const state = {\r\n currentStep: 0,\r\n service: \"Fotografia\",\r\n deadline: \"Jak najszybciej\",\r\n budget: \"Do 3 000 z\u0142\"\r\n };\r\n\r\n root.dataset.ready = \"true\";\r\n\r\n function proofFor(startedAt) {\r\n return String(((startedAt * 17) + 23) % 1000003);\r\n }\r\n\r\n function ensureSpamGate() {\r\n if (!cf7Form) return;\r\n\r\n let trap = root.querySelector(\".builder-spam-trap\");\r\n\r\n if (!trap) {\r\n trap = document.createElement(\"div\");\r\n trap.className = \"builder-spam-trap\";\r\n trap.setAttribute(\"aria-hidden\", \"true\");\r\n trap.innerHTML = [\r\n '<label for=\"portfolio-company-site\">Leave this field empty<\/label>',\r\n '<input id=\"portfolio-company-site\" type=\"text\" name=\"portfolio-company-site\"',\r\n ' autocomplete=\"off\" tabindex=\"-1\" value=\"\">',\r\n '<input type=\"hidden\" name=\"portfolio-started-at\" value=\"\">',\r\n '<input type=\"hidden\" name=\"portfolio-js-proof\" value=\"\">'\r\n ].join(\"\");\r\n cf7Form.appendChild(trap);\r\n }\r\n\r\n spamGate.honeypot = trap.querySelector('[name=\"portfolio-company-site\"]');\r\n spamGate.startedAt = trap.querySelector('[name=\"portfolio-started-at\"]');\r\n spamGate.proof = trap.querySelector('[name=\"portfolio-js-proof\"]');\r\n\r\n resetSpamGate();\r\n }\r\n\r\n function resetSpamGate() {\r\n const startedAt = Math.floor(Date.now() \/ 1000);\r\n\r\n if (spamGate.honeypot) spamGate.honeypot.value = \"\";\r\n if (spamGate.startedAt) spamGate.startedAt.value = String(startedAt);\r\n if (spamGate.proof) spamGate.proof.value = proofFor(startedAt);\r\n\r\n }\r\n\r\n function combinedContent() {\r\n return [\r\n value(fields.projectName),\r\n value(fields.extraInfo),\r\n value(fields.name),\r\n value(fields.email),\r\n value(fields.phone)\r\n ].join(\" \");\r\n }\r\n\r\n function passesClientSpamChecks() {\r\n const startedAt = spamGate.startedAt\r\n ? Number(spamGate.startedAt.value || 0)\r\n : 0;\r\n const content = combinedContent();\r\n const urls = content.match(\/(?:https?:\\\/\\\/|www\\.)\/gi) || [];\r\n\r\n if (spamGate.honeypot && spamGate.honeypot.value.trim()) return false;\r\n if (!startedAt) return false;\r\n if (!spamGate.proof || spamGate.proof.value !== proofFor(startedAt)) return false;\r\n if (urls.length > 3) return false;\r\n if (\/<\\s*(?:script|iframe|a)\\b|\\[url=\/i.test(content)) return false;\r\n\r\n return true;\r\n }\r\n\r\n function value(field) {\r\n return field ? String(field.value || \"\").trim() : \"\";\r\n }\r\n\r\n function buildMessage() {\r\n return [\r\n \"Dzie\u0144 dobry,\",\r\n \"\",\r\n \"chc\u0119 porozmawia\u0107 o nowym projekcie.\",\r\n \"\",\r\n \"Us\u0142uga: \" + state.service,\r\n \"Termin: \" + state.deadline,\r\n \"Bud\u017cet: \" + state.budget,\r\n \"Marka \/ projekt: \" + (value(fields.projectName) || \"\u2014\"),\r\n \"\",\r\n \"Opis projektu:\",\r\n value(fields.extraInfo) || \"\u2014\",\r\n \"\",\r\n \"Dane kontaktowe:\",\r\n \"Imi\u0119 i nazwisko: \" + (value(fields.name) || \"\u2014\"),\r\n \"E-mail: \" + (value(fields.email) || \"\u2014\"),\r\n \"Telefon: \" + (value(fields.phone) || \"\u2014\")\r\n ].join(\"\\n\");\r\n }\r\n\r\n function syncFields() {\r\n if (fields.service) fields.service.value = state.service;\r\n if (fields.deadline) fields.deadline.value = state.deadline;\r\n if (fields.budget) fields.budget.value = state.budget;\r\n\r\n const message = buildMessage();\r\n\r\n if (fields.message) {\r\n fields.message.value = message;\r\n fields.message.dispatchEvent(new Event(\"input\", { bubbles: true }));\r\n }\r\n\r\n if (preview) preview.value = message;\r\n }\r\n\r\n function syncAntirobot() {\r\n const confirmed = !antirobot || antirobot.checked;\r\n\r\n root.classList.toggle(\r\n \"has-antirobot-confirmation\",\r\n Boolean(antirobot && antirobot.checked)\r\n );\r\n\r\n if (submit) {\r\n submit.disabled = !confirmed;\r\n submit.setAttribute(\"aria-disabled\", String(!confirmed));\r\n }\r\n }\r\n\r\n function showStep(index, shouldFocus) {\r\n state.currentStep = Math.max(0, Math.min(index, steps.length - 1));\r\n\r\n steps.forEach(function (step, stepIndex) {\r\n step.classList.toggle(\"is-active\", stepIndex === state.currentStep);\r\n });\r\n\r\n root.classList.toggle(\r\n \"is-final\",\r\n state.currentStep === steps.length - 1\r\n );\r\n\r\n if (counter) {\r\n counter.textContent =\r\n pad(state.currentStep + 1) + \" \/ \" + pad(steps.length);\r\n }\r\n\r\n if (progress) {\r\n progress.style.width =\r\n (((state.currentStep + 1) \/ steps.length) * 100) + \"%\";\r\n }\r\n\r\n if (previous) previous.disabled = state.currentStep === 0;\r\n\r\n syncFields();\r\n\r\n if (shouldFocus) {\r\n const activeStep = steps[state.currentStep];\r\n const focusTarget = activeStep &&\r\n activeStep.querySelector(\r\n \".builder-option, .builder-input, .builder-textarea\"\r\n );\r\n\r\n root.scrollIntoView({ behavior: \"smooth\", block: \"nearest\" });\r\n\r\n if (focusTarget) {\r\n window.setTimeout(function () {\r\n focusTarget.focus({ preventScroll: true });\r\n }, 180);\r\n }\r\n }\r\n }\r\n\r\n root.querySelectorAll(\".builder-option\").forEach(function (button) {\r\n button.addEventListener(\"click\", function () {\r\n const fieldName = button.dataset.field;\r\n const selectedValue = button.dataset.value;\r\n\r\n if (!fieldName || !selectedValue) return;\r\n\r\n state[fieldName] = selectedValue;\r\n\r\n root\r\n .querySelectorAll('[data-field=\"' + fieldName + '\"]')\r\n .forEach(function (option) {\r\n option.classList.toggle(\"is-active\", option === button);\r\n });\r\n\r\n syncFields();\r\n });\r\n });\r\n\r\n [\r\n fields.projectName,\r\n fields.extraInfo,\r\n fields.name,\r\n fields.email,\r\n fields.phone\r\n ].forEach(function (field) {\r\n if (!field) return;\r\n field.addEventListener(\"input\", syncFields);\r\n field.addEventListener(\"change\", syncFields);\r\n });\r\n\r\n if (previous) {\r\n previous.addEventListener(\"click\", function () {\r\n showStep(state.currentStep - 1, true);\r\n });\r\n }\r\n\r\n if (next) {\r\n next.addEventListener(\"click\", function () {\r\n showStep(state.currentStep + 1, true);\r\n });\r\n }\r\n\r\n if (cf7Form) {\r\n cf7Form.addEventListener(\"submit\", function (event) {\r\n syncFields();\r\n\r\n if (!passesClientSpamChecks()) {\r\n event.preventDefault();\r\n event.stopImmediatePropagation();\r\n }\r\n }, true);\r\n\r\n cf7Form.addEventListener(\"wpcf7invalid\", function () {\r\n showStep(steps.length - 1, true);\r\n });\r\n\r\n cf7Form.addEventListener(\"wpcf7mailsent\", function () {\r\n state.service = \"Fotografia\";\r\n state.deadline = \"Jak najszybciej\";\r\n state.budget = \"Do 3 000 z\u0142\";\r\n\r\n if (antirobot) {\r\n antirobot.checked = false;\r\n }\r\n\r\n resetSpamGate();\r\n syncAntirobot();\r\n\r\n root.querySelectorAll(\".builder-option\").forEach(function (button) {\r\n button.classList.toggle(\r\n \"is-active\",\r\n button.dataset.value === state[button.dataset.field]\r\n );\r\n });\r\n\r\n window.setTimeout(function () {\r\n showStep(0, false);\r\n }, 50);\r\n });\r\n }\r\n\r\n ensureSpamGate();\r\n\r\n if (antirobot) {\r\n antirobot.addEventListener(\"change\", syncAntirobot);\r\n }\r\n\r\n syncAntirobot();\r\n showStep(0, false);\r\n }\r\n\r\n function boot() {\r\n document\r\n .querySelectorAll(\"[data-project-builder]\")\r\n .forEach(initBuilder);\r\n }\r\n\r\n if (document.readyState === \"loading\") {\r\n document.addEventListener(\"DOMContentLoaded\", boot);\r\n } else {\r\n boot();\r\n }\r\n\r\n document.addEventListener(\"wpcf7init\", boot);\r\n }());\r\n;\r\n(function () {\r\n const mobileServices = window.matchMedia('(max-width: 720px)');\r\n const items = Array.from(document.querySelectorAll('main > .grid .service-accordion'));\r\n\r\n function openAllMobileServices() {\r\n items.forEach(function (item) {\r\n item.classList.add('is-open');\r\n const button = item.querySelector('.service-accordion__heading');\r\n if (button) button.setAttribute('aria-expanded', 'true');\r\n });\r\n }\r\n\r\n function syncServiceMode() {\r\n if (mobileServices.matches) {\r\n openAllMobileServices();\r\n } else {\r\n items.forEach(function (item) {\r\n item.classList.add('is-open');\r\n const button = item.querySelector('.service-accordion__heading');\r\n if (button) button.setAttribute('aria-expanded', 'true');\r\n });\r\n }\r\n }\r\n\r\n items.forEach(function (item) {\r\n const button = item.querySelector('.service-accordion__heading');\r\n if (!button) return;\r\n\r\n button.addEventListener('click', function () {\r\n if (!mobileServices.matches) return;\r\n const open = item.classList.toggle('is-open');\r\n button.setAttribute('aria-expanded', open ? 'true' : 'false');\r\n });\r\n });\r\n\r\n syncServiceMode();\r\n if (typeof mobileServices.addEventListener === 'function') {\r\n mobileServices.addEventListener('change', syncServiceMode);\r\n } else if (typeof mobileServices.addListener === 'function') {\r\n mobileServices.addListener(syncServiceMode);\r\n }\r\n }());\r\n;\r\n(function () {\r\n \"use strict\";\r\n\r\n const root = document.querySelector('main > .grid .clients');\r\n const marquee = root && root.querySelector('.clients__marquee');\r\n const track = marquee && marquee.querySelector('.clients__track');\r\n const firstGroup = track && track.querySelector('.clients__group');\r\n const previousButton = root && root.querySelector('.clients__arrow--prev');\r\n const nextButton = root && root.querySelector('.clients__arrow--next');\r\n const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');\r\n const mobile = window.matchMedia('(max-width: 720px)');\r\n\r\n if (!root || !marquee || !track || !firstGroup || typeof track.animate !== 'function') return;\r\n\r\n const cycleDuration = 64000;\r\n const arrowDuration = 360;\r\n let cycleWidth = 0;\r\n let motion = null;\r\n let dragging = false;\r\n let pointerId = null;\r\n let startPointerX = 0;\r\n let startAnimationTime = 0;\r\n let arrowFrame = 0;\r\n let resizeFrame = 0;\r\n\r\n function measure() {\r\n cycleWidth = firstGroup.getBoundingClientRect().width;\r\n return cycleWidth;\r\n }\r\n\r\n function currentTime() {\r\n return motion && Number.isFinite(Number(motion.currentTime)) ? Number(motion.currentTime) : 0;\r\n }\r\n\r\n function createMotion(phase) {\r\n measure();\r\n if (!cycleWidth) return;\r\n\r\n if (motion) motion.cancel();\r\n\r\n motion = track.animate(\r\n [\r\n { transform: 'translate3d(0px, 0, 0)' },\r\n { transform: 'translate3d(' + (-cycleWidth) + 'px, 0, 0)' }\r\n ],\r\n {\r\n duration: cycleDuration,\r\n iterations: Infinity,\r\n easing: 'linear',\r\n fill: 'both'\r\n }\r\n );\r\n\r\n motion.currentTime = Math.max(0, Math.min(1, phase || 0)) * cycleDuration;\r\n\r\n if (reducedMotion.matches) {\r\n motion.pause();\r\n } else {\r\n motion.play();\r\n }\r\n }\r\n\r\n function pixelsToTime(px) {\r\n return cycleWidth ? (px \/ cycleWidth) * cycleDuration : 0;\r\n }\r\n\r\n function getStep() {\r\n const logos = firstGroup.querySelectorAll('.clients__logo');\r\n if (logos.length > 1) {\r\n return Math.abs(logos[1].getBoundingClientRect().left - logos[0].getBoundingClientRect().left);\r\n }\r\n return Math.max(140, marquee.clientWidth * 0.28);\r\n }\r\n\r\n function stopArrowTween() {\r\n if (arrowFrame) cancelAnimationFrame(arrowFrame);\r\n arrowFrame = 0;\r\n }\r\n\r\n function resumeMotion() {\r\n if (motion && !reducedMotion.matches && !dragging) motion.play();\r\n }\r\n\r\n function move(direction) {\r\n if (!motion || reducedMotion.matches) return;\r\n\r\n stopArrowTween();\r\n measure();\r\n if (!cycleWidth) return;\r\n\r\n motion.pause();\r\n\r\n const stepTime = pixelsToTime(getStep());\r\n let from = currentTime();\r\n\r\n \/* Keep previous-arrow movement positive so WAAPI never clamps at time 0. *\/\r\n if (direction < 0 && from < stepTime) {\r\n from += cycleDuration;\r\n motion.currentTime = from;\r\n }\r\n\r\n const to = from + (direction * stepTime);\r\n const started = performance.now();\r\n\r\n function tween(now) {\r\n const p = Math.min(1, (now - started) \/ arrowDuration);\r\n const eased = 1 - Math.pow(1 - p, 3);\r\n motion.currentTime = from + ((to - from) * eased);\r\n\r\n if (p < 1) {\r\n arrowFrame = requestAnimationFrame(tween);\r\n } else {\r\n arrowFrame = 0;\r\n resumeMotion();\r\n }\r\n }\r\n\r\n arrowFrame = requestAnimationFrame(tween);\r\n }\r\n\r\n if (previousButton) {\r\n previousButton.addEventListener('click', function () {\r\n move(-1);\r\n });\r\n }\r\n\r\n if (nextButton) {\r\n nextButton.addEventListener('click', function () {\r\n move(1);\r\n });\r\n }\r\n\r\n marquee.addEventListener('pointerdown', function (event) {\r\n if (!mobile.matches || event.pointerType === 'mouse' || !motion) return;\r\n\r\n stopArrowTween();\r\n dragging = true;\r\n pointerId = event.pointerId;\r\n startPointerX = event.clientX;\r\n startAnimationTime = currentTime();\r\n motion.pause();\r\n marquee.classList.add('is-dragging');\r\n\r\n if (typeof marquee.setPointerCapture === 'function') {\r\n marquee.setPointerCapture(pointerId);\r\n }\r\n });\r\n\r\n marquee.addEventListener('pointermove', function (event) {\r\n if (!dragging || event.pointerId !== pointerId || !motion) return;\r\n\r\n const dx = event.clientX - startPointerX;\r\n let nextTime = startAnimationTime - pixelsToTime(dx);\r\n\r\n if (nextTime < 0) {\r\n nextTime += Math.ceil(Math.abs(nextTime) \/ cycleDuration) * cycleDuration;\r\n }\r\n\r\n motion.currentTime = nextTime;\r\n });\r\n\r\n function releasePointer(event) {\r\n if (!dragging || (event && event.pointerId !== pointerId)) return;\r\n\r\n dragging = false;\r\n marquee.classList.remove('is-dragging');\r\n\r\n if (pointerId !== null && typeof marquee.releasePointerCapture === 'function') {\r\n try { marquee.releasePointerCapture(pointerId); } catch (error) {}\r\n }\r\n\r\n pointerId = null;\r\n resumeMotion();\r\n }\r\n\r\n marquee.addEventListener('pointerup', releasePointer);\r\n marquee.addEventListener('pointercancel', releasePointer);\r\n\r\n window.addEventListener('resize', function () {\r\n if (resizeFrame) cancelAnimationFrame(resizeFrame);\r\n resizeFrame = requestAnimationFrame(function () {\r\n resizeFrame = 0;\r\n const phase = ((currentTime() % cycleDuration) + cycleDuration) % cycleDuration \/ cycleDuration;\r\n createMotion(phase);\r\n });\r\n }, { passive: true });\r\n\r\n function syncMotionPreference() {\r\n if (!motion) return;\r\n\r\n if (reducedMotion.matches) {\r\n stopArrowTween();\r\n dragging = false;\r\n pointerId = null;\r\n marquee.classList.remove('is-dragging');\r\n motion.currentTime = 0;\r\n motion.pause();\r\n } else {\r\n motion.play();\r\n }\r\n }\r\n\r\n if (typeof reducedMotion.addEventListener === 'function') {\r\n reducedMotion.addEventListener('change', syncMotionPreference);\r\n } else if (typeof reducedMotion.addListener === 'function') {\r\n reducedMotion.addListener(syncMotionPreference);\r\n }\r\n\r\n root.classList.add('is-logo-carousel-enhanced');\r\n createMotion(0);\r\n}());\r\n(function () {\r\n \"use strict\";\r\n\r\n var root = document.querySelector(\"[data-testimonials]\");\r\n if (!root || root.dataset.ready === \"true\") return;\r\n root.dataset.ready = \"true\";\r\n\r\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.\"}];\r\n var stage = root.querySelector(\".testimonial-stage\");\r\n var quote = root.querySelector(\"[data-testimonial-quote]\");\r\n var name = root.querySelector(\"[data-testimonial-name]\");\r\n var role = root.querySelector(\"[data-testimonial-role]\");\r\n var previousButton = root.querySelector(\"[data-testimonial-prev]\");\r\n var nextButton = root.querySelector(\"[data-testimonial-next]\");\r\n var dots = root.querySelector(\"[data-testimonial-dots]\");\r\n\r\n var active = 0;\r\n var changingTimer = null;\r\n var autoplayTimer = null;\r\n var autoplayDelay = 6500;\r\n var pointerId = null;\r\n var startX = 0;\r\n var startY = 0;\r\n var paused = false;\r\n var reducedMotion = window.matchMedia && window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\r\n\r\n function updateDots() {\r\n if (!dots) return;\r\n\r\n Array.prototype.forEach.call(dots.children, function (dot, index) {\r\n dot.classList.toggle(\"is-active\", index === active);\r\n });\r\n }\r\n\r\n function buildDots() {\r\n if (!dots) return;\r\n\r\n dots.innerHTML = \"\";\r\n reviews.forEach(function (_, index) {\r\n var dot = document.createElement(\"span\");\r\n dot.className = \"testimonial-mobile-cue__dot\" + (index === active ? \" is-active\" : \"\");\r\n dots.appendChild(dot);\r\n });\r\n }\r\n\r\n function applyReview(index) {\r\n active = (index + reviews.length) % reviews.length;\r\n var review = reviews[active];\r\n\r\n quote.textContent = review.quote;\r\n name.textContent = review.name;\r\n role.textContent = review.role;\r\n updateDots();\r\n\r\n }\r\n\r\n function render(index) {\r\n clearTimeout(changingTimer);\r\n\r\n if (reducedMotion) {\r\n applyReview(index);\r\n return;\r\n }\r\n\r\n stage.classList.add(\"is-changing\");\r\n\r\n changingTimer = setTimeout(function () {\r\n applyReview(index);\r\n\r\n requestAnimationFrame(function () {\r\n stage.classList.remove(\"is-changing\");\r\n });\r\n }, 120);\r\n }\r\n\r\n function stopAutoplay() {\r\n clearInterval(autoplayTimer);\r\n autoplayTimer = null;\r\n }\r\n\r\n function startAutoplay() {\r\n if (reducedMotion || paused || reviews.length < 2) return;\r\n\r\n stopAutoplay();\r\n autoplayTimer = setInterval(function () {\r\n render(active + 1);\r\n }, autoplayDelay);\r\n }\r\n\r\n function restartAutoplay() {\r\n stopAutoplay();\r\n startAutoplay();\r\n }\r\n\r\n if (previousButton) {\r\n previousButton.addEventListener(\"click\", function () {\r\n render(active - 1);\r\n restartAutoplay();\r\n });\r\n }\r\n\r\n if (nextButton) {\r\n nextButton.addEventListener(\"click\", function () {\r\n render(active + 1);\r\n restartAutoplay();\r\n });\r\n }\r\n\r\n root.addEventListener(\"keydown\", function (event) {\r\n if (event.key === \"ArrowLeft\") {\r\n event.preventDefault();\r\n render(active - 1);\r\n restartAutoplay();\r\n } else if (event.key === \"ArrowRight\") {\r\n event.preventDefault();\r\n render(active + 1);\r\n restartAutoplay();\r\n }\r\n });\r\n\r\n stage.addEventListener(\"pointerdown\", function (event) {\r\n if (event.pointerType === \"mouse\") return;\r\n\r\n paused = true;\r\n stopAutoplay();\r\n\r\n pointerId = event.pointerId;\r\n startX = event.clientX;\r\n startY = event.clientY;\r\n\r\n if (stage.setPointerCapture) {\r\n stage.setPointerCapture(pointerId);\r\n }\r\n });\r\n\r\n stage.addEventListener(\"pointerup\", function (event) {\r\n if (pointerId === null || event.pointerId !== pointerId) return;\r\n\r\n var dx = event.clientX - startX;\r\n var dy = event.clientY - startY;\r\n\r\n pointerId = null;\r\n paused = false;\r\n\r\n if (Math.abs(dx) > 44 && Math.abs(dx) > Math.abs(dy)) {\r\n render(active + (dx < 0 ? 1 : -1));\r\n }\r\n\r\n startAutoplay();\r\n });\r\n\r\n stage.addEventListener(\"pointercancel\", function () {\r\n pointerId = null;\r\n paused = false;\r\n startAutoplay();\r\n });\r\n\r\n root.addEventListener(\"mouseenter\", function () {\r\n paused = true;\r\n stopAutoplay();\r\n });\r\n\r\n root.addEventListener(\"mouseleave\", function () {\r\n paused = false;\r\n startAutoplay();\r\n });\r\n\r\n root.addEventListener(\"focusin\", function () {\r\n paused = true;\r\n stopAutoplay();\r\n });\r\n\r\n root.addEventListener(\"focusout\", function (event) {\r\n if (!root.contains(event.relatedTarget)) {\r\n paused = false;\r\n startAutoplay();\r\n }\r\n });\r\n\r\n document.addEventListener(\"visibilitychange\", function () {\r\n if (document.hidden) {\r\n stopAutoplay();\r\n } else {\r\n startAutoplay();\r\n }\r\n });\r\n\r\n buildDots();\r\n applyReview(0);\r\n startAutoplay();\r\n}());\r\n lockLetterSlots();\r\n\r\n var slotResizeTimer;\r\n window.addEventListener(\"resize\", function() {\r\n clearTimeout(slotResizeTimer);\r\n slotResizeTimer = setTimeout(lockLetterSlots, 160);\r\n });\r\n\r\n<\/script>\r\n\r\n<script>\r\n(function () {\r\n \"use strict\";\r\n\r\n var title = document.querySelector(\"[data-construction-title]\");\r\n if (!title) return;\r\n\r\n var letters = Array.prototype.slice.call(\r\n title.querySelectorAll(\".construction-letter\")\r\n );\r\n if (!letters.length) return;\r\n\r\n var reducedMotion = window.matchMedia &&\r\n window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\r\n\r\n var finePointer = window.matchMedia &&\r\n window.matchMedia(\"(hover: hover) and (pointer: fine)\").matches;\r\n\r\n var active = false;\r\n var sequenceToken = 0;\r\n var touchResetTimer = null;\r\n\r\n \/* Intentionally varied collage. The first entries use local\/system fonts,\r\n so the effect is visible immediately even before web fonts load. *\/\r\n var fontPool = [\r\n { family: 'Impact, \"Arial Black\", fantasy', weight: \"400\", style: \"normal\" },\r\n { family: '\"Times New Roman\", Times, serif', weight: \"400\", style: \"italic\" },\r\n { family: '\"Courier New\", Courier, monospace', weight: \"700\", style: \"normal\" },\r\n { family: 'Verdana, Geneva, sans-serif', weight: \"400\", style: \"normal\" },\r\n { family: 'Georgia, \"Times New Roman\", serif', weight: \"700\", style: \"normal\" },\r\n { family: '\"Trebuchet MS\", Arial, sans-serif', weight: \"400\", style: \"italic\" },\r\n { family: '\"Arial Narrow\", \"Helvetica Neue\", Arial, sans-serif', weight: \"700\", style: \"normal\" },\r\n { family: '\"Abril Fatface\", Georgia, serif', weight: \"400\", style: \"normal\" },\r\n { family: '\"Anton\", Impact, \"Arial Black\", sans-serif', weight: \"400\", style: \"normal\" },\r\n { family: '\"Bebas Neue\", Impact, \"Arial Narrow\", sans-serif', weight: \"400\", style: \"normal\" },\r\n { family: '\"Cormorant Garamond\", Georgia, serif', weight: \"700\", style: \"italic\" },\r\n { family: '\"DM Serif Display\", Georgia, serif', weight: \"400\", style: \"italic\" },\r\n { family: '\"Playfair Display\", Georgia, serif', weight: \"700\", style: \"normal\" },\r\n { family: '\"UnifrakturMaguntia\", fantasy', weight: \"400\", style: \"normal\" },\r\n { family: '\"Roboto Mono\", \"Courier New\", monospace', weight: \"700\", style: \"normal\" }\r\n ];\r\n\r\n var collageOrder = [0, 1, 2, 3, 5, 6, 13, 4, 8, 10, 9, 11, 14, 7, 12];\r\n\r\n var baseRoman = {\r\n family: 'Georgia, \"Times New Roman\", Times, serif',\r\n weight: \"400\",\r\n style: \"normal\"\r\n };\r\n\r\n var baseItalic = {\r\n family: 'Georgia, \"Times New Roman\", Times, serif',\r\n weight: \"400\",\r\n style: \"italic\"\r\n };\r\n\r\n function applyFont(face, spec) {\r\n face.style.setProperty(\"font-family\", spec.family, \"important\");\r\n face.style.setProperty(\"font-weight\", spec.weight, \"important\");\r\n face.style.setProperty(\"font-style\", spec.style, \"important\");\r\n face.style.setProperty(\"letter-spacing\", \"0\", \"important\");\r\n }\r\n\r\n function buildLetter(letter) {\r\n var char = letter.textContent;\r\n var isItalic = !!letter.closest(\".construction-word--italic\");\r\n var base = isItalic ? baseItalic : baseRoman;\r\n\r\n letter.textContent = \"\";\r\n letter.dataset.char = char;\r\n letter.dataset.baseItalic = isItalic ? \"1\" : \"0\";\r\n\r\n var measure = document.createElement(\"span\");\r\n measure.className = \"construction-letter__measure\";\r\n measure.textContent = char;\r\n measure.style.setProperty(\"font-style\", base.style, \"important\");\r\n\r\n var face = document.createElement(\"i\");\r\n face.className = \"construction-letter__face\";\r\n face.setAttribute(\"aria-hidden\", \"true\");\r\n face.textContent = char;\r\n applyFont(face, base);\r\n\r\n letter.appendChild(measure);\r\n letter.appendChild(face);\r\n }\r\n\r\n function baseSpec(letter) {\r\n return letter.dataset.baseItalic === \"1\" ? baseItalic : baseRoman;\r\n }\r\n\r\n function setNormal(letter) {\r\n var face = letter.querySelector(\".construction-letter__face\");\r\n if (!face) return;\r\n\r\n applyFont(face, baseSpec(letter));\r\n letter.style.setProperty(\"--letter-x\", \"0em\");\r\n letter.style.setProperty(\"--letter-y\", \"0em\");\r\n letter.style.setProperty(\"--letter-r\", \"0deg\");\r\n }\r\n\r\n function setCollage(letter, index) {\r\n var face = letter.querySelector(\".construction-letter__face\");\r\n if (!face) return;\r\n\r\n var spec = fontPool[collageOrder[index % collageOrder.length]];\r\n applyFont(face, spec);\r\n\r\n \/* Movement remains translate + rotate only. *\/\r\n var direction = index % 2 === 0 ? -1 : 1;\r\n var yPattern = [-0.10, 0.07, -0.035, 0.115, -0.065, 0.04];\r\n var xPattern = [0.000, 0.010, -0.006, 0.014, -0.010];\r\n\r\n var y = yPattern[index % yPattern.length];\r\n var x = xPattern[index % xPattern.length];\r\n var r = direction * (1.4 + (index % 4) * 0.95);\r\n\r\n letter.style.setProperty(\"--letter-x\", x.toFixed(3) + \"em\");\r\n letter.style.setProperty(\"--letter-y\", y.toFixed(3) + \"em\");\r\n letter.style.setProperty(\"--letter-r\", r.toFixed(2) + \"deg\");\r\n }\r\n\r\n function strike(letter, callback) {\r\n if (reducedMotion) {\r\n callback();\r\n return;\r\n }\r\n\r\n letter.classList.remove(\"is-typing\");\r\n void letter.offsetWidth;\r\n letter.classList.add(\"is-typing\");\r\n\r\n window.setTimeout(function () {\r\n callback();\r\n\r\n window.setTimeout(function () {\r\n letter.classList.remove(\"is-typing\");\r\n }, 82);\r\n }, 54);\r\n }\r\n\r\n function typeIn(onComplete) {\r\n active = true;\r\n sequenceToken += 1;\r\n var token = sequenceToken;\r\n\r\n letters.forEach(function (letter, index) {\r\n window.setTimeout(function () {\r\n if (!active || token !== sequenceToken) return;\r\n\r\n strike(letter, function () {\r\n setCollage(letter, index);\r\n });\r\n }, index * 58);\r\n });\r\n\r\n window.setTimeout(function () {\r\n if (active && token === sequenceToken && typeof onComplete === \"function\") {\r\n onComplete();\r\n }\r\n }, Math.max(0, (letters.length - 1) * 58) + 170);\r\n }\r\n\r\n function typeOut(onComplete) {\r\n active = false;\r\n sequenceToken += 1;\r\n var token = sequenceToken;\r\n\r\n letters.slice().reverse().forEach(function (letter, reverseIndex) {\r\n window.setTimeout(function () {\r\n if (token !== sequenceToken) return;\r\n\r\n strike(letter, function () {\r\n setNormal(letter);\r\n });\r\n }, reverseIndex * 34);\r\n });\r\n\r\n window.setTimeout(function () {\r\n if (token === sequenceToken && typeof onComplete === \"function\") {\r\n onComplete();\r\n }\r\n }, Math.max(0, (letters.length - 1) * 34) + 170);\r\n }\r\n\r\n function setHoveredLetter(letter, index, transformed) {\r\n var hoverToken = (parseInt(letter.dataset.hoverToken || \"0\", 10) + 1);\r\n letter.dataset.hoverToken = String(hoverToken);\r\n\r\n strike(letter, function () {\r\n if (String(hoverToken) !== letter.dataset.hoverToken) return;\r\n if (transformed) {\r\n setCollage(letter, index);\r\n } else {\r\n setNormal(letter);\r\n }\r\n });\r\n }\r\n\r\n \/* Build stable base-font slots, then stay completely normal initially. *\/\r\n letters.forEach(function (letter) {\r\n buildLetter(letter);\r\n setNormal(letter);\r\n });\r\n\r\n var introComplete = false;\r\n\r\n if (finePointer) {\r\n \/* After the automatic intro, desktop interaction is per-letter only:\r\n the glyph under the cursor uses the same collage font assigned to it\r\n in the full animation, and returns to the base face on mouseleave. *\/\r\n letters.forEach(function (letter, index) {\r\n letter.addEventListener(\"mouseenter\", function () {\r\n if (!introComplete) return;\r\n setHoveredLetter(letter, index, true);\r\n });\r\n\r\n letter.addEventListener(\"mouseleave\", function () {\r\n if (!introComplete) return;\r\n setHoveredLetter(letter, index, false);\r\n });\r\n });\r\n } else {\r\n \/* Touch keeps the existing whole-title tap interaction after the intro. *\/\r\n title.addEventListener(\"click\", function () {\r\n if (!introComplete) return;\r\n\r\n window.clearTimeout(touchResetTimer);\r\n\r\n if (active) {\r\n typeOut();\r\n return;\r\n }\r\n\r\n typeIn();\r\n\r\n touchResetTimer = window.setTimeout(function () {\r\n if (active) typeOut();\r\n }, 4200);\r\n });\r\n }\r\n\r\n \/* Automatic opening sequence: start after 0.5 s, show the current\r\n collage-font state, then restore the original title. Only after that\r\n do desktop per-letter hover interactions become active. *\/\r\n window.setTimeout(function () {\r\n typeIn(function () {\r\n window.setTimeout(function () {\r\n typeOut(function () {\r\n introComplete = true;\r\n\r\n if (finePointer) {\r\n letters.forEach(function (letter, index) {\r\n if (letter.matches && letter.matches(\":hover\")) {\r\n setHoveredLetter(letter, index, true);\r\n }\r\n });\r\n }\r\n });\r\n }, 650);\r\n });\r\n }, 500);\r\n\r\n document.addEventListener(\"visibilitychange\", function () {\r\n if (document.hidden && active) {\r\n window.clearTimeout(touchResetTimer);\r\n typeOut(function () {\r\n if (!introComplete) introComplete = true;\r\n });\r\n }\r\n });\r\n}());\r\n<\/script>\r\n\r\n<\/body>\r\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>Strona w przebudowie Strona w przebudowie Do tego czasu mo\u017cesz znale\u017a\u0107 mnie tutaj: Us\u0142ugi Video Filmy promocyjne, social media, relacje z event\u00f3w, wywiady i animacje dopasowane do marki oraz kana\u0142u komunikacji. Web design Strony i landing page\u2019e z naciskiem na prost\u0105 struktur\u0119, estetyk\u0119, responsywno\u015b\u0107 i wygodn\u0105 obs\u0142ug\u0119. Content day Zdj\u0119cia, video i inne formaty publikacji w jednym procesie. Zapas tre\u015bci na ca\u0142y miesi\u0105c w jeden dzie\u0144 zdj\u0119ciowy. Fotografia Sesje wizerunkowe, produktowe i eventowe, od koncepcji po gotowe zdj\u0119cia do kampanii, stron i social media. Design Kompletna identyfikacja wizualna, projekty logo, prezentacje, strony internetowe, materia\u0142y do social media, kampanii i komunikacji firmowej. Marketing Koncepcje kampanii, social media, content i komunikacja, zaplanowane wok\u00f3\u0142 konkretnych cel\u00f3w biznesowych. Consulting Konsultacje kreatywne i strategiczne pomagaj\u0105ce uporz\u0105dkowa\u0107 mark\u0119, komunikacj\u0119 i dalsze dzia\u0142ania. AI content Obrazy produktowe, mockupy, workflow i tre\u015bci wspierane AI. Wybrani klienci \u2190 \u2192 Bazaar Bazaar Wybrane strony internetowe \u2190 \u2192 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 \u2014 projekt strony Amber Org, obecnie w trakcie realizacji. Wybrane realizacje \u2190 \u2192 Rekomendacje \u2190 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 \u2192 Kontakt Porozmawiajmy o projekcie. Wybierz us\u0142ug\u0119, termin i bud\u017cet krok po kroku. Na ko\u0144cu wpiszesz dane kontaktowe, zobaczysz gotow\u0105 wiadomo\u015b\u0107 i wy\u015blesz zapytanie.<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-1008","page","type-page","status-publish","hentry"],"_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\/1008","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=1008"}],"version-history":[{"count":325,"href":"https:\/\/michalplebaniak.com\/en\/wp-json\/wp\/v2\/pages\/1008\/revisions"}],"predecessor-version":[{"id":2845,"href":"https:\/\/michalplebaniak.com\/en\/wp-json\/wp\/v2\/pages\/1008\/revisions\/2845"}],"wp:attachment":[{"href":"https:\/\/michalplebaniak.com\/en\/wp-json\/wp\/v2\/media?parent=1008"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}