/* source-sha256: e7b484796432f0bcfad6cef36117b33cd047c61e0b015db443ec24ccd63a7b58 */
:root { --xt-black: #030303; --xt-white: #f4f6f7; --xt-blue: #14bff2; --xt-grey: #85888b; } html, body { margin: 0; padding: 0; overflow-x: hidden; background: var(--xt-black); } body .elementor-widget-html:has(#xtalento-v3), body .elementor-widget-container:has(#xtalento-v3), body .e-con:has(#xtalento-v3) { overflow: visible !important; } .xt-site, .xt-site * { box-sizing: border-box; } .xt-site { position: relative; width: 100%; overflow: clip; background: var(--xt-black); color: var(--xt-white); font-family: "Bricolage Grotesque", sans-serif; } .xt-hero-stage { position: relative; width: 100%; height: 100vh; height: 100svh; margin: 0; padding: 0; background: #030303; } .xt-hero { position: relative; width: 100%; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; background: radial-gradient( circle at 61% 48%, rgba(20,191,242,.075), transparent 31% ), #030303; } #xt-webgl { position: absolute; inset: 0; z-index: 4; display: block; width: 100%; height: 100%; pointer-events: none; } .xt-bg-glow { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient( circle at 61% 47%, rgba(20,191,242,.06), transparent 27% ); } .xt-vignette { position: absolute; inset: 0; z-index: 7; pointer-events: none; background: radial-gradient( circle at 57% 48%, transparent 0%, transparent 27%, rgba(3,3,3,.08) 46%, rgba(3,3,3,.34) 75%, rgba(3,3,3,.84) 100% ); } .xt-noise { position: absolute; inset: 0; z-index: 80; opacity: .028; pointer-events: none; mix-blend-mode: screen; background-image: url( "data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.7'/%3E%3C/svg%3E" ); } .xt-header { position: absolute; top: 0; left: 0; z-index: 100; width: 100%; padding: 27px 35px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; } .xt-logo { justify-self: start; color: #fff; text-decoration: none; font-size: 17px; font-weight: 670; line-height: 1; letter-spacing: -.045em; } .xt-logo span { margin-left: 3px; color: var(--xt-blue); font-weight: 400; } .xt-nav { display: flex; align-items: center; gap: 28px; } .xt-nav a { position: relative; color: rgba(255,255,255,.55); text-decoration: none; font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: .11em; transition: color .25s ease; } .xt-nav a::after { content: ""; position: absolute; left: 0; bottom: -7px; width: 100%; height: 1px; background: var(--xt-blue); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; } .xt-nav a:hover { color: #fff; } .xt-nav a:hover::after { transform: scaleX(1); } .xt-header-right { justify-self: end; display: flex; align-items: center; gap: 22px; } .xt-languages { display: flex; align-items: center; gap: 10px; } .xt-languages a, .xt-languages span { text-decoration: none; font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: .08em; } .xt-languages a { color: rgba(255,255,255,.28); } .xt-languages .active { color: var(--xt-blue); } .xt-menu-trigger { display: none; padding: 0; border: 0; background: transparent; font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: .10em; color: rgba(255,255,255,.62); cursor: pointer; } .xt-menu-trigger span { margin-left: 4px; color: var(--xt-blue); } .xt-meta-left { position: absolute; top: 104px; left: 35px; z-index: 30; display: flex; gap: 7px; font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: .11em; color: rgba(255,255,255,.29); } .xt-cyan { color: var(--xt-blue); } .xt-meta-right { position: absolute; top: 102px; right: 35px; z-index: 30; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-family: "IBM Plex Mono", monospace; font-size: 9px; line-height: 1.45; letter-spacing: .12em; color: rgba(255,255,255,.25); } .xt-copy { position: absolute; top: 23%; left: 3vw; right: 3vw; z-index: 11; pointer-events: none; transform-origin: left center; will-change: opacity, transform; } .xt-eyebrow { display: flex; align-items: center; gap: 10px; margin-left: .3vw; margin-bottom: 19px; font-family: "IBM Plex Mono", monospace; font-size: 10px; line-height: 1.4; letter-spacing: .12em; color: rgba(255,255,255,.43); } .xt-eyebrow i { display: block; flex: 0 0 auto; width: 25px; height: 1px; background: var(--xt-blue); box-shadow: 0 0 13px rgba(20,191,242,.5); } .xt-h1 { position: relative; width: max-content; max-width: 96vw; margin: 0; padding: 0; white-space: nowrap; font-size: clamp( 68px, 7.15vw, 140px ); font-weight: 670; line-height: .81; letter-spacing: -.068em; color: var(--xt-white); } .xt-h1-a, .xt-h1-b { position: relative; display: inline; } .xt-h1-b { margin-left: .045em; } .xt-h1-b::before { content: attr(data-text); position: absolute; inset: 0; z-index: -1; color: transparent; -webkit-text-stroke: 1px rgba(20,191,242,.46); transform: translate( .047em, .047em ); opacity: .82; } .xt-h1-b::after { content: ""; position: absolute; right: -.04em; bottom: -.11em; width: 28%; height: 2px; background: linear-gradient( 90deg, transparent, rgba(20,191,242,.33), var(--xt-blue) ); box-shadow: 0 0 11px rgba(20,191,242,.28); } .xt-title-meta { display: flex; align-items: center; gap: 11px; margin-top: 22px; margin-left: .3vw; font-family: "IBM Plex Mono", monospace; font-size: 10px; line-height: 1.4; letter-spacing: .10em; color: rgba(255,255,255,.29); } .xt-title-meta i { display: block; flex: 0 0 auto; width: 39px; height: 1px; background: rgba(255,255,255,.15); } .xt-intro { position: absolute; left: 35px; bottom: 29px; z-index: 30; max-width: 510px; will-change: opacity, transform; } .xt-intro-title { margin: 0; font-size: 14px; font-weight: 450; line-height: 1.4; letter-spacing: -.015em; color: rgba(255,255,255,.75); } .xt-intro-text { max-width: 430px; margin: 6px 0 0; font-family: "IBM Plex Mono", monospace; font-size: 10px; line-height: 1.55; color: rgba(255,255,255,.36); } .xt-side { position: absolute; top: 50%; right: 24px; z-index: 28; transform: translateY(-50%) rotate(90deg); transform-origin: center; white-space: nowrap; font-family: "IBM Plex Mono", monospace; font-size: 8px; letter-spacing: .18em; color: rgba(255,255,255,.18); } .xt-scroll-guide { position: absolute; left: 50%; bottom: 17px; z-index: 35; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; will-change: opacity, transform; } .xt-scroll-guide strong { font-family: "IBM Plex Mono", monospace; font-size: 10px; font-weight: 400; letter-spacing: .12em; color: rgba(255,255,255,.72); } .xt-scroll-guide > span { font-family: "IBM Plex Mono", monospace; font-size: 9px; letter-spacing: .10em; color: var(--xt-blue); } .xt-scroll-guide b { font-size: 19px; line-height: 1; font-weight: 400; color: var(--xt-blue); animation: xt-arrow 1.55s ease-in-out infinite; } @keyframes xt-arrow { 0%, 100% { opacity: .40; transform: translateY(0); } 50% { opacity: 1; transform: translateY(5px); } } .xt-scroll-track { position: relative; width: 1px; height: 28px; overflow: hidden; background: rgba(255,255,255,.14); } .xt-scroll-track i { position: absolute; left: 0; top: -100%; width: 100%; height: 100%; background: var(--xt-blue); box-shadow: 0 0 9px rgba(20,191,242,.7); animation: xt-track 1.65s cubic-bezier(.65,0,.25,1) infinite; } @keyframes xt-track { from { transform: translateY(0); } to { transform: translateY(200%); } } .xt-selected { position: absolute; left: 50%; top: 50%; z-index: 45; width: min( 92vw, 1540px ); opacity: 0; visibility: hidden; transform: translate3d( -50%, calc(-50% + 70px), 0 ); pointer-events: none; will-change: opacity, transform; } .xt-selected-index { margin-bottom: 15px; font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .13em; color: var(--xt-blue); } .xt-selected-title { font-size: clamp( 82px, 11.3vw, 220px ); font-weight: 670; line-height: .70; letter-spacing: -.077em; color: rgba(247,248,249,.98); } .xt-selected-title span { display: block; color: rgba(255,255,255,.35); } .xt-selected-footer { margin-top: 34px; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; } .xt-selected-footer > span { max-width: 440px; font-family: "IBM Plex Mono", monospace; font-size: 10px; line-height: 1.55; letter-spacing: .07em; color: rgba(255,255,255,.37); } .xt-selected-footer strong { display: flex; align-items: center; gap: 10px; font-family: "IBM Plex Mono", monospace; font-size: 10px; font-weight: 400; letter-spacing: .10em; color: rgba(255,255,255,.62); } .xt-selected-footer strong i { font-style: normal; font-size: 18px; color: var(--xt-blue); } .xt-work { position: relative; z-index: 120; width: 100%; min-height: 100vh; margin: 0; padding: 30px 35px 130px; background: #030303; color: var(--xt-white); border-top: 1px solid rgba(255,255,255,.08); } .xt-container { position: relative; width: 100%; max-width: 1800px; margin: 0 auto; } .xt-work-entry { min-height: 42px; margin-bottom: 42px; display: flex; align-items: center; gap: 12px; font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: .11em; } .xt-work-entry > div { display: flex; gap: 5px; } .xt-work-entry > div span:first-child { color: var(--xt-blue); } .xt-work-entry > div span:last-child { color: rgba(255,255,255,.22); } .xt-work-entry strong { font-weight: 400; color: rgba(255,255,255,.43); } .xt-work-entry > i { display: block; width: 70px; height: 1px; background: rgba(255,255,255,.13); } .xt-project-top { display: grid; grid-template-columns: 75px minmax(0,1fr) auto; align-items: end; gap: 25px; margin-bottom: 35px; } .xt-project-number { align-self: start; padding-top: 14px; font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .11em; color: var(--xt-blue); } .xt-project-number span { color: rgba(255,255,255,.23); } .xt-project-top h2 { margin: 0; font-size: clamp( 77px, 10.5vw, 205px ); font-weight: 670; line-height: .71; letter-spacing: -.075em; color: rgba(247,248,249,.98); } .xt-project-top h2 span { color: rgba(255,255,255,.34); } .xt-project-tags { padding-bottom: 6px; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; font-family: "IBM Plex Mono", monospace; font-size: 10px; line-height: 1.35; letter-spacing: .10em; color: rgba(255,255,255,.38); } .xt-project-copy { margin: 0 0 42px 100px; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; } .xt-project-copy p { max-width: 540px; margin: 0; font-size: clamp( 19px, 1.55vw, 29px ); line-height: 1.25; letter-spacing: -.025em; color: rgba(255,255,255,.68); } .xt-project-copy > div { font-family: "IBM Plex Mono", monospace; font-size: 9px; line-height: 1.5; letter-spacing: .11em; color: rgba(255,255,255,.29); } .xt-project-media { width: 100%; } .xt-media-placeholder { position: relative; width: 100%; height: min( 70vw, 820px ); overflow: hidden; border: 1px solid rgba(255,255,255,.07); background: radial-gradient( circle at 66% 35%, rgba(20,191,242,.11), transparent 28% ), linear-gradient( 135deg, #111416, #050505 ); } .xt-media-placeholder::before, .xt-media-placeholder::after { content: ""; position: absolute; left: 50%; top: 50%; width: 57%; height: 1px; background: rgba(20,191,242,.28); } .xt-media-placeholder::before { transform: translate(-50%,-50%) rotate(17deg); } .xt-media-placeholder::after { transform: translate(-50%,-50%) rotate(-17deg); } .xt-media-placeholder span { position: absolute; left: 20px; bottom: 18px; font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: .11em; color: rgba(255,255,255,.27); } .xt-mobile-menu { position: fixed; inset: 0; z-index: 99999; padding: 25px 20px; display: flex; flex-direction: column; justify-content: center; visibility: hidden; opacity: 0; pointer-events: none; background: rgba(3,3,3,.985); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transition: opacity .28s ease, visibility .28s ease; } .xt-mobile-menu.open { visibility: visible; opacity: 1; pointer-events: auto; } .xt-menu-close { position: absolute; top: 24px; right: 20px; padding: 0; border: 0; background: transparent; color: rgba(255,255,255,.65); font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .11em; cursor: pointer; } .xt-menu-close span { margin-left: 5px; color: var(--xt-blue); } .xt-mobile-menu nav { display: flex; flex-direction: column; } .xt-mobile-menu nav a { position: relative; padding: 13px 0; color: #fff; text-decoration: none; font-size: clamp( 52px, 15vw, 82px ); font-weight: 620; line-height: .88; letter-spacing: -.06em; } .xt-mobile-menu nav small { display: inline-block; width: 30px; vertical-align: top; margin-top: 9px; font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: .10em; color: var(--xt-blue); } .xt-mobile-languages { position: absolute; left: 20px; bottom: 25px; display: flex; gap: 15px; font-family: "IBM Plex Mono", monospace; font-size: 12px; } .xt-mobile-languages span { color: var(--xt-blue); } .xt-mobile-languages a { color: rgba(255,255,255,.40); text-decoration: none; } @media (max-width: 1100px) { .xt-header { grid-template-columns: 1fr auto; } .xt-nav { display: none; } .xt-menu-trigger { display: block; } .xt-h1 { font-size: clamp( 64px, 8.5vw, 100px ); } .xt-project-top { grid-template-columns: 60px 1fr; } .xt-project-tags { grid-column: 2; flex-direction: row; align-items: flex-start; flex-wrap: wrap; margin-top: 8px; } } @media (max-width: 767px) { .xt-header { padding: 20px 18px; } .xt-logo { font-size: 18px; } .xt-header-right { gap: 14px; } .xt-languages { gap: 8px; } .xt-languages a, .xt-languages span { font-size: 11px; } .xt-menu-trigger { font-size: 11px; } .xt-meta-left { top: 78px; left: 18px; font-size: 11px; } .xt-meta-right, .xt-side { display: none; } .xt-copy { top: 18%; left: 17px; right: 17px; } .xt-eyebrow { margin-left: 1px; margin-bottom: 15px; font-size: 11px; line-height: 1.45; letter-spacing: .065em; } .xt-eyebrow i { width: 17px; } .xt-h1 { width: 100%; max-width: 100%; white-space: normal; font-size: clamp( 58px, 15.5vw, 86px ); line-height: .76; letter-spacing: -.065em; } .xt-h1-a, .xt-h1-b { display: block; } .xt-h1-b { margin-left: 0; } .xt-h1-b::before { -webkit-text-stroke: .8px rgba(20,191,242,.48); } .xt-title-meta { margin-top: 19px; margin-left: 1px; gap: 8px; font-size: 11px; line-height: 1.4; } .xt-title-meta i { width: 20px; } .xt-intro { left: 18px; right: 18px; bottom: 120px; max-width: none; } .xt-intro-title { font-size: 13px; line-height: 1.4; } .xt-intro-text { margin-top: 6px; max-width: 340px; font-size: 10px; line-height: 1.48; } .xt-scroll-guide { left: 50%; right: auto; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: max-content; align-items: center; text-align: center; } .xt-scroll-guide strong { font-size: 10px; letter-spacing: .07em; white-space: nowrap; } .xt-scroll-guide > span { margin-top: 1px; font-size: 9px; } .xt-scroll-guide b { align-self: center; margin: 2px 0 0; font-size: 21px; } .xt-scroll-track { align-self: center; margin: 0; height: 30px; } .xt-selected { width: calc( 100% - 34px ); } .xt-selected-index { margin-bottom: 12px; font-size: 11px; } .xt-selected-title { font-size: clamp( 61px, 18vw, 99px ); line-height: .73; } .xt-selected-footer { margin-top: 24px; display: block; } .xt-selected-footer > span { display: block; max-width: 300px; font-size: 10px; line-height: 1.5; } .xt-selected-footer strong { margin-top: 18px; font-size: 10px; } .xt-work { padding: 24px 18px 90px; } .xt-work-entry { margin-bottom: 30px; font-size: 10px; } .xt-work-entry > i { width: 32px; } .xt-project-top { display: block; margin-bottom: 27px; } .xt-project-number { margin-bottom: 18px; padding-top: 0; font-size: 11px; } .xt-project-top h2 { font-size: clamp( 62px, 17.6vw, 98px ); line-height: .73; } .xt-project-tags { margin-top: 23px; padding: 0; display: flex; flex-direction: row; flex-wrap: wrap; gap: 7px 14px; font-size: 10px; line-height: 1.4; } .xt-project-copy { margin: 0 0 28px; display: block; } .xt-project-copy p { max-width: 94%; font-size: 19px; } .xt-project-copy > div { margin-top: 16px; font-size: 10px; line-height: 1.5; } .xt-media-placeholder { min-height: 490px; height: 72vh; } .xt-media-placeholder span { right: 20px; font-size: 10px; line-height: 1.4; } } @media (max-width: 390px) { .xt-languages { display: none; } .xt-h1 { font-size: 14.8vw; } } @media (prefers-reduced-motion: reduce) { .xt-scroll-guide b, .xt-scroll-track i { animation: none; } } :root { --xt-black: #030303; --xt-white: #f4f6f7; --xt-blue: #14bff2; --xt-lime: #c8ff3d; --xt-line: rgba(255,255,255,.12); --xt-pad: clamp(24px, 2.65vw, 50px); } .xt-site { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } .xt-site a, .xt-mobile-menu a { text-decoration: none !important; } .xt-site a:focus-visible, .xt-site button:focus-visible, .xt-mobile-menu a:focus-visible, .xt-mobile-menu button:focus-visible { outline: 1px solid var(--xt-lime); outline-offset: 5px; } .xt-header { position: fixed !important; inset: 0 0 auto 0; z-index: 1000 !important; min-height: 88px; padding: 0 var(--xt-pad) !important; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid rgba(255,255,255,.075); background: linear-gradient(180deg, rgba(3,3,3,.93), rgba(3,3,3,.48) 72%, transparent); transition: min-height .45s cubic-bezier(.16,1,.30,1), padding .45s cubic-bezier(.16,1,.30,1), background .35s ease, border-color .35s ease, box-shadow .35s ease; } .xt-header::after { content: ""; position: absolute; left: var(--xt-pad); bottom: -1px; width: clamp(90px, 10vw, 160px); height: 1px; background: var(--xt-lime); opacity: .9; } .xt-logo { display: inline-flex; align-items: center; font-size: clamp(20px, 1.5vw, 25px) !important; font-weight: 700 !important; letter-spacing: -.055em !important; } .xt-logo::after { content: ""; width: 25px; height: 2px; margin-left: 12px; background: var(--xt-lime); transform-origin: left center; animation: xtPremiumLogoSignal 4.6s ease-in-out infinite; } @keyframes xtPremiumLogoSignal { 0%, 100% { transform: scaleX(.42); opacity: .45; } 50% { transform: scaleX(1); opacity: 1; } } .xt-nav { gap: clamp(22px, 2.15vw, 38px) !important; } .xt-nav a, .xt-header-links a, .xt-languages a, .xt-languages span, .xt-menu-trigger { font-size: 12px !important; line-height: 1 !important; letter-spacing: .075em !important; } .xt-nav a { color: rgba(255,255,255,.66) !important; } .xt-nav a::after { bottom: -10px !important; height: 1px !important; background: var(--xt-lime) !important; } .xt-nav a:hover { color: #fff !important; } .xt-header-right { gap: 18px !important; } .xt-header-links { display: flex; gap: 13px; } .xt-header-links a { color: rgba(255,255,255,.56) !important; } .xt-header-links a:hover { color: #fff !important; } .xt-languages { gap: 9px !important; } .xt-languages a { color: rgba(255,255,255,.31) !important; } .xt-languages .active { color: var(--xt-lime) !important; } .xt-header:not(.is-compact) .xt-menu-trigger { display: none !important; } .xt-header.is-compact { top: 12px !important; left: 50% !important; right: auto !important; width: max-content !important; min-height: 46px !important; padding: 0 0 0 16px !important; display: flex !important; align-items: stretch !important; gap: 15px !important; overflow: hidden; border: 1px solid rgba(255,255,255,.13) !important; background: rgba(5,6,6,.82) !important; box-shadow: 0 14px 38px rgba(0,0,0,.3); backdrop-filter: blur(18px) saturate(1.15); -webkit-backdrop-filter: blur(18px) saturate(1.15); transform: translateX(-50%) !important; animation: xtPremiumCompactIn .45s cubic-bezier(.16,1,.30,1) both; } @keyframes xtPremiumCompactIn { from { opacity: 0; transform: translateX(-50%) translateY(-10px) scale(.96); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } } .xt-header.is-compact::after, .xt-header.is-compact .xt-logo::before { display: none !important; } .xt-header.is-compact .xt-nav, .xt-header.is-compact .xt-header-links, .xt-header.is-compact .xt-languages { display: none !important; } .xt-header.is-compact .xt-logo { min-height: 44px; padding: 0 !important; display: inline-flex !important; font-size: 15px !important; } .xt-header.is-compact .xt-logo::after { width: 10px; height: 2px; margin-left: 9px; animation: none; background: var(--xt-blue); } .xt-header.is-compact .xt-header-right { display: flex !important; align-items: stretch; } .xt-header.is-compact .xt-menu-trigger { min-height: 44px; padding: 0 15px !important; display: inline-flex !important; align-items: center; border: 0 !important; border-left: 1px solid var(--xt-line) !important; background: transparent !important; color: rgba(255,255,255,.88) !important; } .xt-header.is-compact .xt-menu-trigger span { margin-left: 7px; color: var(--xt-lime) !important; transition: transform .25s ease; } .xt-header.is-compact .xt-menu-trigger:hover span { transform: rotate(90deg); } .xt-hero { background: radial-gradient(circle at 62% 47%, rgba(20,191,242,.085), transparent 29%), radial-gradient(circle at 66% 54%, rgba(200,255,61,.025), transparent 25%), #030303 !important; } .xt-hero::after { content: ""; position: absolute; inset: 0; z-index: 8; pointer-events: none; background: linear-gradient(90deg, rgba(3,3,3,.35), transparent 24%, transparent 76%, rgba(3,3,3,.28)), linear-gradient(180deg, transparent 72%, rgba(3,3,3,.52)); } .xt-copy { top: 43% !important; left: var(--xt-pad) !important; right: var(--xt-pad) !important; z-index: 20 !important; pointer-events: none; } .xt-eyebrow { margin: 0 0 20px !important; font-size: 12px !important; letter-spacing: .09em !important; color: rgba(255,255,255,.58) !important; } .xt-eyebrow i { width: 34px !important; background: var(--xt-lime) !important; } .xt-h1 { width: max-content !important; max-width: calc(100vw - (var(--xt-pad) * 2)) !important; font-size: clamp(58px, 6.75vw, 116px) !important; line-height: .82 !important; letter-spacing: -.066em !important; } .xt-h1-a, .xt-h1-b { display: inline-block !important; white-space: nowrap !important; } .xt-h1-b { margin-left: .045em !important; } .xt-h1-b::before { -webkit-text-stroke-color: rgba(20,191,242,.54) !important; } .xt-h1-b::after { height: 2px !important; background: var(--xt-blue) !important; } .xt-title-meta { max-width: 650px !important; margin: 26px 0 0 !important; display: block !important; font-family: "Bricolage Grotesque", sans-serif !important; font-size: clamp(16px, 1.2vw, 20px) !important; line-height: 1.48 !important; letter-spacing: -.012em !important; color: rgba(255,255,255,.68) !important; } .xt-hero-cta { margin-top: 29px !important; display: flex !important; align-items: center; gap: 21px !important; pointer-events: auto !important; } .xt-hero-cta a { pointer-events: auto !important; } .xt-hero-cta-primary { min-height: 48px !important; padding: 0 17px !important; display: inline-flex !important; align-items: center; gap: 28px !important; border: 1px solid rgba(255,255,255,.22) !important; background: rgba(4,5,5,.48) !important; font: 500 12px/1 "IBM Plex Mono", monospace !important; letter-spacing: .075em !important; color: rgba(255,255,255,.9) !important; transition: transform .25s ease, border-color .25s ease, background .25s ease; } .xt-hero-cta-primary b { color: var(--xt-lime) !important; } .xt-hero-cta-primary:hover { transform: translateY(-2px); border-color: var(--xt-lime) !important; background: rgba(200,255,61,.07) !important; } .xt-hero-cta-secondary { font-size: 14px !important; display: inline-flex; align-items: center; min-height: 44px; padding: 8px 0; border-bottom: 1px solid rgba(200,255,61,.55) !important; color: rgba(255,255,255,.82) !important; transition: color .25s ease; } .xt-hero-cta-secondary:hover { color: #fff !important; } .xt-meta-right { top: 111px !important; right: var(--xt-pad) !important; font-size: 12px !important; color: rgba(255,255,255,.32) !important; } .xt-side { right: 20px !important; font-size: 11px !important; color: rgba(255,255,255,.23) !important; } .xt-scroll-guide { bottom: 20px !important; gap: 7px !important; } .xt-scroll-guide strong { font-size: 12px !important; letter-spacing: .08em !important; } .xt-scroll-guide b { color: var(--xt-lime) !important; } .xt-scroll-track { height: 34px !important; } .xt-scroll-track i { background: var(--xt-blue) !important; } .xt-selected { width: min(91vw, 1520px) !important; z-index: 50 !important; } .xt-selected::before { content: "SELECTED"; display: block; margin-bottom: 22px; font: 500 12px/1 "IBM Plex Mono", monospace; letter-spacing: .1em; color: var(--xt-lime); } .xt-selected-title { font-size: clamp(66px, 9.8vw, 184px) !important; line-height: .72 !important; letter-spacing: -.072em !important; } .xt-selected-title span { color: rgba(255,255,255,.27) !important; } .xt-selected-footer { margin-top: 36px !important; } .xt-selected-footer > span { max-width: none !important; font-size: 12px !important; color: rgba(255,255,255,.46) !important; } .xt-work-showcase { position: relative; z-index: 120; min-height: 0 !important; padding: 0 0 108px !important; overflow: hidden; border-top: 1px solid rgba(255,255,255,.11) !important; background: #050505 !important; } .xt-showcase-viewport { position: relative; width: 100%; overflow: hidden; transition: height .55s cubic-bezier(.16,1,.30,1); touch-action: pan-y; outline: none; } .xt-showcase-track { display: flex; width: 100%; align-items: flex-start; transition: transform .72s cubic-bezier(.16,1,.30,1); will-change: transform; } .xt-showcase-slide { flex: 0 0 100%; min-width: 0; opacity: .15; transition: opacity .45s ease; pointer-events: none; } .xt-showcase-slide.is-active { opacity: 1; pointer-events: auto; } .xt-showcase-card { width: 100%; max-width: 1800px; margin: 0 auto; padding: clamp(42px,5vw,86px) var(--xt-pad) 64px; display: grid; grid-template-columns: minmax(0,1.55fr) minmax(260px,.7fr); grid-template-areas: "meta meta" "heading heading" "tags links" "description cta" "main main"; column-gap: clamp(30px,5vw,86px); } .xt-showcase-meta { grid-area: meta; padding-bottom: 24px; display: flex; align-items: center; gap: 13px; border-bottom: 1px solid var(--xt-line); font: 500 12px/1 "IBM Plex Mono", monospace; letter-spacing: .08em; } .xt-showcase-meta span { color: var(--xt-lime); } .xt-showcase-meta small { font: inherit; color: rgba(255,255,255,.42); } .xt-showcase-heading { grid-area: heading; position: relative; padding: clamp(32px,4vw,62px) 0 34px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 28px; } .xt-showcase-heading h2 { min-width: 0; margin: 0; font-size: clamp(62px, 8.5vw, 158px); font-weight: 670; line-height: .73; letter-spacing: -.074em; overflow-wrap: anywhere; } .xt-showcase-heading > div { padding-bottom: 8px; font: 500 12px/1.45 "IBM Plex Mono", monospace; letter-spacing: .07em; text-align: right; color: rgba(255,255,255,.42); } .xt-showcase-tags { grid-area: tags; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .xt-showcase-tags span, .xt-client-links-label { font: 500 12px/1 "IBM Plex Mono", monospace; letter-spacing: .055em; } .xt-showcase-tags span { padding: 8px 10px; border: 1px solid rgba(255,255,255,.13); color: rgba(255,255,255,.54); } .xt-client-links { grid-area: links; justify-self: end; display: flex; align-items: center; gap: 13px; } .xt-client-links-label { color: rgba(255,255,255,.3); } .xt-client-links a, .xt-client-links button { padding: 8px 0; border: 0; background: transparent; font: 500 12px/1 "IBM Plex Mono", monospace; letter-spacing: .055em; color: rgba(255,255,255,.72); } .xt-client-links button[disabled] { opacity: .28; } .xt-client-links b { color: var(--xt-blue); } .xt-showcase-description { grid-area: description; padding-top: 25px; } .xt-showcase-description p { max-width: 730px; margin: 0; font-size: clamp(18px,1.45vw,25px); line-height: 1.43; letter-spacing: -.025em; color: rgba(255,255,255,.67); } .xt-case-study-cta { grid-area: cta; justify-self: end; align-self: end; padding-top: 25px; } .xt-case-study-cta a { min-height: 46px; padding: 0 15px; display: inline-flex; align-items: center; gap: 22px; border: 1px solid rgba(255,255,255,.16); font: 500 12px/1 "IBM Plex Mono", monospace; letter-spacing: .055em; transition: border-color .25s ease, background .25s ease; } .xt-case-study-cta a:hover { border-color: var(--xt-lime); background: rgba(200,255,61,.06); } .xt-case-study-cta b { color: var(--xt-lime); } .xt-showcase-main { grid-area: main; position: relative; min-height: clamp(440px,53vw,850px); margin-top: clamp(35px,4vw,62px); overflow: hidden; border: 1px solid rgba(255,255,255,.08); background: #0b0d0e; } .xt-showcase-main > img { display: block; width: 100%; height: 100%; min-height: inherit; object-fit: cover; transition: transform 1s cubic-bezier(.16,1,.30,1), filter .5s ease; } .xt-showcase-slide.is-active .xt-showcase-main:hover > img { transform: scale(1.018); } .xt-showcase-placeholder { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; font-size: clamp(48px,8vw,150px); font-weight: 670; line-height: .8; letter-spacing: -.07em; } .xt-showcase-placeholder::before, .xt-showcase-placeholder::after { content: ""; position: absolute; pointer-events: none; } .xt-showcase-placeholder::before { inset: 0; opacity: .18; background-image: linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px); background-size: 70px 70px; } .xt-showcase-placeholder::after { width: 42%; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.18); transform: rotate(45deg); } .xt-showcase-placeholder span { position: relative; z-index: 2; } .xt-preview-dipa { background: radial-gradient(circle at 68% 32%,rgba(20,191,242,.2),transparent 30%),#0a0f12; } .xt-preview-rosengarten { background: radial-gradient(circle at 40% 45%,rgba(200,255,61,.13),transparent 30%),#11110c; } .xt-preview-zanon { background: linear-gradient(135deg,#171817,#080908); } .xt-preview-barber { background: radial-gradient(circle at 62% 44%,rgba(20,191,242,.18),transparent 31%),#071014; } .xt-project-static-nav { display: none !important; } .xt-project-mid-arrow { position: absolute; top: 58%; z-index: 5; width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.14); background: rgba(4,5,5,.72); backdrop-filter: blur(14px); color: #fff; font-size: 18px; cursor: pointer; transition: opacity .25s ease, border-color .25s ease, transform .25s ease; } .xt-project-mid-arrow:hover { border-color: var(--xt-lime); } .xt-project-mid-arrow:disabled { opacity: 0; pointer-events: none; } .xt-project-mid-arrow-prev { left: 14px; } .xt-project-mid-arrow-next { right: 14px; } .xt-project-selector-wrap { padding: 0 var(--xt-pad); border-top: 1px solid var(--xt-line); border-bottom: 1px solid var(--xt-line); } .xt-project-selector { width: min(100%,1800px); margin: 0 auto; display: grid; grid-template-columns: repeat(5,1fr); } .xt-project-tab { min-height: 78px; padding: 0 16px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; border: 0; border-right: 1px solid var(--xt-line); background: transparent; color: rgba(255,255,255,.42); text-align: left; cursor: pointer; transition: color .25s ease, background .25s ease; } .xt-project-tab:first-child { border-left: 1px solid var(--xt-line); } .xt-project-tab span, .xt-project-tab strong { font: 500 12px/1 "IBM Plex Mono", monospace; letter-spacing: .045em; } .xt-project-tab span { color: rgba(255,255,255,.27); } .xt-project-tab.is-active { color: #fff; background: rgba(255,255,255,.035); } .xt-project-tab.is-active span { color: var(--xt-lime); } @media (max-width: 1100px) { .xt-header:not(.is-compact) { grid-template-columns: auto 1fr auto; } .xt-header:not(.is-compact) .xt-nav { display: none !important; } .xt-header:not(.is-compact) .xt-menu-trigger { display: inline-flex !important; align-items: center; } } @media (max-width: 767px) { :root { --xt-pad: 18px; } .xt-header:not(.is-compact) { min-height: 112px; padding: 18px var(--xt-pad) 16px !important; grid-template-columns: minmax(0,1fr) auto !important; grid-template-areas: "logo menu" "links langs"; row-gap: 15px; background: linear-gradient(180deg,rgba(3,3,3,.98),rgba(3,3,3,.72) 80%,transparent); } .xt-header:not(.is-compact)::after { left: var(--xt-pad); width: 76px; } .xt-header:not(.is-compact) .xt-logo { grid-area: logo; font-size: 20px !important; } .xt-header:not(.is-compact) .xt-logo::after { width: 16px; } .xt-header:not(.is-compact) .xt-nav { display: none !important; } .xt-header:not(.is-compact) .xt-header-right { display: contents !important; } .xt-header:not(.is-compact) .xt-menu-trigger { grid-area: menu; justify-self: end; display: inline-flex !important; align-items: center; color: rgba(255,255,255,.84) !important; } .xt-header:not(.is-compact) .xt-menu-trigger span { color: var(--xt-lime) !important; } .xt-header:not(.is-compact) .xt-header-links { grid-area: links; display: flex !important; gap: 14px; } .xt-header:not(.is-compact) .xt-languages { grid-area: langs; justify-self: end; display: flex !important; } .xt-header:not(.is-compact) .xt-header-links a, .xt-header:not(.is-compact) .xt-languages a, .xt-header:not(.is-compact) .xt-languages span, .xt-header:not(.is-compact) .xt-menu-trigger { font-size: 12px !important; } .xt-header.is-compact { top: 10px !important; min-height: 43px !important; } .xt-header.is-compact .xt-logo, .xt-header.is-compact .xt-menu-trigger { min-height: 41px; } .xt-copy { top: 26.5% !important; left: var(--xt-pad) !important; right: var(--xt-pad) !important; } .xt-eyebrow { margin-bottom: 17px !important; font-size: 12px !important; letter-spacing: .065em !important; } .xt-eyebrow i { width: 21px !important; } .xt-h1 { width: 100% !important; max-width: 100% !important; font-size: clamp(44px, 13.8vw, 66px) !important; line-height: .79 !important; letter-spacing: -.061em !important; } .xt-h1-a, .xt-h1-b { display: block !important; width: max-content; max-width: 100%; } .xt-h1-b { margin: .1em 0 0 !important; } .xt-title-meta { max-width: 34ch !important; margin-top: 22px !important; font-size: 16px !important; line-height: 1.45 !important; } .xt-hero-cta { margin-top: 24px !important; gap: 15px !important; flex-wrap: wrap; } .xt-hero-cta-primary { min-height: 46px !important; font-size: 12px !important; } .xt-hero-cta-secondary { font-size: 14px !important; } .xt-meta-right, .xt-side { display: none !important; } .xt-scroll-guide { bottom: calc(15px + env(safe-area-inset-bottom)) !important; } .xt-scroll-guide strong { font-size: 12px !important; } .xt-selected { width: calc(100% - 36px) !important; } .xt-selected::before { margin-bottom: 17px; font-size: 12px; } .xt-selected-title { font-size: clamp(54px,15vw,78px) !important; line-height: .74 !important; } .xt-selected-footer { margin-top: 25px !important; } .xt-selected-footer > span { font-size: 12px !important; line-height: 1.5 !important; } .xt-work-showcase { padding-bottom: 78px !important; } .xt-showcase-card { padding: 34px var(--xt-pad) 45px; display: grid; grid-template-columns: 1fr; grid-template-areas: "meta" "heading" "tags" "description" "links" "main" "cta"; } .xt-showcase-meta { padding-bottom: 18px; } .xt-showcase-heading { padding: 26px 0 23px; display: block; } .xt-showcase-heading h2 { font-size: clamp(47px,13.5vw,70px); line-height: .77; overflow-wrap: normal; } .xt-showcase-heading > div { margin-top: 18px; padding: 0; text-align: left; font-size: 12px; } .xt-showcase-tags { gap: 7px; } .xt-showcase-tags span { padding: 7px 8px; } .xt-showcase-description { padding-top: 22px; } .xt-showcase-description p { font-size: 17px; line-height: 1.5; } .xt-client-links { justify-self: start; margin-top: 18px; } .xt-showcase-main { min-height: 0; height: auto; aspect-ratio: 4/3; margin-top: 30px; } .xt-showcase-main > img { min-height: 0; } .xt-showcase-placeholder { position: absolute; font-size: clamp(38px,11vw,58px); text-align: center; } .xt-showcase-placeholder::before { background-size: 42px 42px; } .xt-case-study-cta { justify-self: start; padding-top: 20px; } .xt-project-mid-arrow { top: auto; bottom: 115px; width: 43px; height: 43px; } .xt-project-mid-arrow-prev { left: 8px; } .xt-project-mid-arrow-next { right: 8px; } .xt-project-selector-wrap { padding: 0; overflow-x: auto; scrollbar-width: none; } .xt-project-selector-wrap::-webkit-scrollbar { display: none; } .xt-project-selector { width: max-content; min-width: 100%; display: flex; } .xt-project-tab { min-width: 112px; min-height: 66px; padding: 0 12px; } .xt-project-tab span, .xt-project-tab strong { font-size: 12px; } } @media (max-width: 390px) { .xt-header:not(.is-compact) .xt-header-links { gap: 10px; } .xt-header:not(.is-compact) .xt-header-links a, .xt-header:not(.is-compact) .xt-languages a, .xt-header:not(.is-compact) .xt-languages span { font-size: 11px !important; } .xt-h1 { font-size: 13.2vw !important; } } @media (prefers-reduced-motion: reduce) { .xt-logo::after, .xt-header.is-compact, .xt-scroll-guide b, .xt-scroll-track i { animation: none !important; } .xt-showcase-track { transition: none !important; } } .xt-h1, .xt-selected-title, .xt-showcase-heading h2, .xt-mobile-menu nav a { font-family: "Unbounded", sans-serif !important; font-weight: 500 !important; } .xt-h1, .xt-h1-a, .xt-h1-b { color: var(--xt-white) !important; text-shadow: none !important; } .xt-h1-b::before, .xt-h1-b::after { content: none !important; display: none !important; } .xt-h1 { font-size: clamp(52px, 5.8vw, 106px) !important; font-weight: 500 !important; line-height: .87 !important; letter-spacing: -.06em !important; } .xt-logo::after { background: var(--xt-lime) !important; } .xt-eyebrow i { background: var(--xt-lime) !important; box-shadow: 0 0 13px rgba(200,255,61,.32) !important; } .xt-scroll-track i { background: var(--xt-blue) !important; } .xt-header:not(.is-compact) { position: fixed !important; inset: 0 0 auto 0 !important; min-height: 112px !important; padding: 19px var(--xt-pad) 17px !important; display: grid !important; grid-template-columns: auto minmax(20px,1fr) auto !important; grid-template-rows: auto auto !important; grid-template-areas: "logo empty right" "nav nav nav" !important; align-items: center !important; row-gap: 16px !important; border: 0 !important; background: linear-gradient(180deg,rgba(3,3,3,.94),rgba(3,3,3,.68) 72%,transparent) !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .xt-header:not(.is-compact)::before { content: ""; position: absolute; left: var(--xt-pad); right: var(--xt-pad); top: 58px; height: 1px; background: rgba(255,255,255,.1); pointer-events: none; } .xt-header:not(.is-compact)::after { content: ""; position: absolute; left: var(--xt-pad) !important; top: 55px; bottom: auto !important; width: 7px !important; height: 7px !important; background: var(--xt-lime) !important; opacity: 1 !important; box-shadow: 0 0 13px rgba(200,255,61,.38); } .xt-header:not(.is-compact) .xt-logo { grid-area: logo; padding-left: 18px; font-size: clamp(21px,1.55vw,26px) !important; } .xt-header:not(.is-compact) .xt-logo::after { display: none !important; } .xt-header:not(.is-compact) .xt-nav { grid-area: nav; justify-self: start !important; padding-left: 18px; display: flex !important; gap: clamp(25px,2.3vw,42px) !important; } .xt-header:not(.is-compact) .xt-nav a { padding: 0 !important; font-size: 13px !important; letter-spacing: .065em !important; color: rgba(255,255,255,.68) !important; transition: color .2s ease, transform .2s ease !important; } .xt-header:not(.is-compact) .xt-nav a::after { display: none !important; } .xt-header:not(.is-compact) .xt-nav a:hover { color: var(--xt-lime) !important; transform: translateX(3px); } .xt-header:not(.is-compact) .xt-header-right { grid-area: right; justify-self: end; align-self: center; gap: 20px !important; } .xt-header:not(.is-compact) .xt-header-links a, .xt-header:not(.is-compact) .xt-languages a, .xt-header:not(.is-compact) .xt-languages span { font-size: 12px !important; } .xt-header:not(.is-compact) .xt-menu-trigger { display: none !important; } .xt-header.is-compact { position: fixed !important; top: 14px !important; left: auto !important; right: var(--xt-pad) !important; width: max-content !important; min-height: 48px !important; padding: 0 5px 0 17px !important; display: flex !important; align-items: center !important; gap: 14px !important; overflow: hidden; border: 1px solid rgba(255,255,255,.14) !important; border-radius: 999px; background: rgba(5,6,6,.86) !important; box-shadow: 0 12px 34px rgba(0,0,0,.28); backdrop-filter: blur(18px) saturate(1.08); -webkit-backdrop-filter: blur(18px) saturate(1.08); transform: none !important; animation: xtHeaderCapsuleIn .42s cubic-bezier(.16,1,.30,1) both !important; } @keyframes xtHeaderCapsuleIn { from { opacity: 0; transform: translateY(-9px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .xt-header.is-compact::before, .xt-header.is-compact::after { display: none !important; } .xt-header.is-compact .xt-logo { min-height: 46px !important; padding: 0 !important; font-size: 14px !important; letter-spacing: -.045em !important; } .xt-header.is-compact .xt-logo::after { display: block !important; width: 5px !important; height: 5px !important; margin-left: 10px !important; border-radius: 50%; background: var(--xt-lime) !important; box-shadow: 0 0 10px rgba(200,255,61,.4); } .xt-header.is-compact .xt-menu-trigger { min-height: 38px !important; margin: 4px 0 !important; padding: 0 13px !important; border: 0 !important; border-radius: 999px; background: rgba(255,255,255,.075) !important; font-size: 12px !important; } .xt-header.is-compact .xt-menu-trigger span { color: var(--xt-lime) !important; } .xt-project-static-nav { position: absolute; top: clamp(38px,4.7vw,78px); right: var(--xt-pad); z-index: 40; display: flex !important; gap: 7px; } .xt-project-static-arrow { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; background: rgba(6,7,7,.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: #fff; font-size: 18px; cursor: pointer; transition: border-color .2s ease, background .2s ease, opacity .2s ease; } .xt-project-static-arrow:hover { border-color: var(--xt-lime); background: rgba(200,255,61,.07); } .xt-project-static-arrow:disabled { opacity: .22; cursor: default; } .xt-project-mid-arrow { display: none !important; } .xt-showcase-meta { padding-right: 116px !important; } @media (max-width: 1100px) and (min-width: 768px) { .xt-header:not(.is-compact) .xt-nav { display: flex !important; } .xt-header:not(.is-compact) .xt-menu-trigger { display: none !important; } .xt-header:not(.is-compact) .xt-header-links { display: none !important; } } @media (max-width: 767px) { .xt-header:not(.is-compact) { min-height: 105px !important; padding: 15px var(--xt-pad) 14px !important; grid-template-columns: minmax(0,1fr) auto !important; grid-template-rows: auto auto !important; grid-template-areas: "logo menu" "links langs" !important; row-gap: 15px !important; } .xt-header:not(.is-compact)::before { left: var(--xt-pad); right: var(--xt-pad); top: 57px; } .xt-header:not(.is-compact)::after { left: var(--xt-pad) !important; top: 54px; width: 7px !important; height: 7px !important; } .xt-header:not(.is-compact) .xt-logo { grid-area: logo; padding-left: 17px; font-size: 20px !important; } .xt-header:not(.is-compact) .xt-nav { display: none !important; } .xt-header:not(.is-compact) .xt-header-right { display: contents !important; } .xt-header:not(.is-compact) .xt-menu-trigger { grid-area: menu; justify-self: end; min-height: 38px; padding: 0 13px !important; display: inline-flex !important; align-items: center; border: 1px solid rgba(255,255,255,.14) !important; border-radius: 999px; background: rgba(255,255,255,.035) !important; } .xt-header:not(.is-compact) .xt-header-links { grid-area: links; padding-left: 17px; display: flex !important; } .xt-header:not(.is-compact) .xt-languages { grid-area: langs; justify-self: end; display: flex !important; } .xt-header.is-compact { top: 10px !important; right: 12px !important; min-height: 45px !important; padding-left: 15px !important; } .xt-header.is-compact .xt-logo { min-height: 43px !important; } .xt-header.is-compact .xt-menu-trigger { min-height: 35px !important; } .xt-copy { top: 25.5% !important; } .xt-h1 { font-size: clamp(42px, 11.8vw, 58px) !important; line-height: .88 !important; letter-spacing: -.058em !important; } .xt-selected-title, .xt-showcase-heading h2 { font-family: "Unbounded", sans-serif !important; font-weight: 500 !important; } .xt-selected-title { font-size: clamp(45px,12.8vw,66px) !important; line-height: .8 !important; } .xt-showcase-heading h2 { font-size: clamp(42px,11.5vw,60px) !important; line-height: .82 !important; } .xt-project-static-nav { top: 27px; right: var(--xt-pad); gap: 6px; } .xt-project-static-arrow { width: 39px; height: 39px; font-size: 16px; } .xt-showcase-meta { min-height: 42px; padding-right: 96px !important; } } @media (max-width: 390px) { .xt-h1 { font-size: 11.25vw !important; } } .xt-header, .xt-header:not(.is-compact), .xt-header.is-compact { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; border-radius: 0 !important; transform: none !important; overflow: visible !important; animation: none !important; } .xt-header::before, .xt-header::after, .xt-header:not(.is-compact)::before, .xt-header:not(.is-compact)::after, .xt-header.is-compact::before, .xt-header.is-compact::after, .xt-logo::after, .xt-header.is-compact .xt-logo::after, .xt-menu-trigger::before, .xt-menu-trigger::after { content: none !important; display: none !important; } .xt-header .xt-logo { font-family: "Unbounded", sans-serif !important; font-weight: 600 !important; letter-spacing: -.045em !important; color: #fff !important; } .xt-header .xt-nav a, .xt-header .xt-header-links a, .xt-header .xt-languages a, .xt-header .xt-languages span, .xt-header .xt-menu-trigger { font-family: "IBM Plex Mono", monospace !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1 !important; letter-spacing: .075em !important; white-space: nowrap; } .xt-header .xt-nav a, .xt-header .xt-header-links a, .xt-header .xt-languages a, .xt-header .xt-menu-trigger { transition: color .22s ease, opacity .22s ease !important; } .xt-header .xt-nav a::after { display: none !important; } .xt-header .xt-nav a:hover, .xt-header .xt-header-links a:hover, .xt-header .xt-menu-trigger:hover { color: #fff !important; } .xt-header .xt-languages .active { color: var(--xt-lime) !important; } .xt-header .xt-languages a { color: rgba(255,255,255,.60) !important; } .xt-header .xt-header-links { display: flex; align-items: center; gap: 15px; } .xt-header .xt-header-links a { color: rgba(255,255,255,.62) !important; } .xt-header .xt-menu-trigger, .xt-header:not(.is-compact) .xt-menu-trigger, .xt-header.is-compact .xt-menu-trigger { min-width: 0 !important; width: auto !important; min-height: 44px !important; height: 44px !important; margin: 0 !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: flex-end !important; overflow: visible !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: rgba(255,255,255,.82) !important; font-size: 12px !important; cursor: pointer; } .xt-header .xt-menu-trigger span, .xt-header:not(.is-compact) .xt-menu-trigger span, .xt-header.is-compact .xt-menu-trigger span { position: static !important; width: auto !important; height: auto !important; margin: 0 0 0 7px !important; overflow: visible !important; background: none !important; color: var(--xt-lime) !important; font-family: "IBM Plex Mono", monospace !important; font-size: 16px !important; font-weight: 300 !important; line-height: 1 !important; transition: transform .28s cubic-bezier(.16,1,.30,1) !important; } .xt-header .xt-menu-trigger:hover span, .xt-header .xt-menu-trigger[aria-expanded="true"] span { transform: rotate(45deg) !important; } .xt-header:not(.is-compact) { min-height: 80px !important; padding: 0 var(--xt-pad) !important; display: grid !important; grid-template-columns: minmax(180px,1fr) auto minmax(300px,1fr) !important; grid-template-rows: 1fr !important; grid-template-areas: "logo nav right" !important; align-items: center !important; gap: clamp(25px,3.2vw,58px) !important; border: 0 !important; background: linear-gradient(180deg,rgba(3,3,3,.9),rgba(3,3,3,.42) 74%,transparent) !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .xt-header:not(.is-compact) .xt-logo { grid-area: logo; justify-self: start; min-height: 44px !important; padding: 0 !important; display: inline-flex !important; align-items: center; font-size: 19px !important; } .xt-header:not(.is-compact) .xt-nav { grid-area: nav; justify-self: center !important; padding: 0 !important; display: flex !important; gap: clamp(25px,2.35vw,41px) !important; } .xt-header:not(.is-compact) .xt-nav a { color: rgba(255,255,255,.62) !important; } .xt-header:not(.is-compact) .xt-header-right { grid-area: right; justify-self: end; display: flex !important; align-items: center; gap: 20px !important; } .xt-header:not(.is-compact) .xt-menu-trigger { display: none !important; } .xt-header.is-compact { min-height: 60px !important; padding: 0 var(--xt-pad) !important; display: grid !important; grid-template-columns: minmax(0,1fr) auto !important; grid-template-rows: 1fr !important; align-items: center !important; gap: 24px !important; border: 0 !important; border-bottom: 1px solid rgba(255,255,255,.1) !important; background: rgba(3,3,3,.86) !important; box-shadow: 0 12px 36px rgba(0,0,0,.18) !important; backdrop-filter: blur(18px) saturate(1.06) !important; -webkit-backdrop-filter: blur(18px) saturate(1.06) !important; } .xt-header.is-compact .xt-logo { justify-self: start; min-height: 58px !important; padding: 0 !important; display: inline-flex !important; align-items: center; font-size: 15px !important; } .xt-header.is-compact .xt-nav { display: none !important; } .xt-header.is-compact .xt-header-right { justify-self: end; min-height: 58px !important; display: flex !important; align-items: center; gap: clamp(14px,2.1vw,25px) !important; } .xt-header.is-compact .xt-header-links, .xt-header.is-compact .xt-languages { display: none !important; } @media (max-width: 1100px) and (min-width: 768px) { .xt-header:not(.is-compact) { grid-template-columns: minmax(0,1fr) auto !important; grid-template-areas: "logo right" !important; } .xt-header:not(.is-compact) .xt-nav { display: none !important; } .xt-header:not(.is-compact) .xt-header-right { gap: 22px !important; } .xt-header:not(.is-compact) .xt-header-links { display: flex !important; } .xt-header:not(.is-compact) .xt-header-links a:first-child { display: none !important; } .xt-header:not(.is-compact) .xt-languages, .xt-header:not(.is-compact) .xt-languages a, .xt-header:not(.is-compact) .xt-languages .active { display: inline-flex !important; } .xt-header:not(.is-compact) .xt-menu-trigger { display: inline-flex !important; } } @media (max-width: 767px) { .xt-header:not(.is-compact) { min-height: 82px !important; padding: 12px 18px 11px !important; display: grid !important; grid-template-columns: minmax(0,1fr) auto auto !important; grid-template-rows: auto auto !important; grid-template-areas: "logo langs menu" "links langs menu" !important; align-items: center !important; column-gap: clamp(9px,3.2vw,15px) !important; row-gap: 3px !important; background: linear-gradient(180deg,rgba(3,3,3,.94),rgba(3,3,3,.48) 76%,transparent) !important; } .xt-header.is-compact { min-height: 58px !important; padding: 0 18px !important; display: grid !important; grid-template-columns: minmax(0,1fr) auto !important; grid-template-areas: "logo right" !important; gap: 14px !important; border-bottom-color: rgba(255,255,255,.085) !important; background: rgba(3,3,3,.89) !important; } .xt-header:not(.is-compact) .xt-logo { grid-area: logo; justify-self: start; min-height: 30px !important; padding: 0 !important; align-self: end; font-size: 16px !important; } .xt-header.is-compact .xt-logo { grid-area: logo; justify-self: start; min-height: 56px !important; padding: 0 !important; font-size: 16px !important; } .xt-header:not(.is-compact) .xt-nav, .xt-header.is-compact .xt-nav { display: none !important; } .xt-header:not(.is-compact) .xt-header-right { display: contents !important; } .xt-header.is-compact .xt-header-right { grid-area: right; justify-self: end; min-height: 56px !important; display: flex !important; align-items: center; gap: 0 !important; } .xt-header:not(.is-compact) .xt-header-links { grid-area: links; justify-self: start; align-self: start; display: flex !important; min-height: 19px; } .xt-header:not(.is-compact) .xt-header-links a:first-child { display: none !important; } .xt-header:not(.is-compact) .xt-header-links a:last-child { display: inline-flex !important; align-items: center; min-height: 19px; font-size: 10px !important; letter-spacing: .045em !important; color: rgba(255,255,255,.48) !important; } .xt-header:not(.is-compact) .xt-languages { grid-area: langs; align-self: center; display: flex !important; align-items: center; gap: 2px !important; } .xt-header:not(.is-compact) .xt-languages a, .xt-header:not(.is-compact) .xt-languages .active, .xt-header:not(.is-compact) .xt-languages span { width: 28px; min-width: 28px; height: 38px; display: inline-grid !important; place-items: center; font-size: 11px !important; letter-spacing: .04em !important; } .xt-header:not(.is-compact) .xt-menu-trigger { grid-area: menu; align-self: center; justify-self: end; display: inline-flex !important; min-height: 44px !important; height: 44px !important; font-size: 11px !important; letter-spacing: .055em !important; } .xt-header.is-compact .xt-menu-trigger { display: inline-flex !important; min-height: 44px !important; height: 44px !important; font-size: 11px !important; letter-spacing: .055em !important; } .xt-header:not(.is-compact) .xt-menu-trigger span, .xt-header.is-compact .xt-menu-trigger span { margin-left: 5px !important; font-size: 15px !important; } .xt-header.is-compact .xt-header-links, .xt-header.is-compact .xt-languages { display: none !important; } .xt-copy { top: 24.8% !important; } } @media (max-width: 360px) { .xt-header:not(.is-compact), .xt-header.is-compact { padding-inline: 15px !important; } .xt-header:not(.is-compact) { column-gap: 7px !important; } .xt-header:not(.is-compact) .xt-logo, .xt-header.is-compact .xt-logo { font-size: 14px !important; } .xt-header:not(.is-compact) .xt-languages a, .xt-header:not(.is-compact) .xt-languages span { width: 25px; min-width: 25px; } } .xt-selected-title, .xt-selected-title span, .xt-showcase-heading h2 { color: #fff !important; } .xt-showcase-card { grid-template-areas: "meta meta" "heading heading" "tags links" "description description" "main main" !important; } .xt-showcase-tags { gap: 7px !important; } .xt-showcase-tags span { position: relative; line-height: 1 !important; } .xt-showcase-tags span:not(.xt-showcase-tags-label), .xt-service-badges span { min-height: 31px; padding: 0 10px !important; display: inline-flex; align-items: center; border: 1px solid rgba(255,255,255,.15) !important; background: rgba(255,255,255,.018); color: rgba(255,255,255,.58) !important; font: 500 11px/1 "IBM Plex Mono", monospace; letter-spacing: .045em; white-space: nowrap; transition: border-color .25s ease, color .25s ease, background .25s ease; } .xt-showcase-tags .xt-showcase-tags-label { margin-right: 9px; padding: 0 !important; border: 0 !important; color: var(--xt-lime) !important; } .xt-service-badges { display: flex; flex-wrap: wrap; gap: 7px; } .xt-selected-badges { max-width: 760px; } @media (hover: hover) { .xt-showcase-tags span:not(.xt-showcase-tags-label):hover, .xt-service-badges span:hover { border-color: rgba(200,255,61,.52) !important; background: rgba(200,255,61,.045); color: #fff !important; } } .xt-case-study-cta { display: none !important; } .xt-showcase-description p { max-width: 880px; } .xt-showcase-main > video { display: block; width: 100%; height: 100%; min-height: inherit; object-fit: cover; } .xt-services-preview { position: relative; z-index: 120; overflow: hidden; border-top: 1px solid rgba(255,255,255,.11); background: #050505; } .xt-services-preview > .xt-container { width: 100%; max-width: 1800px; margin: 0 auto; padding: clamp(118px,11vw,196px) var(--xt-pad) clamp(110px,10vw,180px); } .xt-services-intro { position: relative; padding-bottom: clamp(88px,9vw,148px); display: grid; grid-template-columns: minmax(0,1.28fr) minmax(320px,.72fr); grid-template-areas: "kicker kicker" "title copy"; align-items: end; column-gap: clamp(45px,7vw,120px); } .xt-services-kicker { grid-area: kicker; margin-bottom: clamp(36px,4vw,62px); padding-bottom: 20px; display: flex; justify-content: space-between; gap: 24px; border-bottom: 1px solid rgba(255,255,255,.12); font: 500 12px/1.35 "IBM Plex Mono", monospace; letter-spacing: .075em; } .xt-services-kicker span { color: var(--xt-lime); } .xt-services-kicker strong { color: rgba(255,255,255,.38); font: inherit; text-align: right; } .xt-services-intro h2 { grid-area: title; margin: 0; font-family: "Unbounded", sans-serif; font-size: clamp(52px,7.1vw,126px); font-weight: 500; line-height: .83; letter-spacing: -.065em; color: #fff; } .xt-services-intro > p { grid-area: copy; max-width: 560px; margin: 0 0 5px; font-size: clamp(18px,1.45vw,25px); line-height: 1.45; letter-spacing: -.025em; color: rgba(255,255,255,.62); } .xt-services-list { position: relative; margin-left: clamp(0px,3.8vw,68px); border-bottom: 1px solid rgba(255,255,255,.13); } .xt-service-row { position: relative; isolation: isolate; min-height: clamp(238px,17vw,316px); padding: clamp(42px,4.6vw,74px) clamp(0px,2.3vw,38px) clamp(42px,4.6vw,74px) 0; display: grid; grid-template-columns: 58px minmax(290px,.9fr) minmax(390px,1.1fr); grid-template-areas: "number title copy" ". title badges"; align-items: center; gap: 25px clamp(34px,5vw,88px); overflow: hidden; border-top: 1px solid rgba(255,255,255,.13); transition: background .35s ease, opacity .65s ease, transform .65s cubic-bezier(.16,1,.30,1); } .xt-service-row::after { content: attr(data-service); position: absolute; right: -.035em; bottom: -.21em; z-index: -1; max-width: 75%; overflow: hidden; font-family: "Unbounded", sans-serif; font-size: clamp(88px,12.5vw,224px); font-weight: 600; line-height: .8; letter-spacing: -.08em; color: rgba(255,255,255,.018); white-space: nowrap; pointer-events: none; transition: color .45s ease, transform .7s cubic-bezier(.16,1,.30,1); } .xt-service-number { grid-area: number; align-self: start; padding-top: 8px; font: 500 13px/1 "IBM Plex Mono", monospace; letter-spacing: .07em; color: var(--xt-lime); } .xt-service-row h3 { grid-area: title; margin: 0; font-family: "Unbounded", sans-serif; font-size: clamp(38px,4.6vw,82px); font-weight: 500; line-height: .95; letter-spacing: -.055em; color: #fff; transition: transform .35s cubic-bezier(.16,1,.30,1); } .xt-service-row > p { grid-area: copy; align-self: end; max-width: 600px; margin: 0; font-size: clamp(17px,1.25vw,22px); line-height: 1.48; letter-spacing: -.018em; color: rgba(255,255,255,.61); } .xt-service-row .xt-service-badges { grid-area: badges; align-self: start; margin-top: 23px; max-width: 680px; } @media (hover: hover) { .xt-service-row:hover { background: rgba(255,255,255,.022); } .xt-service-row:hover h3 { transform: translateX(10px); } .xt-service-row:hover::after { color: rgba(200,255,61,.032); transform: translateX(-12px); } } .xt-services-preview.is-reveal-ready .xt-service-row { opacity: 0; transform: translateY(26px); } .xt-services-preview.is-reveal-ready .xt-service-row.is-visible { opacity: 1; transform: translateY(0); } @media (max-width: 1100px) { .xt-services-intro { grid-template-columns: minmax(0,1fr) minmax(280px,.72fr); } .xt-service-row { grid-template-columns: 42px minmax(230px,.78fr) minmax(0,1.22fr); gap: 22px 32px; } } @media (max-width: 767px) { .xt-showcase-card { grid-template-areas: "meta" "heading" "tags" "description" "links" "main" !important; } .xt-showcase-tags { align-items: baseline; gap: 6px !important; } .xt-showcase-tags .xt-showcase-tags-label { flex-basis: 100%; margin: 0 0 5px; } .xt-services-preview > .xt-container { padding: 88px var(--xt-pad) 96px; } .xt-services-intro { padding-bottom: 66px; grid-template-columns: 1fr; grid-template-areas: "kicker" "title" "copy"; } .xt-services-kicker { margin-bottom: 38px; padding-bottom: 16px; align-items: flex-start; } .xt-services-kicker strong { max-width: 18ch; font-size: 11px; } .xt-services-intro h2 { font-size: clamp(42px,12.5vw,61px); line-height: .86; letter-spacing: -.06em; } .xt-services-intro > p { margin-top: 31px; font-size: 17px; line-height: 1.52; } .xt-service-row { min-height: 0; padding: 42px 0 46px; grid-template-columns: 35px minmax(0,1fr); grid-template-areas: "number title" ". copy" ". badges"; align-items: start; gap: 0 13px; } .xt-services-list { margin-left: 0; } .xt-service-row::after { right: -.08em; bottom: -.09em; max-width: 92%; font-size: clamp(74px,23vw,112px); color: rgba(255,255,255,.015); } .xt-service-number { grid-area: number; padding-top: 5px; font-size: 12px; } .xt-service-row h3 { grid-area: title; font-size: clamp(27px,8vw,39px); line-height: .98; overflow-wrap: anywhere; } .xt-service-row > p { grid-area: copy; margin-top: 22px; font-size: 16px; line-height: 1.52; } .xt-service-row .xt-service-badges { grid-area: badges; margin-top: 22px; gap: 6px; } .xt-service-badges span, .xt-showcase-tags span:not(.xt-showcase-tags-label) { min-height: 30px; padding-inline: 9px !important; font-size: 10px; } } @media (prefers-reduced-motion: reduce) { .xt-services-preview.is-reveal-ready .xt-service-row { opacity: 1; transform: none; transition: none; } } .xt-showcase-heading h2 { font-size: clamp(52px, 7vw, 124px) !important; font-weight: 500 !important; line-height: .79 !important; letter-spacing: -.062em !important; color: rgba(244,246,247,.84) !important; } @media (max-width: 767px) { .xt-header:not(.is-compact) { min-height: 64px !important; padding: 9px 18px !important; grid-template-columns: minmax(0,1fr) auto auto !important; grid-template-rows: 1fr !important; grid-template-areas: "logo langs menu" !important; column-gap: clamp(8px,2.8vw,14px) !important; row-gap: 0 !important; } .xt-header:not(.is-compact) .xt-logo { min-height: 44px !important; align-self: center !important; } .xt-header:not(.is-compact) .xt-header-links { display: none !important; } .xt-header:not(.is-compact) .xt-languages { align-self: center !important; } .xt-showcase-heading h2 { font-size: clamp(34px, 9.5vw, 50px) !important; line-height: .88 !important; letter-spacing: -.052em !important; color: rgba(244,246,247,.86) !important; } } .xt-mobile-menu nav .xt-mobile-instagram { margin-top: clamp(28px, 7vh, 54px); padding: 18px 0 0; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.13); font-family: "IBM Plex Mono", monospace !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1 !important; letter-spacing: .09em !important; color: rgba(255,255,255,.56) !important; } .xt-mobile-menu nav .xt-mobile-instagram b { color: var(--xt-lime); font-size: 15px; font-weight: 400; } .xt-services-preview { background: radial-gradient(circle at 82% 12%, rgba(200,255,61,.035), transparent 25%), radial-gradient(circle at 12% 68%, rgba(20,191,242,.03), transparent 28%), #050505 !important; } .xt-services-preview > .xt-container { padding-top: clamp(96px,8vw,142px) !important; padding-bottom: clamp(104px,9vw,164px) !important; } .xt-services-intro { padding-bottom: clamp(56px,5.5vw,88px) !important; display: block !important; } .xt-services-kicker { margin-bottom: clamp(34px,3.2vw,50px) !important; padding-bottom: 17px !important; } .xt-services-kicker strong { color: rgba(255,255,255,.34) !important; } .xt-services-intro-copy { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(320px,.8fr); align-items: end; gap: clamp(42px,7vw,118px); } .xt-services-intro h2 { margin: 0 !important; font-size: clamp(40px,4.65vw,82px) !important; font-weight: 500 !important; line-height: .91 !important; letter-spacing: -.052em !important; color: rgba(244,246,247,.9) !important; } .xt-services-intro h2 span { color: rgba(244,246,247,.38); } .xt-services-intro > p, .xt-services-intro-copy > p { max-width: 590px; margin: 0 0 4px !important; font-size: clamp(17px,1.18vw,21px) !important; line-height: 1.5 !important; letter-spacing: -.017em !important; color: rgba(255,255,255,.57) !important; } .xt-services-list { margin-left: 0 !important; display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)); border-top: 1px solid rgba(255,255,255,.13); border-left: 1px solid rgba(255,255,255,.13); border-bottom: 0 !important; } .xt-service-row { min-height: clamp(360px,31vw,510px) !important; padding: clamp(34px,3.4vw,54px) !important; display: flex !important; flex-direction: column; align-items: stretch !important; gap: 0 !important; overflow: hidden; border-top: 0 !important; border-right: 1px solid rgba(255,255,255,.13); border-bottom: 1px solid rgba(255,255,255,.13); background: rgba(255,255,255,.006); } .xt-service-row::before { content: ""; position: absolute; left: 0; top: 0; width: 0; height: 2px; z-index: 3; background: var(--xt-lime); transition: width .55s cubic-bezier(.16,1,.30,1); } .xt-service-row::after { right: -0.04em !important; bottom: -0.08em !important; max-width: none !important; font-size: clamp(72px,8.4vw,150px) !important; font-weight: 600 !important; line-height: .78 !important; letter-spacing: -.07em !important; color: rgba(255,255,255,.015) !important; transform: none !important; } .xt-service-card-top { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 18px; } .xt-service-number, .xt-service-scope { padding: 0 !important; font: 500 11px/1 "IBM Plex Mono", monospace !important; letter-spacing: .08em !important; } .xt-service-number { color: var(--xt-lime) !important; } .xt-service-scope { color: rgba(255,255,255,.60); text-align: right; } .xt-service-row h3 { position: relative; z-index: 2; margin: clamp(62px,5.1vw,86px) 0 0 !important; font-size: clamp(34px,3.5vw,62px) !important; font-weight: 500 !important; line-height: .95 !important; letter-spacing: -.052em !important; color: rgba(244,246,247,.88) !important; transform: none !important; } .xt-service-row > p { position: relative; z-index: 2; max-width: 560px !important; margin: 22px 0 0 !important; align-self: auto !important; font-size: clamp(16px,1.08vw,19px) !important; line-height: 1.5 !important; color: rgba(255,255,255,.53) !important; } .xt-service-row .xt-service-badges { position: relative; z-index: 2; margin-top: auto !important; padding-top: clamp(34px,3vw,48px); max-width: 100% !important; } @media (hover: hover) { .xt-service-row:hover { background: rgba(255,255,255,.025) !important; } .xt-service-row:hover::before { width: 100%; } .xt-service-row:hover::after { color: rgba(200,255,61,.028) !important; transform: translateX(-10px) !important; } .xt-service-row:hover h3 { color: #fff !important; } } @media (max-width: 1100px) { .xt-services-intro-copy { grid-template-columns: minmax(0,1fr) minmax(280px,.8fr); gap: 42px; } .xt-service-row { min-height: 390px !important; } } @media (max-width: 767px) { .xt-services-preview > .xt-container { padding: 78px var(--xt-pad) 94px !important; } .xt-services-intro { padding-bottom: 52px !important; } .xt-services-kicker { margin-bottom: 32px !important; padding-bottom: 15px !important; align-items: flex-start !important; } .xt-services-kicker strong { max-width: 19ch; font-size: 10px !important; line-height: 1.35 !important; } .xt-services-intro-copy { display: block !important; } .xt-services-intro h2 { font-size: clamp(32px,9.2vw,45px) !important; line-height: .94 !important; letter-spacing: -.048em !important; } .xt-services-intro-copy > p { margin-top: 24px !important; font-size: 16px !important; line-height: 1.52 !important; } .xt-services-list { grid-template-columns: 1fr !important; } .xt-service-row { min-height: 0 !important; padding: 30px 24px 28px !important; } .xt-service-row::after { bottom: -.02em !important; font-size: clamp(70px,20vw,98px) !important; } .xt-service-number, .xt-service-scope { font-size: 10px !important; } .xt-service-row h3 { margin-top: 52px !important; font-size: clamp(28px,8vw,38px) !important; line-height: .98 !important; } .xt-service-row > p { margin-top: 18px !important; font-size: 15px !important; line-height: 1.52 !important; } .xt-service-row .xt-service-badges { margin-top: 28px !important; padding-top: 0 !important; } } @media (max-width: 390px) { .xt-services-kicker strong { display: none; } } .xt-selected { width: min(91vw, 1520px) !important; } .xt-selected-title { max-width: 980px; font-size: clamp(46px, 4.65vw, 82px) !important; font-weight: 500 !important; line-height: .90 !important; letter-spacing: -.052em !important; color: rgba(244,246,247,.91) !important; } .xt-selected-title span { display: block; color: var(--xt-lime) !important; } .xt-selected-footer { margin-top: 28px !important; } .xt-showcase-heading { padding-top: clamp(28px, 3.4vw, 50px) !important; padding-bottom: 28px !important; } .xt-showcase-heading h2 { max-width: 1120px; font-size: clamp(36px, 4.45vw, 78px) !important; font-weight: 540 !important; line-height: .92 !important; letter-spacing: -.047em !important; color: rgba(200,255,61,.91) !important; overflow-wrap: normal !important; word-break: normal !important; } .xt-showcase-heading > div { padding-bottom: 4px !important; color: rgba(255,255,255,.36) !important; } .xt-services-intro { display: block !important; padding-bottom: clamp(60px, 6vw, 92px) !important; } .xt-services-kicker { margin-bottom: clamp(42px, 4vw, 62px) !important; } .xt-services-intro-copy { width: 100%; display: grid !important; grid-template-columns: minmax(0, 1.42fr) minmax(340px, .58fr) !important; align-items: end !important; gap: clamp(48px, 7vw, 118px) !important; } .xt-services-intro-copy h2 { min-width: 0; max-width: 920px; margin: 0 !important; font-size: clamp(44px, 4.45vw, 78px) !important; font-weight: 500 !important; line-height: .91 !important; letter-spacing: -.052em !important; color: rgba(244,246,247,.91) !important; } .xt-services-intro-copy h2 > span { display: block; color: var(--xt-lime) !important; } .xt-services-intro-copy > p { width: 100%; max-width: 470px !important; margin: 0 0 3px !important; font-size: clamp(16px, 1.08vw, 19px) !important; line-height: 1.56 !important; letter-spacing: -.012em !important; color: rgba(255,255,255,.56) !important; } @media (max-width: 1180px) { .xt-services-intro-copy { grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr) !important; gap: 42px !important; } .xt-services-intro-copy h2 { font-size: clamp(40px, 4.6vw, 60px) !important; } } @media (max-width: 767px) { .xt-selected-title { max-width: 100%; font-size: clamp(38px, 10.8vw, 54px) !important; line-height: .91 !important; } .xt-selected-footer { margin-top: 24px !important; } .xt-showcase-heading { padding: 24px 0 22px !important; } .xt-showcase-heading h2 { max-width: 100%; font-size: clamp(29px, 8.6vw, 40px) !important; line-height: .96 !important; letter-spacing: -.042em !important; overflow-wrap: anywhere !important; } .xt-services-intro { padding-bottom: 52px !important; } .xt-services-intro-copy { display: block !important; } .xt-services-intro-copy h2 { max-width: 100%; font-size: clamp(32px, 9.2vw, 45px) !important; line-height: .94 !important; } .xt-services-intro-copy > p { max-width: 560px !important; margin-top: 24px !important; font-size: 16px !important; line-height: 1.54 !important; } } .xt-logo .xt-logo-x { display: inline-block !important; margin-left: .48em !important; transform: translateY(-.03em); color: var(--xt-lime) !important; font-family: "IBM Plex Mono", monospace !important; font-size: .62em !important; font-weight: 500 !important; line-height: 1 !important; letter-spacing: 0 !important; } .xt-title-x { display: inline-block !important; margin-left: .18em !important; transform: translateY(-.08em); color: var(--xt-lime) !important; font-family: "IBM Plex Mono", monospace !important; font-size: .34em !important; font-weight: 500 !important; line-height: 1 !important; letter-spacing: 0 !important; vertical-align: baseline; } .xt-h1-b { color: var(--xt-lime) !important; } .xt-h1-b .xt-title-x-hero { color: var(--xt-lime) !important; font-size: .31em !important; margin-left: .20em !important; } .xt-selected::before { content: "SELECTED" !important; } .xt-services-intro-copy { display: block !important; width: 100% !important; } .xt-services-intro-copy h2 { max-width: 980px !important; } .xt-services-statement { width: min(760px, 100%); margin-top: clamp(28px, 3vw, 46px); padding-top: 18px; display: grid; grid-template-columns: 105px minmax(0, 1fr); gap: clamp(22px, 3vw, 48px); align-items: start; border-top: 1px solid rgba(255,255,255,.12); } .xt-services-statement-label { padding-top: 3px; font: 500 11px/1.2 "IBM Plex Mono", monospace; letter-spacing: .10em; color: var(--xt-lime); } .xt-services-statement p { width: auto !important; max-width: 610px !important; margin: 0 !important; font-family: "Bricolage Grotesque", sans-serif !important; font-size: clamp(17px, 1.22vw, 21px) !important; line-height: 1.48 !important; letter-spacing: -.018em !important; color: rgba(255,255,255,.59) !important; white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; } .xt-showcase-heading h2 .xt-title-x { color: var(--xt-lime) !important; font-size: .32em !important; margin-left: .18em !important; } @media (max-width: 767px) { .xt-logo .xt-logo-x { font-size: .60em !important; margin-left: .42em !important; } .xt-title-x { font-size: .32em !important; margin-left: .16em !important; } .xt-services-statement { width: 100%; margin-top: 26px; padding-top: 15px; grid-template-columns: 1fr; gap: 10px; } .xt-services-statement-label { padding-top: 0; font-size: 10px; } .xt-services-statement p { max-width: 34ch !important; font-size: 16px !important; line-height: 1.5 !important; } } .xt-media-sequence { position: absolute; inset: 0; overflow: hidden; background: #080909; } .xt-media-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; transform: scale(1.018); transition: opacity .92s cubic-bezier(.16,1,.30,1), transform 6.2s cubic-bezier(.16,1,.30,1); will-change: opacity, transform; } .xt-media-frame.is-active { z-index: 2; opacity: 1; transform: scale(1); } .xt-media-sequence::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(180deg, transparent 58%, rgba(0,0,0,.42) 100%), linear-gradient(90deg, rgba(0,0,0,.12), transparent 28%, transparent 72%, rgba(0,0,0,.08)); } .xt-media-ui { position: absolute; left: clamp(18px, 2vw, 34px); right: clamp(18px, 2vw, 34px); bottom: clamp(17px, 1.8vw, 30px); z-index: 6; display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; pointer-events: none; } .xt-media-progress { display: flex; align-items: flex-end; gap: 8px; pointer-events: auto; } .xt-media-progress button { position: relative; width: clamp(54px, 5.2vw, 84px); min-height: 30px; padding: 0 0 10px; overflow: hidden; border: 0; background: transparent; color: rgba(255,255,255,.45); text-align: left; cursor: pointer; font: 500 10px/1 "IBM Plex Mono", monospace; letter-spacing: .08em; transition: color .25s ease; } .xt-media-progress button::after, .xt-media-progress button::before { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; } .xt-media-progress button::after { width: 100%; background: rgba(255,255,255,.27); } .xt-media-progress button::before { z-index: 2; width: 0; background: var(--xt-lime); } .xt-media-progress button.is-active { color: #fff; } .xt-media-progress button.is-active:not(.is-running)::before { width: 100%; } .xt-media-progress button.is-running::before { animation: xtMediaProgress 5.2s linear forwards; } @keyframes xtMediaProgress { from { width: 0; } to { width: 100%; } } .xt-media-caption { padding-bottom: 1px; color: rgba(255,255,255,.55); font: 500 10px/1 "IBM Plex Mono", monospace; letter-spacing: .09em; white-space: nowrap; } .xt-media-caption b { color: var(--xt-lime); font: inherit; } @media (hover: hover) { .xt-media-progress button:hover { color: #fff; } } @media (max-width: 767px) { .xt-showcase-main:has(.xt-media-sequence) { width: calc(100% + (var(--xt-pad) * 2)); margin-left: calc(var(--xt-pad) * -1); margin-right: calc(var(--xt-pad) * -1); aspect-ratio: 1.15 / 1 !important; } .xt-media-ui { left: 14px; right: 14px; bottom: 13px; gap: 14px; } .xt-media-progress { gap: 6px; } .xt-media-progress button { width: 42px; min-height: 28px; padding-bottom: 8px; font-size: 9px; } .xt-media-caption { font-size: 8px; letter-spacing: .07em; } } @media (max-width: 390px) { .xt-media-caption { display: none; } } @media (prefers-reduced-motion: reduce) { .xt-media-frame { transition: opacity .25s ease !important; transform: none !important; } .xt-media-progress button.is-running::before { animation: none !important; width: 100%; } } .xt-site-preview { position: absolute; inset: 0; display: grid; grid-template-rows: 46px minmax(0,1fr); overflow: hidden; background: #080909; } .xt-site-preview-bar { position: relative; z-index: 3; min-width: 0; padding: 0 16px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 16px; border-bottom: 1px solid rgba(255,255,255,.10); background: #090a0a; } .xt-site-preview-status { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,.48); font: 500 9px/1 "IBM Plex Mono", monospace; letter-spacing: .08em; white-space: nowrap; } .xt-site-preview-status i { width: 6px; height: 6px; display: block; border-radius: 50%; background: var(--xt-lime); box-shadow: 0 0 11px rgba(200,255,61,.42); } .xt-site-preview-url { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: rgba(255,255,255,.62); font: 500 10px/1 "IBM Plex Mono", monospace; letter-spacing: .055em; white-space: nowrap; } .xt-site-preview-open { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.13); color: var(--xt-lime) !important; font: 500 13px/1 "IBM Plex Mono", monospace; transition: border-color .2s ease, background .2s ease; } .xt-site-preview-open:hover { border-color: rgba(200,255,61,.52); background: rgba(200,255,61,.055); } .xt-site-preview iframe { position: relative; z-index: 1; width: 100%; height: 100%; display: block; border: 0; background: #fff; pointer-events: none; } @media (max-width: 767px) { .xt-showcase-main:has(.xt-site-preview) { width: calc(100% + (var(--xt-pad) * 2)); margin-left: calc(var(--xt-pad) * -1); margin-right: calc(var(--xt-pad) * -1); aspect-ratio: 1.15 / 1 !important; } .xt-site-preview { grid-template-rows: 42px minmax(0,1fr); } .xt-site-preview-bar { padding: 0 12px; gap: 10px; } .xt-site-preview-status span { display: none; } .xt-site-preview-url { font-size: 9px; } } .xt-about-kicker { padding-bottom: 18px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; border-bottom: 1px solid rgba(255,255,255,.12); font: 500 11px/1.35 "IBM Plex Mono", monospace; letter-spacing: .085em; } .xt-about-kicker span { color: var(--xt-lime); } .xt-about-kicker strong { color: rgba(255,255,255,.34); font: inherit; text-align: right; } .xt-about-title h2 { margin: 0; font-family: "Unbounded", sans-serif; font-size: clamp(42px,4.7vw,82px); font-weight: 500; line-height: .91; letter-spacing: -.055em; color: rgba(244,246,247,.92); } .xt-about-title h2 > span { color: var(--xt-lime); } .xt-about { position: relative; z-index: 120; border-top: 1px solid rgba(255,255,255,.11); background: radial-gradient(circle at 15% 86%, rgba(20,191,242,.025), transparent 30%), #030303; } .xt-about > .xt-container { padding: clamp(112px,10vw,182px) var(--xt-pad) clamp(90px,8vw,144px); } .xt-about-grid { padding: clamp(48px,5vw,82px) 0 clamp(72px,7vw,116px); display: grid; grid-template-columns: minmax(0,1.24fr) minmax(300px,.76fr); gap: clamp(50px,7vw,122px); align-items: end; } .xt-about-copy { max-width: 570px; } .xt-about-copy p { margin: 0; font-size: clamp(17px,1.18vw,21px); line-height: 1.54; letter-spacing: -.018em; color: rgba(255,255,255,.58); } .xt-about-copy p + p { margin-top: 20px; color: rgba(255,255,255,.40); } .xt-about-system { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-top: 1px solid rgba(255,255,255,.12); border-left: 1px solid rgba(255,255,255,.12); } .xt-about-system article { min-height: 245px; padding: 28px; display: flex; flex-direction: column; border-right: 1px solid rgba(255,255,255,.12); border-bottom: 1px solid rgba(255,255,255,.12); } .xt-about-system article > span { color: var(--xt-lime); font: 500 11px/1 "IBM Plex Mono", monospace; letter-spacing: .08em; } .xt-about-system strong { margin-top: auto; font: 500 12px/1.2 "IBM Plex Mono", monospace; letter-spacing: .065em; color: rgba(255,255,255,.76); } .xt-about-system p { max-width: 29ch; margin: 13px 0 0; font-size: 15px; line-height: 1.48; color: rgba(255,255,255,.42); } .xt-about-cta { margin-top: clamp(78px,8vw,132px); padding-top: 30px; display: flex; justify-content: space-between; align-items: flex-end; gap: 42px; border-top: 1px solid rgba(255,255,255,.12); } .xt-about-cta > div > span { display: block; margin-bottom: 18px; font: 500 10px/1 "IBM Plex Mono", monospace; letter-spacing: .09em; color: var(--xt-lime); } .xt-about-cta h3 { margin: 0; font-family: "Unbounded", sans-serif; font-size: clamp(31px,3.7vw,64px); font-weight: 500; line-height: .96; letter-spacing: -.052em; color: rgba(244,246,247,.91); } .xt-about-cta > a { flex: 0 0 auto; min-height: 52px; padding: 0 18px; display: inline-flex; align-items: center; gap: 26px; border: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.84) !important; font: 500 11px/1 "IBM Plex Mono", monospace; letter-spacing: .07em; } .xt-about-cta > a b { color: var(--xt-lime); } @media (hover:hover) { .xt-about-cta > a:hover { border-color: rgba(200,255,61,.52); background: rgba(200,255,61,.045); } .xt-about-system article:hover { background: rgba(255,255,255,.018); } } @media (max-width: 900px) { .xt-about-grid { grid-template-columns: 1fr; gap: 30px; } } @media (max-width: 767px) { .xt-about > .xt-container { padding: 82px var(--xt-pad) 94px; } .xt-about-kicker { align-items: flex-start; } .xt-about-kicker strong { max-width: 18ch; font-size: 9px; } .xt-about-title h2 { font-size: clamp(31px,9.1vw,44px); line-height: .94; } .xt-about-copy p { font-size: 16px; line-height: 1.52; } .xt-about-grid { padding: 38px 0 56px; } .xt-about-system { grid-template-columns: 1fr; } .xt-about-system article { min-height: 180px; } .xt-about-cta { margin-top: 66px; display: block; } .xt-about-cta h3 { font-size: clamp(28px,8.4vw,39px); } .xt-about-cta > a { margin-top: 30px; } } @font-face {font-family:'XTalento Reference Tag';src:url(data:font/woff;base64,d09GRgABAAAAAAo0AAoAAAAAG2wAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABZAAAAC4AAABgRT9E9GNtYXAAAAGwAAAAQAAAAFQArwFmZ2x5ZgAAAgAAAAdNAAAXpnH9EzpoZWFkAAAA9AAAADYAAAA2Lw+IPWhoZWEAAAEsAAAAIAAAACQGEQItaG10eAAAAZQAAAAcAAAAHA7QAGBsb2NhAAAB8AAAABAAAAAQD0AWBW1heHAAAAFMAAAAFwAAACAACgKKbmFtZQAACVAAAADGAAABjCJFJh1wb3N0AAAKGAAAABoAAAAwAKAAfgABAAAAAQAASYILh18PPPUAAwPoAAAAAObGIfcAAAAA5sYh9wAQABkCXQNWAAAAAwACAAAAAAAAeJxjYGRgYF70fw4DA1MxgwCDGFMsA1AEBbADAFmnA0R4nGNgZGBgYGfqYGBiAAEIiQQADsgAlwB4nGNgZpJjnMDAysDCQBgwInPsgQBIOTKEMC/6P4eBgXkRQwqaegUGBgDJLAW5AAAB9AAAAmYAEAJzABACAwAQAgAAEAIwABAB0AAQeJxjYGBgYmBgYAZiESDJCKZZGByANA8DB1COhcGRwZXBh8GfIeT/f6AohOcH4v0/+H///+1AuBasDw4Au4sQDAAAAAABDQLTBJcHXwmcC9N4nKVYTYvjNhhOIiMhYVGBE5uECRswjJmlwwykU7MLyxS23dvCQmEPhcLeCr321F/Qay/tv+ipt0LP/S+FHkr/QN8vybKdzEzpKCNLsiy/kt/neR9psVyExXb1Tt0v/l4squMGUyP/k9TPWu449Zj3/aY1ZtNuDKUWk8lyaes2x2Y2zpDkXk/PmXwsHukOUjfK+ZqlblLrYr5p7473Cqzt2e7++NWbOhz8zjpvnSudU1o5F2xoXgSngzLaK2WUs3AprIG7RpvK159BValJpuFitLPU4PSJHkoFepHd1f5wfQw0Nr4CXqrup92Nk6K0QTUUWoMFGkZXXhVaOmj34XBZH/bNRVM39a66rmpTeOfZXq2xk9f+ebW7aurbT5vD/qJrX34/s7AwHvrpgsdfrMgzvlZXyy+WPyTfeLaiz5S5R3PCVeb3nykpNY0M0zwxTbpTtWDvMOxVhn2Mv/2Noq/dyZdv725W+OtGiXzJTP2lo8HjmJkX3w1e1t2v2OUzNwIgtFLuEyDkv8cBx6ABa9BKHLUb8iGN67/YAj8kepc42vDJshaN7mBikdwEM4sXK26Q/AHcHFLBRQ9OWEAOLfwQepbDnzxP/bVvSl+tL9HflAFEFMrK6z+QHeTJgJIymoRGgw8acuDPDyVNgsxM/zSRWLjCe55AR+bLBbOySBePXWhYT7YbGpKwGUsm1Y0e3fejvqXx2pX0zgyIpfFq8hS+S6e65lajB/C4y1e45gUtNULzy/3+EFRVkN2AT1xf9/bHd9sgo9AKuz+u3l5fBlWQZV7mnk3cywdZLIill3+pavlTQmJizIf49FGmzWrC5uCyfSqn1GVMimkOKYZa9F0GQ5+gADlFFUwnwD8C+cAziPRIJYDEj5RgMosJo/qo3ZyOD4Lm7uzdaV/pHefT5+vyTp/i+UcyDCXgKTaEHeHNSM7OzgAWbEA8QZegm9wPM8XOLSATv8TBCaoO6V6Zw+vn1RYjUnrpfzUU8S8xqDIh+MofLrwP8CshwwtUgvxV++BC6TzEHoo3OUsxOk6ikEuC40D+jxNjaye3Tz+UlUtEHC8ThjJaTKfHU1JsXlPDBEqyvgUNcNhDDScVZFbQEi6CvEIz00Uc/qlerCAiLk+opUY81eTqJcYn9pmRF2aRZerNFN2ao6BmhNpmlijEFjG6NufkE10xFue4O25Oyr2TbdGI5m5CEv0xa8kCWdf2fYqXPffJxpd3mLGFs3JsGdqICmbS8H+lblTKhGO8NwrMHN2HeD9ejRHBDDTT8Ug3qk09+2FtpuQSV5UlxyQt9StPQUPEWwKs59iU0w2QQF/50lQcUzA+m8gJEIc4buXR0nNEAiTRqJrf4uztLYHSgWLGoX1Cls+JA4ack0kkJwKop9AGTSWF/0e4SIu4gJHDY6xFhgAPOIXclQkNQxLaJRtZLKHWZcGLy0Q0wh2IaZWP86Juwk5gjPWVehHvwPo0+7Dd+SQ6cAF8ua5rj3sHMCf/HBj+A+8meAlL0Or0EYTJWdeRDsDFYipEvU9fhSOATd9PhnV5IMJVbYCLgeD2VQt7AngfGl8GIWKLSfFzqH307XobOiLALe2ErLPrkHiUJQwt7uOhjY0R4cg+BcoN31juQWJ6DmTyDK0Z+RotEyydV/Xa4vceyN7puJ+CVjsoR8V8vNqp9ytDfNxGfjylcpqZ6hl4NvG0mSmF7gRVTMliqM9rw38ullL5nHobmP5Jei7SfbYjejr1RT30sAYapUhdI9Lqj1HfiXKby7z8mteGcNOMgg/dOWFTosfxZmv5u37QPwl9GpWC9Qk5Tk3pg66eCc5zsoBlh0Bg4DxBPilxf89U98Snct5DqiUTnc03NbKnI2pAoPiSlI9YTPSXGcGUI3ux9/6f6/bYhAo0D7CD39kdTswjATEA41Yo4i07yWAUIlkSHeQF+hHo3aBRmWs0KC2klNJY5yrtqgB9HPyQEjSHnxA3XYrRbmidMUk/uK51BRc8P8HhgjtcrKuq3u0OH8uWTWiF9bKSPeJEbWojO2XN2zCcA71IJsG72lhwIQCJ79rjNz9HOqb1cQs+HVn+pu6Xr1ea9mQN4xXPwQb0nhFVY+9/QGplPPWgOBI5NBF85+XTJjFUx+jOt3HnOGIk+UaCb56EE+i8jes0iiHh1B+nO6m51WZqcWw9w5RUGinlZ6usU9Se8yStE5Ij7RrJvEskPiX/Qef9ir6NfsccQwFeMAQRnsP4dAt2ctPFe0Oft9MpjnbhEqgksBt7+3RS0YWMC0UCKIOFtZA5T5UzNiIOoGMYQOFtSFM8kRk+A/I+USpPhPBFh52Gj1Zwq6gHfiEsDlpUzjsB9rDDvK0/2XZAWs5Wsln2vPFjSTGWQC43BuZq5eSGVhc4BMZbv7l+JcNV3MxnZVbRYVOZiEPZLXLJsBX8VgkHu6CrYOj0OLy8bfd1qEBDVZo0Mx/H+Uyx8OaUurdh/123JYJjra30wEQqna6h/lr8C8mN90wAAAB4nI2NMQrCQBBFXzQqoliJnbClhYrB3kOEILaLjEEIG4jaegJrz+IpPJPjuoqohQM7vP3/zwzQ5UzEvSIGvt+rRkt/D64rDQPHb5kGHeaBm/RZaDKK26qMSQPX6HEMXFf9FDh+yzR05yVwkxHXVWYLcfvSpLKRStxaTGbzVPJDYaun+fLUmiRLqXbb0plkOvsVYEWGpUBw7Ckxel3Y6Ku8ttZufCb3Ts5B01bdz8nvucfUhISl13dsNed0X8KU2b8bbrWlQ28AAHicY2BiwA/YgdicQYVBn0GDwZDBCAAHbgEfAAA=) format('woff');font-weight:400;font-style:normal;font-display:block;} .xt-header .xt-logo {color:#fff !important;} .xt-header .xt-logo-letter-x {display:inline-block !important;margin:0 !important;color:var(--xt-lime) !important;font:inherit !important;letter-spacing:inherit !important;} .xt-header .xt-logo-x,.xt-h1-b .xt-title-x-hero {display:none !important;} .xt-h1,.xt-h1-line,.xt-h1-a,.xt-h1-b,.xt-copy {overflow:visible !important;} .xt-h1-b {position:relative !important;display:inline-block !important;padding:.03em .04em .18em 0 !important;margin:0 !important;color:var(--xt-lime) !important;font-family:'Unbounded',sans-serif !important;line-height:1 !important;isolation:isolate !important;animation:none !important;transform:none !important;opacity:1 !important;clip-path:none !important;} .xt-h1-b::before,.xt-h1-b::after {content:none !important;display:none !important;animation:none !important;} .xt-talent-base {position:relative !important;z-index:1 !important;display:inline-block !important;color:var(--xt-lime) !important;font-family:'Unbounded',sans-serif !important;font-size:1em !important;font-weight:500 !important;line-height:1 !important;letter-spacing:inherit !important;white-space:nowrap !important;opacity:1 !important;visibility:visible !important;transform:none !important;animation:none !important;} .xt-talent-tag {position:absolute !important;left:0 !important;top:50% !important;z-index:5 !important;display:block !important;width:max-content !important;max-width:none !important;color:var(--xt-lime) !important;font-family:'XTalento Reference Tag' !important;font-size:var(--xt-tag-size,1.3em) !important;font-weight:400 !important;font-style:normal !important;font-synthesis:none !important;letter-spacing:-.065em !important;line-height:1 !important;white-space:nowrap !important;text-transform:none !important;opacity:0;visibility:hidden !important;pointer-events:none !important;overflow:visible !important;clip-path:none !important;-webkit-clip-path:none !important;-webkit-text-stroke:0 !important;text-shadow:none !important;filter:none !important;transform:translateY(-50%);animation:none !important;} :is(.xt-h1-b,.xt-talent-word).is-reference-tag .xt-talent-base {opacity:0;visibility:hidden !important;} :is(.xt-h1-b,.xt-talent-word).is-reference-tag .xt-talent-tag {opacity:1;visibility:visible !important;} :is(.xt-h1-b,.xt-talent-word).is-tag-signal .xt-talent-tag {animation:xtReferenceSignal 480ms steps(1,end) both !important;} :is(.xt-h1-b,.xt-talent-word).is-tag-exit .xt-talent-tag {animation-direction:reverse !important;animation-duration:400ms !important;} .xt-talent-tag::before,.xt-talent-tag::after {content:"TALENTO";position:absolute;inset:0;color:inherit;font:inherit;letter-spacing:inherit;line-height:inherit;pointer-events:none;opacity:0;} :is(.xt-h1-b,.xt-talent-word).is-tag-signal .xt-talent-tag::before {opacity:1;clip-path:inset(19% -12% 58% -12%);animation:xtTagSliceTop 120ms steps(1,end) infinite;} :is(.xt-h1-b,.xt-talent-word).is-tag-signal .xt-talent-tag::after {opacity:1;clip-path:inset(61% -12% 16% -12%);animation:xtTagSliceBottom 160ms steps(1,end) infinite;} @keyframes xtReferenceSignal { 0% {transform:translate(-5px,-50%) skewX(-5deg);opacity:1;} 12% {transform:translate(7px,-49%) skewX(7deg);opacity:.3;} 23% {transform:translate(-3px,-50%);opacity:1;} 34% {transform:translate(5px,-51%) skewX(-3deg);opacity:0;} 43% {transform:translate(-6px,-50%) skewX(4deg);opacity:1;} 57% {transform:translate(3px,-50%);opacity:1;} 67% {transform:translate(-2px,-49%);opacity:.25;} 76% {transform:translate(2px,-50%) skewX(-2deg);opacity:1;} 88%,100% {transform:translateY(-50%);opacity:1;} } @keyframes xtTagSliceTop {0%,100% {transform:translateX(-.075em);}33% {transform:translateX(.09em);}66% {transform:translateX(-.025em);}} @keyframes xtTagSliceBottom {0%,100% {transform:translateX(.07em);}25% {transform:translateX(-.095em);}75% {transform:translateX(.035em);}} @media(prefers-reduced-motion:reduce) {:is(.xt-h1-b,.xt-talent-word).is-reference-tag .xt-talent-base {opacity:1 !important;visibility:visible !important;}:is(.xt-h1-b,.xt-talent-word).is-reference-tag .xt-talent-tag {opacity:0 !important;visibility:hidden !important;}} .xt-showcase-context { padding-bottom: 8px; display: flex; flex-direction: column; align-items: flex-end; gap: 7px; text-align: right; } .xt-showcase-context span { display: block; font: 500 11px/1.35 "IBM Plex Mono", monospace; letter-spacing: .065em; text-transform: uppercase; } .xt-showcase-context span:first-child { color: rgba(255,255,255,.66); } .xt-showcase-context span:last-child { color: rgba(255,255,255,.34); } .xt-client-links .xt-instagram-pending { cursor: default; } @media (max-width: 767px) { .xt-showcase-context { margin-top: 17px; padding: 0; align-items: flex-start; gap: 5px; text-align: left; } .xt-showcase-context span { font-size: 11px; } } .xt-showcase-context span:first-child { color: rgba(255,255,255,.60) !important; } .xt-showcase-context span:last-child { color: rgba(255,255,255,.60) !important; } .xt-showcase-viewport { --xt-project-peek: clamp(82px, 7.4vw, 132px); overflow: hidden !important; } .xt-showcase-track { gap: 12px !important; } .xt-showcase-slide { position: relative; flex: 0 0 calc(100% - var(--xt-project-peek)) !important; min-width: 0 !important; overflow: hidden; border-right: 1px solid rgba(255,255,255,.10); background: #050505; } .xt-showcase-slide:not(.is-active)::before { content: "NEXT / " attr(data-project-label); position: absolute; left: 13px; top: 50%; z-index: 30; writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg); font: 500 10px/1 "IBM Plex Mono", monospace; letter-spacing: .10em; color: var(--xt-lime); opacity: .72; pointer-events: none; } .xt-showcase-slide:not(.is-active)::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; z-index: 20; width: 42px; border-left: 1px solid rgba(200,255,61,.24); background: linear-gradient(90deg, rgba(200,255,61,.055), transparent); pointer-events: none; } .xt-showcase-slide.is-active::before, .xt-showcase-slide.is-active::after { content: none !important; } .xt-showcase-card { max-width: none !important; } .xt-client-history { position: relative; width: 100%; margin-top: clamp(72px, 8vw, 132px); padding: clamp(56px, 6vw, 98px) 0 clamp(70px, 7vw, 112px); overflow: hidden; border-top: 1px solid rgba(255,255,255,.10); background: radial-gradient(circle at 15% 30%, rgba(200,255,61,.035), transparent 28%), #050505; } .xt-client-history-head { width: min(100%, 1800px); margin: 0 auto clamp(40px, 4.5vw, 72px); padding: 0 var(--xt-pad); display: grid; grid-template-columns: minmax(170px,.45fr) minmax(0,1.55fr); gap: clamp(24px,4vw,70px); align-items: end; } .xt-client-history-kicker { align-self: start; padding-top: 9px; font: 500 11px/1.2 "IBM Plex Mono", monospace; letter-spacing: .095em; color: var(--xt-lime); } .xt-client-history h3 { margin: 0; max-width: 12ch; font-family: "Unbounded", sans-serif; font-size: clamp(31px, 4.3vw, 72px); font-weight: 500; line-height: .98; letter-spacing: -.055em; color: rgba(244,246,247,.92); } .xt-client-history h3 .xt-title-x { margin-left: .12em; font-size: .44em !important; vertical-align: .95em; color: var(--xt-lime) !important; } .xt-client-history-head p { margin: 0; max-width: 38ch; font-size: 16px; line-height: 1.5; letter-spacing: -.015em; color: rgba(255,255,255,.52); } .xt-client-marquee { position: relative; width: 100%; overflow: hidden; border-top: 1px solid rgba(255,255,255,.10); border-bottom: 1px solid rgba(255,255,255,.10); } .xt-client-marquee::before, .xt-client-marquee::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 5; width: min(11vw, 150px); pointer-events: none; } .xt-client-marquee::before { left: 0; background: linear-gradient(90deg, #050505, transparent); } .xt-client-marquee::after { right: 0; background: linear-gradient(-90deg, #050505, transparent); } .xt-client-marquee-track { display: flex; width: max-content; will-change: transform; } .xt-client-marquee-track + .xt-client-marquee-track { border-top: 1px solid rgba(255,255,255,.10); } .xt-client-marquee-group { display: flex; flex: 0 0 auto; } .xt-client-mark { width: clamp(210px, 19vw, 360px); min-height: clamp(92px, 8.5vw, 136px); padding: 0 clamp(22px,2.2vw,38px); display: flex; align-items: center; justify-content: center; border-right: 1px solid rgba(255,255,255,.10); font-family: "Unbounded", sans-serif; font-size: clamp(14px,1.45vw,23px); font-weight: 500; line-height: 1.1; letter-spacing: -.03em; text-align: center; color: rgba(255,255,255,.30); white-space: nowrap; transition: color .25s ease, background .25s ease; } .xt-client-mark:hover { color: rgba(255,255,255,.88); background: rgba(255,255,255,.025); } .xt-client-mark img { display: block; width: auto; max-width: min(76%, 230px); max-height: clamp(48px, 4.2vw, 66px); object-fit: contain; filter: brightness(0) invert(1); opacity: .56; transition: opacity .25s ease, filter .25s ease, transform .25s ease; } .xt-client-mark:hover img { opacity: .94; filter: brightness(0) invert(1); transform: scale(1.035); } .xt-client-logo-hama, .xt-client-logo-suedtirol, .xt-client-logo-dipa { max-width: min(58%, 170px) !important; max-height: clamp(50px, 4.7vw, 72px) !important; } .xt-client-logo-forst { max-width: min(72%, 215px) !important; } .xt-client-logo-miro { max-width: min(74%, 225px) !important; } .xt-client-logo-gains { max-width: min(70%, 210px) !important; } .xt-client-logo-zanon { max-width: min(78%, 235px) !important; } .xt-client-logo-rosengarten { max-width: min(78%, 235px) !important; } .xt-client-marquee-track-a { animation: xtClientRunA 34s linear infinite; } .xt-client-marquee-track-b { transform: translateX(-50%); animation: xtClientRunB 39s linear infinite; } @keyframes xtClientRunA { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes xtClientRunB { from { transform: translateX(-50%); } to { transform: translateX(0); } } .xt-client-marquee:hover .xt-client-marquee-track { animation-play-state: paused; } @media (max-width: 767px) { .xt-showcase-viewport { --xt-project-peek: 52px; } .xt-showcase-track { gap: 8px !important; } .xt-showcase-slide:not(.is-active)::before { left: 8px; font-size: 8px; } .xt-showcase-slide:not(.is-active)::after { width: 28px; } .xt-client-history { margin-top: 62px; padding: 48px 0 72px; } .xt-client-history-head { margin-bottom: 34px; padding: 0 18px; display: block; } .xt-client-history-kicker { margin-bottom: 16px; padding: 0; } .xt-client-history h3 { max-width: 10ch; font-size: clamp(29px, 9.5vw, 44px); } .xt-client-history-head p { margin-top: 18px; max-width: 34ch; font-size: 15px; } .xt-client-mark { width: 190px; min-height: 88px; padding: 0 18px; font-size: 14px; } } @media (prefers-reduced-motion: reduce) { .xt-client-marquee-track-a, .xt-client-marquee-track-b { animation: none !important; transform: none !important; } .xt-client-marquee { overflow-x: auto; } } .xt-client-mark .xt-client-logo-forst { max-width: min(68%, 190px); max-height: 66px; } .xt-client-logo-brasserie { max-width: min(76%, 225px) !important; max-height: clamp(48px, 4.4vw, 68px) !important; } .xt-client-logo-golden { max-width: min(68%, 200px) !important; max-height: clamp(52px, 4.8vw, 74px) !important; } .xt-client-logo-multiservice { max-width: min(72%, 215px) !important; max-height: clamp(50px, 4.6vw, 70px) !important; } .xt-header, .xt-header:not(.is-compact), .xt-header.is-compact { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 10000 !important; margin: 0 !important; transform: none !important; border-radius: 0 !important; overflow: visible !important; } .xt-header:not(.is-compact) { min-height: 80px !important; padding: 0 var(--xt-pad) !important; display: grid !important; grid-template-columns: minmax(180px,1fr) auto minmax(300px,1fr) !important; grid-template-areas: "logo nav right" !important; align-items: center !important; gap: clamp(25px,3.2vw,58px) !important; border: 0 !important; border-bottom: 1px solid rgba(255,255,255,.055) !important; background: #030303 !important; background-color: #030303 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .xt-header:not(.is-compact) .xt-logo { grid-area: logo !important; justify-self: start !important; display: inline-flex !important; align-items: center !important; min-height: 78px !important; padding: 0 !important; font-size: 19px !important; } .xt-header:not(.is-compact) .xt-nav { grid-area: nav !important; justify-self: center !important; display: flex !important; align-items: center !important; } .xt-header:not(.is-compact) .xt-header-right { grid-area: right !important; justify-self: end !important; display: flex !important; align-items: center !important; } .xt-header:not(.is-compact) .xt-menu-trigger { display: none !important; } .xt-header.is-compact { min-height: 58px !important; padding: 0 var(--xt-pad) !important; display: grid !important; grid-template-columns: minmax(0,1fr) auto !important; grid-template-areas: "logo right" !important; align-items: center !important; gap: 18px !important; border: 0 !important; border-bottom: 1px solid rgba(255,255,255,.09) !important; background: #030303 !important; background-color: #030303 !important; box-shadow: 0 10px 30px rgba(0,0,0,.18) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; } .xt-header.is-compact .xt-logo { grid-area: logo !important; justify-self: start !important; display: inline-flex !important; align-items: center !important; min-height: 56px !important; padding: 0 !important; font-size: 15px !important; } .xt-header.is-compact .xt-nav, .xt-header.is-compact .xt-header-links, .xt-header.is-compact .xt-languages { display: none !important; } .xt-header.is-compact .xt-header-right { grid-area: right !important; justify-self: end !important; display: flex !important; align-items: center !important; min-height: 56px !important; gap: 0 !important; } .xt-header.is-compact .xt-menu-trigger { display: inline-flex !important; align-items: center !important; } .xt-header::before, .xt-header::after, .xt-header:not(.is-compact)::before, .xt-header:not(.is-compact)::after, .xt-header.is-compact::before, .xt-header.is-compact::after, .xt-logo::after { content: none !important; display: none !important; } .xt-logo .xt-logo-x { display: inline-block !important; } @media (max-width: 767px) { .xt-header:not(.is-compact) { min-height: 64px !important; padding: 0 18px !important; grid-template-columns: minmax(0,1fr) auto auto !important; grid-template-areas: "logo langs menu" !important; gap: clamp(8px,2.8vw,14px) !important; background: #030303 !important; background-color: #030303 !important; } .xt-header:not(.is-compact) .xt-logo { grid-area: logo !important; min-height: 62px !important; font-size: 16px !important; } .xt-header:not(.is-compact) .xt-nav, .xt-header:not(.is-compact) .xt-header-links { display: none !important; } .xt-header:not(.is-compact) .xt-header-right { display: contents !important; } .xt-header:not(.is-compact) .xt-languages { grid-area: langs !important; justify-self: end !important; align-self: center !important; display: flex !important; gap: 2px !important; } .xt-header:not(.is-compact) .xt-languages a, .xt-header:not(.is-compact) .xt-languages span { width: 28px !important; min-width: 28px !important; height: 38px !important; display: inline-grid !important; place-items: center !important; font-size: 11px !important; } .xt-header:not(.is-compact) .xt-menu-trigger { grid-area: menu !important; justify-self: end !important; display: inline-flex !important; min-height: 44px !important; height: 44px !important; font-size: 11px !important; } .xt-header.is-compact { min-height: 56px !important; padding: 0 18px !important; gap: 14px !important; } .xt-header.is-compact .xt-logo, .xt-header.is-compact .xt-header-right { min-height: 54px !important; } .xt-header.is-compact .xt-menu-trigger { display: inline-flex !important; min-height: 44px !important; height: 44px !important; font-size: 11px !important; } } .xt-mobile-menu { z-index: 99999 !important; } .xt-mobile-menu.open { display: flex !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } body.xt-menu-open { overflow: hidden !important; } #xtalento-v3 .xt-selected::before {content:none !important;display:none !important;} #xt-client-history-title .xt-client-selected {color:var(--xt-lime) !important;} .xt-client-talent {position:relative;z-index:4;display:flex;justify-content:center;padding:clamp(32px,5vw,72px) var(--xt-pad) clamp(24px,4vw,54px);background:#030303;overflow:visible;} .xt-talent-word {--xt-lime:#fff;position:relative;display:inline-block;isolation:isolate;color:#fff;font:500 clamp(38px,8.7vw,144px)/1 "Unbounded",sans-serif;letter-spacing:-.055em;padding:.05em .04em .18em 0;overflow:visible;} .xt-talent-word .xt-talent-tag {left:50% !important;margin-left:calc(var(--xt-white-tag-width, 0px) / -2);} #xtalento-v3 .xt-service-row {min-height:clamp(275px,24vw,360px) !important;} #xtalento-v3 .xt-about-cta {margin-top:0;} @media(max-width:767px) { .xt-client-talent {padding-top:30px;padding-bottom:28px;} .xt-talent-word {font-size:clamp(30px,9.1vw,68px);} #xtalento-v3 .xt-service-row {min-height:260px !important;} } #xtalento-v3 .xt-about {background:#050505;} #xtalento-v3 .xt-about > .xt-container {padding-top:clamp(64px,7vw,108px);padding-bottom:clamp(64px,7vw,108px);} .xt-about-personal {display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,6vw,100px);padding-top:clamp(36px,5vw,72px);align-items:start;} .xt-about-voice h2 {margin:0;font:500 clamp(36px,5.4vw,86px)/1.04 "Unbounded",sans-serif;letter-spacing:-.055em;color:#fff;} .xt-about-voice h2 > span {color:var(--xt-lime);} .xt-about-signature {margin-top:clamp(36px,5vw,68px);display:flex;gap:20px;align-items:center;flex-wrap:wrap;} .xt-about-signature > span {font:500 clamp(28px,3vw,46px)/1.1 "Unbounded",sans-serif;letter-spacing:-.06em;color:#fff;} .xt-about-signature small {max-width:19ch;font:400 12px/1.5 "IBM Plex Mono",monospace;color:rgba(255,255,255,.55);letter-spacing:.04em;} .xt-about-story {padding-top:5px;} .xt-about-story p {max-width:50ch;margin:0 0 22px;font-size:clamp(16px,1.25vw,19px);line-height:1.6;color:rgba(255,255,255,.58);} .xt-about-story .xt-about-lead {font-size:clamp(20px,1.9vw,29px);line-height:1.4;letter-spacing:-.025em;color:#fff;margin-bottom:28px;} .xt-about-note {border-left:2px solid var(--xt-lime);padding-left:20px;margin-top:34px;font:500 clamp(16px,1.5vw,22px)/1.45 "Unbounded",sans-serif;letter-spacing:-.025em;color:rgba(255,255,255,.58);} .xt-about-note > span {color:#fff;} .xt-footer {position:relative;z-index:120;background:#030303;border-top:1px solid rgba(255,255,255,.16);overflow:hidden;} .xt-footer > .xt-container {padding:clamp(54px,7vw,104px) var(--xt-pad) 24px;} .xt-footer-contact {display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:44px;align-items:end;padding-bottom:clamp(42px,5vw,76px);} .xt-footer-kicker {display:block;margin-bottom:24px;font:500 13px/1.4 "IBM Plex Mono",monospace;letter-spacing:.08em;color:var(--xt-lime);} .xt-footer-contact h2 {margin:0;font:500 clamp(29px,4.3vw,64px)/1.08 "Unbounded",sans-serif;letter-spacing:-.05em;color:#fff;} .xt-footer-contact h2 > span {color:var(--xt-lime);} .xt-footer-direct {display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding-bottom:4px;} .xt-footer a {text-decoration:none !important;} .xt-footer-email {display:inline-flex;gap:12px;align-items:center;min-height:44px;font-size:clamp(20px,2.2vw,32px);letter-spacing:-.025em;color:#fff !important;} .xt-footer-email > span,.xt-footer-instagram > span,.xt-footer-top > span {color:var(--xt-lime);} .xt-footer-instagram {display:inline-flex;align-items:center;gap:20px;min-height:44px;font:500 14px/1.4 "IBM Plex Mono",monospace;color:rgba(255,255,255,.7) !important;} .xt-footer-navigation {padding:16px 0;border-top:1px solid rgba(255,255,255,.15);border-bottom:1px solid rgba(255,255,255,.15);display:flex;justify-content:space-between;gap:20px;align-items:center;} .xt-footer-navigation nav {display:flex;flex-wrap:wrap;gap:8px 28px;} .xt-footer-navigation a {display:inline-flex;gap:12px;align-items:center;min-height:44px;font:500 13px/1.4 "IBM Plex Mono",monospace;color:rgba(255,255,255,.7) !important;} .xt-footer-top {white-space:nowrap;} .xt-footer-wordmark {display:block;width:max-content;max-width:100%;margin:clamp(32px,5vw,76px) 0;font:500 clamp(34px,9.7vw,160px)/1.1 "Unbounded",sans-serif;letter-spacing:-.07em;color:#fff !important;} .xt-footer-wordmark > span {color:var(--xt-lime);} .xt-footer-bottom {display:flex;justify-content:space-between;gap:20px;font:400 12px/1.5 "IBM Plex Mono",monospace;letter-spacing:.03em;color:rgba(255,255,255,.45);} .xt-footer a:focus-visible {outline:2px solid var(--xt-lime);outline-offset:5px;} @media(hover:hover) {.xt-footer-navigation a:hover,.xt-footer-instagram:hover {color:var(--xt-lime) !important;}} @media(max-width:900px) { .xt-about-personal {grid-template-columns:1fr;gap:36px;} .xt-about-voice h2 {font-size:clamp(36px,7.6vw,68px);} .xt-about-signature {margin-top:30px;} .xt-footer-contact {grid-template-columns:1fr;gap:28px;} } @media(max-width:767px) { .xt-footer-navigation {align-items:flex-start;flex-direction:column;gap:4px;} .xt-footer-navigation nav {gap:4px 20px;} .xt-footer-bottom {flex-direction:column;gap:10px;} .xt-footer-wordmark {font-size:9.2vw;} } #xtalento-v3 .xt-client-history-head {display:block;width:100%;margin-bottom:32px;} #xtalento-v3 #xt-client-history-title {max-width:none;font-size:clamp(30px,4.2vw,64px);line-height:1.15;white-space:nowrap;word-break:normal;overflow-wrap:normal;} #xt-client-history-title .xt-client-selected {white-space:nowrap;} #xtalento-v3 .xt-client-history {padding-top:48px;padding-bottom:48px;} #xtalento-v3 .xt-about-voice h2 {font-size:clamp(34px,4.6vw,68px);} #xtalento-v3 .xt-footer > .xt-container {padding-top:clamp(48px,5vw,76px);} #xtalento-v3 .xt-footer-contact {display:flex;align-items:flex-end;justify-content:space-between;gap:28px;padding-bottom:42px;} #xtalento-v3 .xt-footer-kicker {font-size:12px;margin-bottom:18px;color:rgba(255,255,255,.52);} #xtalento-v3 .xt-footer-contact h2 {font-size:clamp(32px,4.4vw,62px);line-height:1.12;letter-spacing:-.05em;} #xtalento-v3 .xt-footer-contact h2 span {color:var(--xt-lime);} #xtalento-v3 .xt-footer-email {margin-top:16px;font-size:clamp(21px,2vw,29px);color:var(--xt-lime) !important;} #xtalento-v3 .xt-footer-navigation {padding:20px 0;gap:24px;} #xtalento-v3 .xt-footer-navigation .xt-footer-brand {font:500 clamp(22px,2.2vw,32px)/1.1 "Unbounded",sans-serif;letter-spacing:-.06em;color:#fff !important;gap:0;} .xt-footer-brand > span {color:var(--xt-lime);} #xtalento-v3 .xt-footer-navigation nav {gap:6px 22px;} #xtalento-v3 .xt-footer-bottom {padding-top:22px;} @media(max-width:767px) { #xtalento-v3 #xt-client-history-title {font-size:clamp(22px,6.1vw,40px);white-space:normal;line-height:1.18;} #xtalento-v3 .xt-client-history-head {margin-bottom:24px;} #xtalento-v3 .xt-footer-contact {align-items:flex-start;flex-direction:column;gap:14px;} #xtalento-v3 .xt-footer-navigation {align-items:flex-start;gap:12px;} } #xtalento-v3 .xt-selected-title {color:#fff !important;} #xtalento-v3 .xt-selected-title > span {display:block;color:var(--xt-lime) !important;} #xtalento-v3 .xt-showcase-heading .xt-two-tone-title {color:#fff !important;line-height:1.02 !important;} #xtalento-v3 .xt-showcase-heading .xt-heading-second {display:block;color:var(--xt-lime) !important;} #xtalento-v3 #xt-client-history-title {color:#fff !important;white-space:normal;line-height:1.12;font-size:clamp(28px,3.8vw,56px);} #xtalento-v3 #xt-client-history-title .xt-client-selected {color:var(--xt-lime) !important;} #xtalento-v3 .xt-about-voice h2,#xtalento-v3 .xt-services-intro-copy h2,#xtalento-v3 .xt-footer-contact h2 {color:#fff !important;} #xtalento-v3 .xt-about-voice h2 > span,#xtalento-v3 .xt-services-intro-copy h2 > span,#xtalento-v3 .xt-footer-contact h2 > span {display:block;color:var(--xt-lime) !important;} #xtalento-v3 .xt-footer-contact h2 {font-size:clamp(30px,3.5vw,50px);} @media(max-width:767px) { #xtalento-v3 #xt-client-history-title {font-size:clamp(22px,6.1vw,40px);} } @media (prefers-reduced-motion: reduce) { #xtalento-v3 .xt-hero *, #xtalento-v3 [data-project-media] * { animation: none !important; transition: none !important; } } @media (max-width: 480px) { #xtalento-v3 .xt-service-row[data-service="COMUNICAZIONE"] h3 { font-size: clamp(20px, 6.8vw, 30px) !important; } } @media (max-width: 767px) { #xtalento-v3 .xt-services-intro-copy > p, #xtalento-v3 .xt-service-row > p { font-size: 16px !important; line-height: 1.6 !important; color: rgba(255,255,255,.68) !important; } } #xtalento-v3 #services .xt-services-statement {width:min(900px,100%);} #xtalento-v3 #services .xt-services-statement-copy {min-width:0;} #xtalento-v3 #services .xt-services-statement-copy p:first-child {font-size:clamp(20px,1.6vw,25px) !important;line-height:1.4 !important;color:rgba(255,255,255,.9) !important;} #xtalento-v3 #services .xt-services-statement-copy p + p {margin-top:16px !important;color:rgba(255,255,255,.68) !important;} #xtalento-v3 #services .xt-service-row h3 {margin-top:36px !important;line-height:1.06 !important;} #xtalento-v3 #services .xt-service-row h3 > span {display:block;} #xtalento-v3 #services .xt-service-row > .xt-service-lead {font-size:clamp(18px,1.4vw,21px) !important;line-height:1.4 !important;font-weight:500;color:rgba(255,255,255,.9) !important;} #xtalento-v3 #services .xt-service-row > .xt-service-description {margin-top:12px !important;line-height:1.6 !important;color:rgba(255,255,255,.68) !important;} #xtalento-v3 #services .xt-service-outputs {position:relative;z-index:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px;list-style:none;margin:28px 0 0;padding:16px 0 0;border-top:1px solid rgba(255,255,255,.16);} #xtalento-v3 #services .xt-service-outputs li {margin:0;padding:6px 0;font:400 12px/1.5 "IBM Plex Mono",monospace;color:rgba(255,255,255,.7);overflow-wrap:break-word;} #xtalento-v3 #services .xt-service-row[data-service="SISTEMI"] {border-left:2px solid var(--xt-lime);background:rgba(200,255,61,.025);} #xtalento-v3 #services .xt-service-row[data-service="SISTEMI"] .xt-service-scope {color:var(--xt-lime);} @media (max-width:767px) { #xtalento-v3 #services .xt-services-statement-copy p:first-child {font-size:20px !important;} #xtalento-v3 #services .xt-services-statement-copy p + p {font-size:16px !important;line-height:1.6 !important;} #xtalento-v3 #services .xt-service-row {min-height:0 !important;} #xtalento-v3 #services .xt-service-row h3 {margin-top:30px !important;} #xtalento-v3 #services .xt-service-row > .xt-service-lead {font-size:18px !important;} #xtalento-v3 #services .xt-service-row > .xt-service-description {font-size:16px !important;} #xtalento-v3 #services .xt-service-scope {line-height:1.4 !important;} #xtalento-v3 #services .xt-service-outputs {margin-top:24px;gap:0 12px;} } #xtalento-v3 #services.xt-services-order { --xt-type-display:clamp(28px,3.8vw,56px); --xt-type-title:clamp(29px,3.2vw,48px); --xt-type-body:18px; --xt-type-meta:12px; background:#050505 !important; } #xtalento-v3 #services .xt-order-label {display:block;font:500 var(--xt-type-meta)/1.4 "IBM Plex Mono",monospace;letter-spacing:.08em;color:var(--xt-lime);} #xtalento-v3 #services .xt-order-services-header h2 {margin:38px 0 32px;font:500 var(--xt-type-display)/1.05 "Unbounded",sans-serif;letter-spacing:-.065em;color:#fff;} #xtalento-v3 #services .xt-order-services-header h2 {margin-bottom:76px;} #xtalento-v3 #services .xt-order-services-list {border-top:1px solid rgba(255,255,255,.17);} #xtalento-v3 #services .xt-order-service {position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:40px minmax(0,1.12fr) minmax(0,1fr);gap:36px;align-items:start;padding:52px 0 54px;border-bottom:1px solid rgba(255,255,255,.17);outline:none;} #xtalento-v3 #services .xt-order-number {padding-top:9px;font:400 var(--xt-type-meta)/1.5 "IBM Plex Mono",monospace;color:var(--xt-lime);} #xtalento-v3 #services .xt-order-number::after {content:"";display:block;width:10px;height:1px;margin-top:10px;background:var(--xt-lime);} #xtalento-v3 #services .xt-order-service h3 {position:relative;z-index:1;margin:0;font:500 var(--xt-type-title)/1.13 "Unbounded",sans-serif;letter-spacing:-.055em;color:#fff;transition:color .2s;} #xtalento-v3 #services .xt-order-service-copy {position:relative;z-index:1;padding-top:4px;} #xtalento-v3 #services .xt-order-service-copy > p {margin:0;max-width:38ch;font-size:var(--xt-type-body);line-height:1.5;color:rgba(255,255,255,.78);} #xtalento-v3 #services .xt-order-service-copy > .xt-order-outputs {margin-top:18px;max-width:55ch;font:400 var(--xt-type-meta)/1.7 "IBM Plex Mono",monospace;color:rgba(255,255,255,.5);} #xtalento-v3 #services .xt-order-ghost {position:absolute;z-index:-1;right:0;bottom:-.13em;white-space:nowrap;pointer-events:none;font:600 var(--xt-type-display)/1 "Unbounded",sans-serif;letter-spacing:-.065em;color:rgba(200,255,61,.04);opacity:0;transition:opacity .2s;} #xtalento-v3 #services .xt-order-service:focus h3 {color:var(--xt-lime);} #xtalento-v3 #services .xt-order-service:focus .xt-order-ghost {opacity:1;} @media (hover:hover) { #xtalento-v3 #services .xt-order-service:hover h3 {color:var(--xt-lime);} #xtalento-v3 #services .xt-order-service:hover .xt-order-ghost {opacity:1;} } @media (max-width:1000px) and (min-width:768px) { #xtalento-v3 #services.xt-services-order {--xt-type-title:27px;} #xtalento-v3 #services .xt-order-service {grid-template-columns:26px minmax(0,1.1fr) minmax(0,1fr);gap:22px;} } @media (max-width:767px) { #xtalento-v3 #services.xt-services-order {--xt-type-display:clamp(22px,6.1vw,40px);--xt-type-title:clamp(20px,6.1vw,27px);--xt-type-body:16px;--xt-type-meta:10px;} #xtalento-v3 #services .xt-order-services-header h2 {margin:28px 0 46px;} #xtalento-v3 #services .xt-order-service {grid-template-columns:22px minmax(0,1fr);gap:16px 12px;padding:30px 0 32px;} #xtalento-v3 #services .xt-order-number {grid-column:1;grid-row:1;padding-top:4px;} #xtalento-v3 #services .xt-order-number::after {width:8px;margin-top:8px;} #xtalento-v3 #services .xt-order-service h3 {grid-column:2;grid-row:1;line-height:1.16;color:var(--xt-lime);} #xtalento-v3 #services .xt-order-service-copy {grid-column:2;padding-top:0;} #xtalento-v3 #services .xt-order-service-copy > .xt-order-outputs {margin-top:14px;line-height:1.8;} #xtalento-v3 #services .xt-order-ghost {display:none;} } @media (prefers-reduced-motion:reduce) { #xtalento-v3 #services .xt-order-service h3,#xtalento-v3 #services .xt-order-ghost {transition:none;} } #xtalento-v3 {--xt-section-title-size:clamp(28px,3.8vw,56px);--xt-section-label-size:11px;--xt-section-label-gap:20px;--xt-section-content-gap:24px;} #xtalento-v3 .xt-section-label {display:block !important;padding:0 !important;margin:0 !important;font:500 var(--xt-section-label-size)/1.4 "IBM Plex Mono",monospace !important;letter-spacing:.08em !important;text-transform:uppercase;color:var(--xt-lime) !important;} #xtalento-v3 .xt-section-title {display:block !important;margin:var(--xt-section-label-gap) 0 var(--xt-section-content-gap) !important;padding:0 !important;max-width:100% !important;font:500 var(--xt-section-title-size)/1.12 "Unbounded",sans-serif !important;letter-spacing:-.055em !important;color:#fff !important;white-space:normal !important;word-break:normal;overflow-wrap:normal;} #xtalento-v3 .xt-section-title .xt-section-title-last {display:inline !important;color:var(--xt-lime) !important;font:inherit !important;letter-spacing:inherit !important;white-space:nowrap;} #xtalento-v3 .xt-section-title .xt-title-x {display:inline-block !important;font:500 .34em/1 "IBM Plex Mono",monospace !important;letter-spacing:0 !important;color:var(--xt-lime) !important;margin-left:.18em !important;vertical-align:baseline !important;transform:translateY(-.08em) !important;} #xtalento-v3 .xt-about-kicker {padding:0;border:0;} #xtalento-v3 .xt-about-personal {padding-top:var(--xt-section-label-gap);} #xtalento-v3 #xt-about-heading.xt-section-title {margin-top:0 !important;} @media (max-width:767px) { #xtalento-v3 {--xt-section-title-size:clamp(22px,6.1vw,40px);--xt-section-label-size:11px;--xt-section-label-gap:20px;--xt-section-content-gap:24px;} } #xtalento-v3 #services .xt-order-service {grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);} #xtalento-v3 #services .xt-order-service h3 {display:flex;align-items:flex-start;gap:14px;} #xtalento-v3 #services .xt-service-icon {display:block;flex:0 0 32px;width:32px;height:32px;margin-top:.1em;color:var(--xt-lime);} #xtalento-v3 #services .xt-service-name {min-width:0;} #xtalento-v3 #services .xt-order-service-tags {margin-top:18px;gap:7px;} @media (max-width:767px) { #xtalento-v3 #services .xt-order-service {grid-template-columns:minmax(0,1fr);row-gap:16px;} #xtalento-v3 #services .xt-order-service h3 {grid-column:1;gap:12px;} #xtalento-v3 #services .xt-order-service-copy {grid-column:1;padding-left:38px;} #xtalento-v3 #services .xt-service-icon {flex-basis:26px;width:26px;height:26px;} #xtalento-v3 #services .xt-order-service-tags {margin-top:14px;gap:6px;} } #xtalento-v3 #lab {padding:clamp(64px,6vw,90px) 0 64px;background:#050505;} #xtalento-v3 #lab > .xt-container {display:block;padding:0 var(--xt-pad);} #xtalento-v3 #lab .xt-lab-v2-header {margin-bottom:52px;} #xtalento-v3 #lab .xt-lab-v2-header > p {margin:0;color:#b5b5b5;font-size:16px;line-height:1.6;max-width:76ch;} #xtalento-v3 #lab .xt-lab-v2-group {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:38px;padding:30px 0;border-bottom:1px solid #303030;} #xtalento-v3 #lab .xt-lab-v2-group-header > div {display:flex;gap:18px;align-items:baseline;} #xtalento-v3 #lab .xt-lab-v2-category {font:400 10px/1.5 "IBM Plex Mono",monospace;letter-spacing:.035em;} #xtalento-v3 #lab .xt-lab-v2-group h3 {margin:0;font:500 clamp(24px,2.3vw,33px)/1.2 "Unbounded",sans-serif;letter-spacing:-.055em;color:#fff;} #xtalento-v3 #lab .xt-lab-v2-group h3 span {color:var(--xt-lime);} #xtalento-v3 #lab .xt-lab-v2-group-header > p {margin:14px 0 0 46px;font-size:14px;line-height:1.55;color:#b5b5b5;max-width:27ch;} #xtalento-v3 #lab .xt-lab-v2-projects {min-width:0;} #xtalento-v3 #lab .xt-lab-v2-project {padding:22px 0;} #xtalento-v3 #lab .xt-lab-v2-project:first-child {padding-top:0;} #xtalento-v3 #lab .xt-lab-v2-project:last-child {padding-bottom:0;} #xtalento-v3 #lab .xt-lab-v2-project + .xt-lab-v2-project {border-top:1px solid #303030;} #xtalento-v3 #lab .xt-lab-project-header {display:grid;grid-template-columns:minmax(140px,.7fr) minmax(0,1fr);gap:24px;align-items:center;min-height:64px;} #xtalento-v3 #lab .xt-lab-details {margin:14px 0 0;border:0;background:none;} #xtalento-v3 #lab .xt-lab-details > summary {display:flex;align-items:center;width:max-content;max-width:100%;min-height:44px;padding:0 12px;list-style:none;cursor:pointer;border:1px solid #c8ff3d55;border-radius:3px;color:var(--xt-lime);transition:border-color .2s,background .2s;} #xtalento-v3 #lab .xt-lab-details > summary::-webkit-details-marker {display:none;} #xtalento-v3 #lab .xt-lab-details > summary::marker {content:"";} #xtalento-v3 #lab .xt-lab-details > summary:focus-visible {outline:2px solid var(--xt-lime);outline-offset:7px;border-radius:2px;} #xtalento-v3 #lab .xt-lab-v2-identity {display:block;min-width:0;} #xtalento-v3 #lab .xt-lab-v2-category {display:block;margin:0 0 7px;color:#a4a4a4;} #xtalento-v3 #lab .xt-lab-project-name {display:block;font:500 clamp(23px,2vw,29px)/1.15 "Unbounded",sans-serif;letter-spacing:-.055em;color:#f4f6f7;transition:color .2s;} #xtalento-v3 #lab .xt-lab-v2-status {display:block;min-width:0;} #xtalento-v3 #lab .xt-lab-state-label {display:block;margin-bottom:2px;font:500 10px/1.5 "IBM Plex Mono",monospace;letter-spacing:.04em;color:#d5d5d5;} #xtalento-v3 #lab [data-status="live"] .xt-lab-state-label {color:var(--xt-lime);} #xtalento-v3 #lab .xt-lab-progress-row {display:grid;grid-template-columns:minmax(0,1fr) 90px;align-items:center;gap:12px;} #xtalento-v3 #lab .xt-lab-progress {display:block;height:3px;position:relative;isolation:isolate;background:#343434;border-radius:3px;} #xtalento-v3 #lab .xt-lab-progress-fill {position:absolute;inset:0;background:var(--xt-lime);transform-origin:left;transform:scaleX(var(--xt-lab-scale));border-radius:inherit;} #xtalento-v3 #lab .xt-lab-progress-point {position:absolute;left:var(--xt-lab-stop);top:50%;width:7px;height:7px;transform:translate(-50%,-50%);background:var(--xt-lime);border-radius:50%;box-shadow:0 0 12px #c8ff3d55;} #xtalento-v3 #lab.is-lab-motion-ready .xt-lab-v2-project:not(.is-in-view) .xt-lab-progress-fill {transform:scaleX(0);} #xtalento-v3 #lab.is-lab-motion-ready .xt-lab-v2-project:not(.is-in-view) .xt-lab-progress-point {left:0;box-shadow:none;} #xtalento-v3 #lab.is-lab-motion-ready .xt-lab-progress-fill {transition:transform 1s cubic-bezier(.22,.7,.22,1);} #xtalento-v3 #lab.is-lab-motion-ready .xt-lab-progress-point {transition:left 1s cubic-bezier(.22,.7,.22,1);} #xtalento-v3 #lab .xt-lab-steps {display:block;position:relative;width:calc(100% - 102px);height:12px;margin-top:2px;} #xtalento-v3 #lab .xt-lab-step {position:absolute;top:0;white-space:nowrap;font:400 8px/1.5 "IBM Plex Mono",monospace;color:#999;letter-spacing:.02em;} #xtalento-v3 #lab .xt-lab-step:nth-child(1) {left:0;} #xtalento-v3 #lab .xt-lab-step:nth-child(2) {left:33.3333%;transform:translateX(-50%);} #xtalento-v3 #lab .xt-lab-step:nth-child(3) {left:66.6667%;transform:translateX(-50%);} #xtalento-v3 #lab .xt-lab-step:nth-child(4) {right:0;} #xtalento-v3 #lab .xt-lab-step.is-complete {color:#c2c2c2;} #xtalento-v3 #lab .xt-lab-step.is-current {color:var(--xt-lime);font-weight:500;} #xtalento-v3 #lab .xt-lab-access {display:inline-flex;gap:6px;align-items:center;justify-content:flex-end;min-height:40px;font:400 9px/1.4 "IBM Plex Mono",monospace;letter-spacing:.025em;white-space:nowrap;color:#aaa;text-decoration:none;} #xtalento-v3 #lab .xt-lab-access svg {width:18px;height:18px;flex:none;} #xtalento-v3 #lab .xt-lab-access-link {color:var(--xt-lime);padding:0 8px;border:1px solid #c8ff3d40;border-radius:3px;justify-content:center;transition:background .2s,border-color .2s;} #xtalento-v3 #lab .xt-lab-access-link:focus-visible {outline:2px solid var(--xt-lime);outline-offset:4px;} #xtalento-v3 #lab .xt-lab-details-toggle {display:flex;align-items:center;gap:14px;color:var(--xt-lime);} #xtalento-v3 #lab .xt-lab-details-label {font:500 9px/1 "IBM Plex Mono",monospace;letter-spacing:.055em;} #xtalento-v3 #lab .xt-lab-details-icon {width:19px;height:19px;transition:transform .25s;} #xtalento-v3 #lab .xt-lab-details[open] .xt-lab-details-icon {transform:rotate(45deg);color:var(--xt-lime);border-color:#c8ff3d80;} #xtalento-v3 #lab .xt-lab-details > .xt-lab-v2-copy {margin:14px 0 4px;padding:16px 0 0 18px;border-top:1px solid #303030;border-left:2px solid var(--xt-lime);} #xtalento-v3 #lab .xt-lab-v2-description {margin:0;max-width:74ch;font-size:15px;line-height:1.65;color:#b5b5b5;} #xtalento-v3 #lab .xt-lab-v2-signature {display:inline-block;margin-left:4px;font-size:.52em;vertical-align:baseline;} @media(hover:hover) { #xtalento-v3 #lab .xt-lab-details > summary:hover .xt-lab-project-name {color:var(--xt-lime);} #xtalento-v3 #lab .xt-lab-details > summary:hover .xt-lab-details-icon {color:var(--xt-lime);border-color:#c8ff3d80;} #xtalento-v3 #lab .xt-lab-access-link:hover {background:#c8ff3d12;border-color:var(--xt-lime);} } @media(max-width:1100px) { #xtalento-v3 #lab .xt-lab-v2-group {grid-template-columns:minmax(0,.9fr) minmax(0,3fr);gap:26px;} #xtalento-v3 #lab .xt-lab-v2-group-header > div {gap:10px;flex-wrap:wrap;} #xtalento-v3 #lab .xt-lab-v2-group-header > p {margin-left:0;} #xtalento-v3 #lab .xt-lab-project-header {grid-template-columns:minmax(0,1fr);gap:16px;} #xtalento-v3 #lab .xt-lab-v2-identity {grid-column:1;grid-row:1;} #xtalento-v3 #lab .xt-lab-v2-status {grid-column:1 / -1;grid-row:2;} } @media(max-width:767px) { #xtalento-v3 #lab {padding:56px 0 48px;} #xtalento-v3 #lab .xt-lab-v2-header {margin-bottom:32px;} #xtalento-v3 #lab .xt-lab-v2-header > p {font-size:14px;} #xtalento-v3 #lab .xt-lab-v2-group {display:block;padding:26px 0;} #xtalento-v3 #lab .xt-lab-v2-group-header {margin-bottom:24px;} #xtalento-v3 #lab .xt-lab-v2-group-header > div {gap:14px;flex-wrap:nowrap;} #xtalento-v3 #lab .xt-lab-v2-group h3 {font-size:26px;} #xtalento-v3 #lab .xt-lab-v2-group-header > p {max-width:100%;margin:10px 0 0;font-size:13px;} #xtalento-v3 #lab .xt-lab-v2-project {padding:22px 0;} #xtalento-v3 #lab .xt-lab-project-name {font-size:25px;} #xtalento-v3 #lab .xt-lab-v2-category {font-size:9px;margin-bottom:5px;} #xtalento-v3 #lab .xt-lab-v2-description {font-size:14px;} #xtalento-v3 #lab .xt-lab-details > .xt-lab-v2-copy {margin-right:0;padding-left:14px;} } @media(prefers-reduced-motion:reduce) { #xtalento-v3 #lab .xt-lab-progress-fill,#xtalento-v3 #lab .xt-lab-progress-point,#xtalento-v3 #lab .xt-lab-details-icon,#xtalento-v3 #lab .xt-lab-project-name {transition:none !important;} #xtalento-v3 #lab.is-lab-motion-ready .xt-lab-v2-project .xt-lab-progress-fill {transform:scaleX(var(--xt-lab-scale));} #xtalento-v3 #lab.is-lab-motion-ready .xt-lab-v2-project .xt-lab-progress-point {left:var(--xt-lab-stop);} } #xtalento-v3 .xt-hero-cta {gap:14px !important;flex-wrap:wrap;} #xtalento-v3 .xt-hero-cta-contact {min-height:54px !important;padding:0 22px !important;gap:18px !important;background:var(--xt-lime) !important;border-color:var(--xt-lime) !important;color:#030303 !important;font:500 13px/1.2 "IBM Plex Mono",monospace !important;letter-spacing:.05em !important;} #xtalento-v3 .xt-hero-cta-contact svg {width:19px;height:19px;flex:none;} #xtalento-v3 .xt-hero-cta-contact b {color:#030303 !important;font-size:19px;} #xtalento-v3 .xt-hero-cta-projects {min-height:54px !important;display:inline-flex;align-items:center;gap:20px;padding:0 19px !important;border:1px solid #ffffff40 !important;font:400 11px/1.2 "IBM Plex Mono",monospace !important;letter-spacing:.045em;color:#f4f6f7 !important;} #xtalento-v3 .xt-hero-cta-projects b {color:var(--xt-lime);font-size:16px;} #xtalento-v3 .xt-hero-contact-note {margin:12px 0 0;padding:0;font:400 9px/1.6 "IBM Plex Mono",monospace;letter-spacing:.025em;color:#b5b5b5;pointer-events:auto;} #xtalento-v3 .xt-hero-contact-note a {display:inline-block;padding:3px 0;margin-left:8px;color:#f4f6f7;} #xtalento-v3 #services.xt-services-studio > .xt-container {padding:clamp(60px,7vw,110px) var(--xt-pad) clamp(60px,6vw,90px);} #xtalento-v3 #services .xt-studio-services-header {display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:38px;} #xtalento-v3 #services .xt-studio-services-header > p {margin:0 0 24px;max-width:45ch;font-size:17px;line-height:1.65;color:#b5b5b5;} #xtalento-v3 #services .xt-studio-services-list {border-top:1px solid #303030;} #xtalento-v3 #services .xt-studio-service {position:relative;display:grid;grid-template-columns:clamp(86px,8vw,128px) minmax(0,1fr);align-items:center;gap:clamp(28px,4vw,64px);padding:36px 0;border-bottom:1px solid #303030;isolation:isolate;} #xtalento-v3 #services .xt-studio-service::before {content:"";position:absolute;inset:0 calc(-1 * var(--xt-pad));z-index:-1;background:linear-gradient(90deg,#c8ff3d07,transparent 70%);opacity:0;transition:opacity .25s;pointer-events:none;} #xtalento-v3 #services .xt-studio-service-mark {align-self:center;} #xtalento-v3 #services .xt-studio-service-icon {display:block;width:clamp(76px,7.2vw,112px);height:clamp(76px,7.2vw,112px);color:var(--xt-lime);transition:transform .3s;} #xtalento-v3 #services .xt-studio-service-copy {min-width:0;} #xtalento-v3 #services .xt-studio-service-copy h3 {margin:0 0 12px;font:500 clamp(23px,2.8vw,42px)/1.15 "Unbounded",sans-serif;letter-spacing:-.055em;color:#f4f6f7;transition:color .25s;} #xtalento-v3 #services .xt-studio-service-copy p {margin:0;font-size:clamp(16px,1.35vw,19px);line-height:1.5;color:#b5b5b5;max-width:60ch;} #xtalento-v3 #services .xt-studio-service-tags {gap:6px;margin-top:18px;} #xtalento-v3 #services .xt-studio-service-tags span {font-size:10px;padding:7px 9px;border-color:#ffffff26;color:#c3c3c3;} #xtalento-v3 #services .xt-services-contact {display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:36px;padding-top:clamp(40px,5vw,72px);} #xtalento-v3 #services .xt-services-contact-label {display:block;margin-bottom:16px;font:500 10px/1.5 "IBM Plex Mono",monospace;letter-spacing:.07em;color:var(--xt-lime);} #xtalento-v3 #services .xt-services-contact h3 {margin:0 0 18px;font:500 clamp(27px,3.2vw,48px)/1.13 "Unbounded",sans-serif;letter-spacing:-.055em;color:#fff;} #xtalento-v3 #services .xt-services-contact h3 > span {color:var(--xt-lime);} #xtalento-v3 #services .xt-services-contact p {margin:0;max-width:64ch;font-size:16px;line-height:1.6;color:#b5b5b5;} #xtalento-v3 .xt-services-contact-actions {display:flex;flex-direction:column;align-items:flex-start;gap:12px;} #xtalento-v3 .xt-contact-button {display:inline-flex;align-items:center;justify-content:space-between;gap:48px;min-height:56px;padding:0 24px;border:1px solid var(--xt-lime);background:var(--xt-lime);color:#030303 !important;font:500 13px/1.3 "IBM Plex Mono",monospace;letter-spacing:.06em;transition:background .2s,transform .2s;} #xtalento-v3 .xt-contact-button b {font-size:22px;font-weight:400;} #xtalento-v3 .xt-contact-email {display:inline-flex;align-items:center;min-height:44px;font:400 12px/1.5 "IBM Plex Mono",monospace;color:#b5b5b5;} #xtalento-v3 .xt-contact-button:focus-visible,#xtalento-v3 .xt-contact-email:focus-visible {outline:2px solid var(--xt-lime);outline-offset:6px;} #xtalento-v3 #about.xt-about-hero {position:relative;overflow:hidden;isolation:isolate;background:#030303;border-top:1px solid #ffffff14;} #xtalento-v3 #about > .xt-container {position:relative;z-index:auto;min-height:clamp(660px,55vw,840px);padding:clamp(64px,7vw,110px) var(--xt-pad) clamp(66px,7vw,108px);} #xtalento-v3 #about #xt-about-x-canvas {opacity:0;} #xtalento-v3 #about .xt-about-topline {position:relative;z-index:4;display:flex;justify-content:space-between;align-items:center;gap:20px;} #xtalento-v3 #about .xt-about-location {font:400 10px/1.4 "IBM Plex Mono",monospace;letter-spacing:.06em;color:#999;} #xtalento-v3 #about .xt-about-copy {position:relative;z-index:4;width:min(56%,680px);margin-top:clamp(36px,4.4vw,64px);} #xtalento-v3 #about #xt-about-heading.xt-section-title {font-size:clamp(32px,4vw,64px) !important;line-height:1.12 !important;margin:0 0 30px !important;letter-spacing:-.055em !important;} #xtalento-v3 #about .xt-about-story {position:relative;z-index:4;width:min(56%,680px);padding:0;max-width:52ch;} #xtalento-v3 #about .xt-about-story p {max-width:52ch;margin:0 0 20px;font-size:17px;line-height:1.65;color:#b5b5b5;} #xtalento-v3 #about .xt-about-lead {margin:0;font-size:clamp(19px,1.55vw,23px);line-height:1.5;color:#f4f6f7;margin-bottom:24px;} #xtalento-v3 #about .xt-about-story p:last-child {margin-bottom:0;} @media(hover:hover) { #xtalento-v3 .xt-hero-cta-contact:hover,#xtalento-v3 .xt-contact-button:hover {background:#d6ff72 !important;transform:translateY(-2px);} #xtalento-v3 .xt-hero-cta-projects:hover {border-color:var(--xt-lime) !important;} #xtalento-v3 .xt-hero-contact-note a:hover,#xtalento-v3 .xt-contact-email:hover {color:var(--xt-lime);} #xtalento-v3 #services .xt-studio-service:hover::before {opacity:1;} #xtalento-v3 #services .xt-studio-service:hover h3 {color:var(--xt-lime);} #xtalento-v3 #services .xt-studio-service:hover .xt-studio-service-icon {transform:translateY(-3px);} } @media(max-width:1000px) { #xtalento-v3 #services .xt-services-contact {grid-template-columns:1fr;gap:24px;} #xtalento-v3 .xt-services-contact-actions {flex-direction:row;align-items:center;gap:22px;flex-wrap:wrap;} } @media(max-width:767px) { #xtalento-v3 .xt-hero-cta {gap:10px !important;} #xtalento-v3 .xt-hero-cta-contact {min-height:48px !important;padding:0 15px !important;gap:11px !important;font-size:11px !important;} #xtalento-v3 .xt-hero-cta-contact svg {width:17px;height:17px;} #xtalento-v3 .xt-hero-cta-contact b {font-size:17px;} #xtalento-v3 .xt-hero-cta-projects {min-height:48px !important;padding:0 12px !important;gap:10px;font-size:10px !important;} #xtalento-v3 .xt-hero-contact-note {font-size:8px;margin-top:8px;} #xtalento-v3 .xt-hero-contact-note a {margin-left:5px;} #xtalento-v3 #services.xt-services-studio > .xt-container {padding-top:52px;padding-bottom:56px;} #xtalento-v3 #services .xt-studio-services-header {grid-template-columns:1fr;gap:0;margin-bottom:26px;} #xtalento-v3 #services .xt-studio-services-header > p {margin:0;font-size:15px;} #xtalento-v3 #services .xt-studio-service {grid-template-columns:58px minmax(0,1fr);gap:18px;padding:28px 0;} #xtalento-v3 #services .xt-studio-service-icon {width:58px;height:58px;} #xtalento-v3 #services .xt-studio-service-copy h3 {font-size:clamp(18px,4.6vw,29px);line-height:1.2;} #xtalento-v3 #services .xt-studio-service-copy p {font-size:15px;} #xtalento-v3 #services .xt-studio-service-tags {margin-top:15px;} #xtalento-v3 #services .xt-studio-service-tags span {font-size:9px;padding:6px 7px;} #xtalento-v3 #services .xt-services-contact {padding-top:38px;} #xtalento-v3 #services .xt-services-contact p {font-size:15px;} #xtalento-v3 .xt-services-contact-actions {gap:8px 20px;} #xtalento-v3 .xt-contact-button {min-height:52px;padding:0 20px;gap:36px;} #xtalento-v3 #about > .xt-container {padding-top:54px;padding-bottom:60px;} } @media(max-width:360px) { #xtalento-v3 .xt-hero-cta-contact {padding:0 12px !important;gap:8px !important;} #xtalento-v3 .xt-hero-cta-projects {padding:0 10px !important;gap:8px;} #xtalento-v3 #services .xt-studio-service {grid-template-columns:50px minmax(0,1fr);gap:14px;} #xtalento-v3 #services .xt-studio-service-icon {width:50px;height:50px;} } @media(prefers-reduced-motion:reduce) { #xtalento-v3 #services .xt-studio-service *,#xtalento-v3 #services .xt-studio-service::before,#xtalento-v3 .xt-contact-button,#xtalento-v3 .xt-hero-cta a {transition:none !important;} } #xtalento-v3 #services .xt-studio-service-tags span {text-transform:uppercase;letter-spacing:.055em;} #xtalento-v3 #lab .xt-lab-group-label {display:block;margin-bottom:10px;font:500 9px/1.5 "IBM Plex Mono",monospace;letter-spacing:.065em;color:#a4a4a4;} #xtalento-v3 #lab .xt-lab-v2-group-header > p {margin-left:0;} @media(max-width:1000px) and (min-width:768px) { #xtalento-v3 #about .xt-about-copy,#xtalento-v3 #about .xt-about-story {width:60%;} #xtalento-v3 #about .xt-about-story p {font-size:16px;} } @media(max-width:767px) { #xtalento-v3 #about > .xt-container {padding-top:54px;padding-bottom:56px;min-height:0;} #xtalento-v3 #about .xt-about-location {font-size:8px;} #xtalento-v3 #about .xt-about-copy {width:100%;max-width:600px;margin-top:32px;} #xtalento-v3 #about .xt-about-story {width:100%;max-width:600px;} #xtalento-v3 #about #xt-about-heading.xt-section-title {font-size:clamp(26px,7.2vw,44px) !important;margin-bottom:26px !important;} #xtalento-v3 #about .xt-about-story p {font-size:15px;} #xtalento-v3 #about .xt-about-lead {margin:0;font-size:19px;} #xtalento-v3 #lab .xt-lab-v2-group {display:block;margin:0 0 24px;padding:20px 16px 18px;border:1px solid #3b3b3b;border-top:2px solid #c8ff3d80;background:linear-gradient(145deg,#c8ff3d05,#ffffff02 70%);} #xtalento-v3 #lab .xt-lab-v2-group-header {margin:0 0 20px;padding:0 0 18px;border-bottom:1px solid #ffffff26;} #xtalento-v3 #lab .xt-lab-group-label {color:var(--xt-lime);font-size:9px;margin-bottom:10px;} #xtalento-v3 #lab .xt-lab-v2-group-header > div {gap:0;} #xtalento-v3 #lab .xt-lab-v2-group h3 {font-size:30px;line-height:1.2;} #xtalento-v3 #lab .xt-lab-v2-group-header > p {max-width:100%;margin:12px 0 0;font-size:13px;} #xtalento-v3 #lab .xt-lab-v2-projects {margin-left:0;padding-left:14px;border-left:1px solid #c8ff3d66;} #xtalento-v3 #lab .xt-lab-project-name {font-size:22px;} #xtalento-v3 #lab .xt-lab-v2-project {padding:20px 0;} #xtalento-v3 #lab .xt-lab-v2-project:first-child {padding-top:0;} #xtalento-v3 #lab .xt-lab-v2-project:last-child {padding-bottom:3px;} #xtalento-v3 #lab .xt-lab-v2-category {font-size:8px;} } @media(max-width:360px) { #xtalento-v3 #lab .xt-lab-v2-group {padding-left:12px;padding-right:12px;} #xtalento-v3 #lab .xt-lab-v2-projects {padding-left:10px;} #xtalento-v3 #lab .xt-lab-project-name {font-size:21px;} } @media(prefers-reduced-motion:reduce) { } #xtalento-v3 a:not(.xt-logo):not(.xt-footer-brand):not(.xt-hero-cta-primary):not(.xt-hero-cta-secondary):not(.xt-contact-button):not(.xt-site-preview-open), .xt-mobile-menu a {color:var(--xt-blue,#14bff2) !important;} #xtalento-v3 a:not(.xt-logo):not(.xt-footer-brand):not(.xt-hero-cta-primary):not(.xt-hero-cta-secondary):not(.xt-contact-button):not(.xt-site-preview-open) :is(span,b,svg), .xt-mobile-menu a :is(span,b,svg) {color:inherit !important;} #xtalento-v3 a:not(.xt-logo):not(.xt-footer-brand):not(.xt-hero-cta-primary):not(.xt-hero-cta-secondary):not(.xt-contact-button):not(.xt-site-preview-open):focus-visible, .xt-mobile-menu a:focus-visible {outline-color:var(--xt-blue,#14bff2) !important;} #xtalento-v3 .xt-service-badges span, #xtalento-v3 .xt-showcase-tags span:not(.xt-showcase-tags-label) {color:var(--xt-blue) !important;border-color:#14bff259 !important;background:#14bff208 !important;text-transform:uppercase;} #xtalento-v3 .xt-showcase-tags .xt-showcase-tags-label, #xtalento-v3 #lab .xt-lab-state-label, #xtalento-v3 #lab .xt-lab-access {color:var(--xt-blue) !important;} #xtalento-v3 #lab .xt-lab-access-link {border-color:#14bff259;} #xtalento-v3 #about .xt-about-story a {text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;} @media(hover:hover) { #xtalento-v3 .xt-service-badges span:hover, #xtalento-v3 .xt-showcase-tags span:not(.xt-showcase-tags-label):hover {color:var(--xt-blue) !important;border-color:#14bff2a6 !important;background:#14bff214 !important;} #xtalento-v3 #lab .xt-lab-access-link:hover {border-color:var(--xt-blue);background:#14bff214;} #xtalento-v3 #lab .xt-lab-details > summary:hover {border-color:var(--xt-lime);background:#c8ff3d0a;} } @media(prefers-reduced-motion:reduce) { #xtalento-v3 #lab .xt-lab-details > summary {transition:none;} } #xtalento-v3 #work.xt-work-showcase {padding:30px 0 0 !important;overflow:hidden;} #xtalento-v3 #work .xt-gallery-heading {display:flex;justify-content:space-between;align-items:center;gap:20px;max-width:1800px;margin:0 auto;padding:0 var(--xt-pad) 20px;} #xtalento-v3 #work .xt-gallery-heading p {margin:0;max-width:52ch;font-size:16px;line-height:1.5;color:#b5b5b5;} #xtalento-v3 #work .xt-gallery-heading strong {color:#f4f6f7;font-weight:500;} #xtalento-v3 #work .xt-gallery-tools {display:flex;align-items:center;gap:20px;flex:none;} #xtalento-v3 #work [data-project-status] {font:400 10px/1.4 "IBM Plex Mono",monospace;letter-spacing:.035em;color:var(--xt-blue);} #xtalento-v3 #work .xt-gallery-arrows {display:flex;gap:8px;} #xtalento-v3 #work .xt-gallery-arrow {display:grid;place-items:center;width:46px;height:46px;padding:0;border:1px solid #c8ff3d66;background:#c8ff3d08;border-radius:50%;color:var(--xt-lime);cursor:pointer;transition:background .2s,opacity .2s;} #xtalento-v3 #work .xt-gallery-arrow svg {width:20px;height:20px;} #xtalento-v3 #work .xt-gallery-arrow:disabled {opacity:.25;cursor:default;} #xtalento-v3 #work .xt-project-selector-wrap {padding:0 var(--xt-pad) 26px;border:0;max-width:1800px;margin:auto;} #xtalento-v3 #work .xt-project-selector {position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;border:0;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth;} #xtalento-v3 #work .xt-project-selector::-webkit-scrollbar {display:none;} #xtalento-v3 #work .xt-project-tab {display:flex;flex-direction:column;align-items:stretch;gap:0;min-width:0;min-height:0;padding:0;border:1px solid #ffffff24;border-radius:3px;background:#090c0d;overflow:hidden;color:#b5b5b5;text-align:left;} #xtalento-v3 #work .xt-project-tab.is-active {border-color:var(--xt-lime);background:#c8ff3d08;color:var(--xt-lime);} #xtalento-v3 #work .xt-project-thumb {display:block;position:relative;overflow:hidden;aspect-ratio:3.3/1;background:#07151b;} #xtalento-v3 #work .xt-project-thumb img {display:block;width:100%;height:100%;object-fit:cover;opacity:.55;filter:saturate(.65);transition:opacity .3s,filter .3s;} #xtalento-v3 #work .xt-project-thumb svg {display:block;width:100%;height:100%;opacity:.65;} #xtalento-v3 #work .xt-project-tab.is-active .xt-project-thumb img {opacity:.95;filter:saturate(1);} #xtalento-v3 #work .xt-project-tab strong {display:block;padding:13px 12px;font:500 10px/1.4 "IBM Plex Mono",monospace;letter-spacing:.035em;color:inherit;} #xtalento-v3 #work .xt-showcase-viewport {--xt-project-peek:72px;position:relative;width:calc(100% - 2 * var(--xt-pad));margin:0 var(--xt-pad);height:auto !important;overflow-x:auto !important;overflow-y:hidden !important;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;touch-action:pan-x pan-y;scrollbar-width:none;transition:none !important;overflow-anchor:none;} #xtalento-v3 #work .xt-showcase-viewport::-webkit-scrollbar {display:none;} #xtalento-v3 #work .xt-showcase-track {position:relative;display:flex;align-items:stretch;gap:18px !important;width:100%;transform:none !important;transition:none !important;will-change:auto;} #xtalento-v3 #work .xt-showcase-track::after {content:"";flex:0 0 calc(var(--xt-project-peek) - 18px);} #xtalento-v3 #work .xt-showcase-slide {flex:0 0 calc(100% - var(--xt-project-peek)) !important;display:flex;opacity:1 !important;pointer-events:auto;scroll-snap-align:start;scroll-snap-stop:always;border:1px solid #ffffff26;border-radius:4px;background:#090c0d;transition:none;} #xtalento-v3 #work .xt-showcase-slide::before,#xtalento-v3 #work .xt-showcase-slide::after {content:none !important;} #xtalento-v3 #work .xt-showcase-card {display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,.85fr);grid-template-rows:auto auto 1fr auto;grid-template-areas:"main heading" "main tags" "main description" "main links" !important;align-content:start;gap:24px 34px;width:100%;padding:24px;max-width:none;} #xtalento-v3 #work .xt-showcase-meta {display:none;} #xtalento-v3 #work .xt-showcase-heading {display:block;padding:8px 0 0 !important;} #xtalento-v3 #work .xt-showcase-heading h2 {font-size:clamp(25px,2.75vw,47px) !important;line-height:1.1 !important;letter-spacing:-.05em !important;overflow-wrap:anywhere !important;} #xtalento-v3 #work .xt-showcase-heading .xt-heading-second {line-height:1.1;} #xtalento-v3 #work .xt-showcase-context {display:flex;flex-direction:column;align-items:flex-start;gap:5px;margin-top:16px;padding:0 !important;text-align:left;} #xtalento-v3 #work .xt-showcase-context span {font-size:9px;letter-spacing:.025em;} #xtalento-v3 #work .xt-showcase-tags {align-self:start;gap:6px !important;} #xtalento-v3 #work .xt-showcase-tags .xt-showcase-tags-label {width:100%;margin:0 0 3px;font-size:9px;} #xtalento-v3 #work .xt-showcase-tags span:not(.xt-showcase-tags-label) {min-height:27px;padding:0 7px !important;font-size:9px;} #xtalento-v3 #work .xt-showcase-description {padding:0;} #xtalento-v3 #work .xt-showcase-description p {font-size:16px;line-height:1.6;letter-spacing:0;max-width:50ch;} #xtalento-v3 #work .xt-client-links {justify-self:start;align-self:end;display:flex;gap:8px 14px;flex-wrap:wrap;} #xtalento-v3 #work .xt-client-links-label {display:none;} #xtalento-v3 #work .xt-client-links a {display:inline-flex;align-items:center;gap:9px;min-height:44px;font-size:10px;} #xtalento-v3 #work .xt-showcase-main {margin:0;align-self:stretch;width:100%;min-height:clamp(420px,34vw,610px) !important;height:100% !important;aspect-ratio:auto;border-radius:2px;} #xtalento-v3 #work .xt-project-static-nav,#xtalento-v3 #work .xt-project-mid-arrow {display:none !important;} #xtalento-v3 #work .xt-gallery-foot {display:flex;align-items:center;justify-content:space-between;gap:26px;padding:20px var(--xt-pad) 0;max-width:1800px;margin:auto;} #xtalento-v3 #work .xt-gallery-hint {font:400 9px/1.5 "IBM Plex Mono",monospace;letter-spacing:.045em;color:#a4a4a4;} #xtalento-v3 #work .xt-gallery-position {width:120px;height:2px;background:#ffffff24;flex:none;overflow:hidden;} #xtalento-v3 #work .xt-gallery-position::before {content:"";display:block;height:100%;width:var(--xt-gallery-position,20%);background:var(--xt-blue);transition:width .3s;} #xtalento-v3 #work .xt-client-history {margin-top:clamp(54px,6vw,90px);} #xtalento-v3 #services .xt-studio-services-list {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid #ffffff26;} #xtalento-v3 #services .xt-studio-service {display:flex;flex-direction:column;align-items:flex-start;gap:24px;padding:38px 34px 40px 0;min-width:0;border-bottom:1px solid #ffffff26;} #xtalento-v3 #services .xt-studio-service:nth-child(even) {padding-left:40px;padding-right:0;border-left:1px solid #ffffff26;} #xtalento-v3 #services .xt-studio-service::before {display:none;} #xtalento-v3 #services .xt-studio-service-mark {align-self:flex-start;} #xtalento-v3 #services .xt-studio-service-icon {width:clamp(74px,6.5vw,100px);height:clamp(74px,6.5vw,100px);color:var(--xt-lime);transform-origin:center;animation:none;} #xtalento-v3 #services .xt-studio-service-copy {width:100%;} #xtalento-v3 #services .xt-studio-service-copy h3 {font-size:clamp(22px,2.4vw,36px);line-height:1.2;} #xtalento-v3 #services .xt-studio-service-copy p {font-size:17px;max-width:40ch;} #xtalento-v3 #about {position:relative;z-index:120;isolation:isolate;overflow:hidden;background:#030303;border:0;} #xtalento-v3 #about > .xt-container {position:relative;z-index:auto;min-height:clamp(680px,53vw,830px);padding:clamp(66px,7vw,112px) var(--xt-pad);} #xtalento-v3 #about .xt-about-statement {position:relative;z-index:4;max-width:640px;width:56%;text-shadow:0 2px 22px #030303;} #xtalento-v3 #about .xt-about-topline {display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:42px;} #xtalento-v3 #about #xt-about-heading.xt-section-title {margin:0 0 30px !important;font-size:clamp(30px,3.8vw,61px) !important;line-height:1.12 !important;letter-spacing:-.055em !important;} #xtalento-v3 #about .xt-about-statement .xt-about-lead {margin:0 0 24px;font-size:clamp(18px,1.55vw,23px);line-height:1.6;letter-spacing:-.015em;color:#f4f6f7;max-width:44ch;} #xtalento-v3 #about .xt-about-statement > p:not(.xt-about-lead) {margin:0;font-size:17px;line-height:1.7;color:#b5b5b5;max-width:48ch;} #xtalento-v3 #about .xt-about-statement a {display:inline-flex;align-items:center;min-height:44px;gap:12px;margin-top:24px;font:400 11px/1.5 "IBM Plex Mono",monospace;letter-spacing:.04em;} @media(hover:hover) { #xtalento-v3 #work .xt-project-tab:hover {border-color:#c8ff3d88;color:var(--xt-lime);} #xtalento-v3 #work .xt-project-tab:hover img {opacity:1;filter:saturate(1);} #xtalento-v3 #work .xt-gallery-arrow:not(:disabled):hover {background:#c8ff3d1a;} #xtalento-v3 #services .xt-studio-service:hover h3 {color:#f4f6f7;} } #xtalento-v3 #work :is(.xt-project-tab,.xt-gallery-arrow):focus-visible {outline:2px solid var(--xt-lime);outline-offset:-3px;} #xtalento-v3 #work .xt-showcase-viewport:focus-visible {outline:2px solid var(--xt-blue);outline-offset:4px;} @media(max-width:1000px) { #xtalento-v3 #work .xt-showcase-card {grid-template-columns:minmax(0,1.1fr) minmax(230px,1fr);gap:20px; padding:20px;} #xtalento-v3 #work .xt-showcase-main {min-height:450px !important;} #xtalento-v3 #about .xt-about-statement {width:63%;} } @media(max-width:767px) { #xtalento-v3 #work.xt-work-showcase {padding-top:26px !important;} #xtalento-v3 #work .xt-gallery-heading {align-items:flex-start;flex-wrap:wrap;gap:14px;padding-bottom:18px;} #xtalento-v3 #work .xt-gallery-heading p {font-size:15px;} #xtalento-v3 #work .xt-gallery-tools {justify-content:space-between;width:100%;gap:12px;} #xtalento-v3 #work .xt-gallery-arrow {width:44px;height:44px;} #xtalento-v3 #work .xt-project-selector-wrap {padding-bottom:20px;} #xtalento-v3 #work .xt-project-selector {display:flex;gap:8px;} #xtalento-v3 #work .xt-project-tab {flex:0 0 108px;} #xtalento-v3 #work .xt-project-thumb {aspect-ratio:1.8/1;} #xtalento-v3 #work .xt-project-tab strong {padding:10px 7px;font-size:8px;letter-spacing:0;} #xtalento-v3 #work .xt-showcase-viewport {--xt-project-peek:22px;} #xtalento-v3 #work .xt-showcase-track {gap:10px !important;} #xtalento-v3 #work .xt-showcase-track::after {flex-basis:12px;} #xtalento-v3 #work .xt-showcase-card {grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto 1fr auto;grid-template-areas:"heading" "main" "tags" "description" "links" !important;padding:18px;gap:20px;} #xtalento-v3 #work .xt-showcase-heading {padding:0 !important;} #xtalento-v3 #work .xt-showcase-heading h2 {font-size:clamp(23px,6.8vw,39px) !important;} #xtalento-v3 #work .xt-showcase-context {margin-top:10px;gap:4px;} #xtalento-v3 #work .xt-showcase-context span {font-size:8px;} #xtalento-v3 #work .xt-showcase-main {align-self:start;min-height:0 !important;height:auto !important;aspect-ratio:4/3 !important;} #xtalento-v3 #work .xt-site-preview iframe {pointer-events:none;} #xtalento-v3 #work .xt-showcase-description p {font-size:15px;line-height:1.65;} #xtalento-v3 #work .xt-gallery-foot {padding-top:17px;gap:12px;} #xtalento-v3 #work .xt-gallery-hint {font-size:8px;max-width:29ch;} #xtalento-v3 #work .xt-gallery-position {width:70px;} #xtalento-v3 #services .xt-studio-services-list {grid-template-columns:minmax(0,1fr);} #xtalento-v3 #services .xt-studio-service,#xtalento-v3 #services .xt-studio-service:nth-child(even) {padding:30px 0 34px;border-left:0;gap:20px;} #xtalento-v3 #services .xt-studio-service-icon {width:76px;height:76px;} #xtalento-v3 #services .xt-studio-service-copy h3 {font-size:clamp(23px,6vw,34px);} #xtalento-v3 #services .xt-studio-service-copy p {font-size:16px;} #xtalento-v3 #about > .xt-container {min-height:650px;padding-top:64px;padding-bottom:64px;} #xtalento-v3 #about .xt-about-statement {width:100%;max-width:520px;} #xtalento-v3 #about .xt-about-topline {margin-bottom:38px;} #xtalento-v3 #about #xt-about-heading.xt-section-title {font-size:clamp(25px,6.8vw,43px) !important;margin-bottom:26px !important;} #xtalento-v3 #about .xt-about-statement .xt-about-lead {font-size:19px;line-height:1.6;max-width:32ch;} #xtalento-v3 #about .xt-about-statement > p:not(.xt-about-lead) {font-size:15px;line-height:1.75;max-width:39ch;} } @media(prefers-reduced-motion:reduce) { #xtalento-v3 #work :is(.xt-showcase-viewport,.xt-project-selector) {scroll-behavior:auto;} #xtalento-v3 #work .xt-gallery-position::before {transition:none;} } #xtalento-v3 .xt-selected-hint {margin:16px 0 0;font:400 9px/1.5 "IBM Plex Mono",monospace;letter-spacing:.045em;color:#b5b5b5;} #xtalento-v3 #work .xt-gallery-heading {justify-content:flex-end;padding-bottom:18px;} #xtalento-v3 #work .xt-gallery-tools {justify-content:space-between;width:100%;} #xtalento-v3 #work .xt-gallery-foot {justify-content:flex-end;padding-top:14px;} #xtalento-v3 #services .xt-studio-service {gap:18px;} #xtalento-v3 #services .xt-studio-service-icon {width:clamp(54px,4.7vw,68px);height:clamp(54px,4.7vw,68px);color:var(--xt-lime) !important;animation:none !important;transform:none !important;opacity:1;} #xtalento-v3 #services .xt-studio-service-icon :is(path,rect,circle,line,polyline,polygon,ellipse) {stroke-dasharray:1 1;stroke-dashoffset:0;} #xtalento-v3.xt-page-visible #services .xt-studio-service.is-motion-visible .xt-studio-service-icon :is(path,rect,circle,line,polyline,polygon,ellipse) {animation:xtServiceDraw 7.2s cubic-bezier(.45,0,.3,1) infinite;animation-delay:var(--xt-stroke-delay,0s);} @keyframes xtServiceDraw {0%,6% {stroke-dashoffset:1;}42%,76% {stroke-dashoffset:0;}94%,100% {stroke-dashoffset:-1;}} #xtalento-v3 #services .xt-services-contact {position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(32px,5vw,80px);margin-top:clamp(44px,6vw,84px);padding:clamp(28px,4vw,60px);border:1px solid #14bff240;border-radius:4px;background:radial-gradient(ellipse at 100% 0%,#14bff20b,transparent 65%),#080b0c;overflow:hidden;} #xtalento-v3 #services .xt-services-contact::before {content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:linear-gradient(transparent,#14bff2,transparent);opacity:.65;} #xtalento-v3 #services .xt-services-contact-label {margin-bottom:22px;color:var(--xt-blue);} #xtalento-v3 #services .xt-services-contact h3 {font-size:clamp(31px,3.5vw,56px);margin-bottom:24px;} #xtalento-v3 #services .xt-services-contact .xt-contact-intro {font-size:17px;line-height:1.65;max-width:36ch;} #xtalento-v3 #services .xt-contact-start {min-width:0;} #xtalento-v3 #services .xt-contact-paths {display:flex;flex-wrap:wrap;gap:8px;} #xtalento-v3 #services .xt-contact-route {display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:10px 12px;border:1px solid #c8ff3d55;border-radius:3px;background:transparent;color:var(--xt-lime);font:500 10px/1.4 "IBM Plex Mono",monospace;letter-spacing:.025em;text-align:left;cursor:pointer;transition:background .2s,border-color .2s;} #xtalento-v3 #services .xt-contact-route svg {width:17px;height:17px;flex:none;} #xtalento-v3 #services .xt-contact-route.is-active {background:var(--xt-lime);border-color:var(--xt-lime);color:#030303;} #xtalento-v3 #services .xt-services-contact [data-contact-description] {min-height:6.6em;margin:22px 0;font-size:16px;line-height:1.65;color:#b5b5b5;max-width:44ch;} #xtalento-v3 #services .xt-services-contact-actions {display:flex;flex-direction:row;align-items:center;gap:12px 22px;flex-wrap:wrap;} #xtalento-v3 #services .xt-services-contact .xt-contact-button {min-height:58px;padding:0 22px;gap:36px;} #xtalento-v3 #services .xt-contact-route:focus-visible {outline:2px solid var(--xt-lime);outline-offset:4px;} @media(hover:hover) {#xtalento-v3 #services .xt-contact-route:not(.is-active):hover {background:#c8ff3d0e;border-color:var(--xt-lime);}} @media(max-width:1000px) {#xtalento-v3 #services .xt-services-contact {grid-template-columns:minmax(0,1fr);gap:28px;}} @media(max-width:767px) { #xtalento-v3 #work .xt-gallery-heading {padding-bottom:16px;} #xtalento-v3 #services .xt-studio-service-icon {width:50px;height:50px;} #xtalento-v3 #services .xt-studio-service,#xtalento-v3 #services .xt-studio-service:nth-child(even) {gap:17px;} #xtalento-v3 #services .xt-services-contact {margin-top:38px;padding:26px 20px;gap:28px;} #xtalento-v3 #services .xt-services-contact h3 {font-size:clamp(29px,7.4vw,41px);} #xtalento-v3 #services .xt-services-contact .xt-contact-intro {font-size:16px;} #xtalento-v3 #services .xt-contact-paths {flex-direction:column;gap:8px;} #xtalento-v3 #services .xt-contact-route {width:100%;padding:12px 14px;} #xtalento-v3 #services .xt-services-contact [data-contact-description] {min-height:8.25em;font-size:15px;} #xtalento-v3 #services .xt-services-contact .xt-contact-button {justify-content:space-between;width:100%;} #xtalento-v3 #services .xt-services-contact-actions {flex-direction:column;align-items:stretch;gap:8px;} #xtalento-v3 #services .xt-contact-email {align-self:flex-start;} } @media(prefers-reduced-motion:reduce) { #xtalento-v3 #services .xt-studio-service-icon :is(path,rect,circle,line,polyline,polygon,ellipse) {animation:none !important;stroke-dashoffset:0 !important;} #xtalento-v3 #services .xt-contact-route {transition:none;} } #xtalento-v3 .xt-background-field {position:absolute;inset:0;z-index:119;overflow:hidden;pointer-events:none;} #xtalento-v3 .xt-background-x {position:absolute;left:0;width:100%;height:0;overflow:hidden;opacity:.65;pointer-events:none;mask-image:linear-gradient(180deg,transparent,#000 10%,#000 88%,transparent);-webkit-mask-image:linear-gradient(180deg,transparent,#000 10%,#000 88%,transparent);} #xtalento-v3 .xt-background-canvas,#xtalento-v3 .xt-background-fallback {position:absolute;inset:0;width:100%;height:100%;display:block;} #xtalento-v3 .xt-background-fallback {opacity:.4;} #xtalento-v3 .is-background-ready .xt-background-fallback {visibility:hidden;} #xtalento-v3 #work.xt-work-showcase,#xtalento-v3 #services.xt-services-studio,#xtalento-v3 #about.xt-about-studio,#xtalento-v3 #lab {position:relative;z-index:120;background:transparent !important;border-top:0 !important;border-bottom:0 !important;} #xtalento-v3 #work .xt-client-history {background:transparent;border-top:0;} #xtalento-v3 .xt-footer {border-top:0;} #xtalento-v3 #services .xt-studio-services-list {border-top:0;} #xtalento-v3 #services .xt-studio-service {border-bottom:0;} #xtalento-v3 #services .xt-studio-service:nth-child(even) {border-left:0;} #xtalento-v3 :is(.xt-client-history,#services,#about,#lab) :is(h2,h3,p) {text-shadow:0 2px 16px #030303,0 0 5px #030303;} #xtalento-v3 #about > .xt-container {min-height:0 !important;padding-top:clamp(70px,7vw,108px);padding-bottom:clamp(70px,7vw,108px);} #xtalento-v3 #about .xt-about-statement {width:76%;max-width:980px;} #xtalento-v3 #about .xt-about-lead {max-width:56ch;} #xtalento-v3 #about .xt-about-statement > p:not(.xt-about-lead) {max-width:65ch;} @media(max-width:767px) { #xtalento-v3 .xt-background-x {opacity:.62;} #xtalento-v3 #about > .xt-container {padding-top:64px;padding-bottom:64px;} #xtalento-v3 #about .xt-about-statement {width:100%;max-width:none;} } @font-face {font-family:'XTalento Reference Tag';src:url('xt-reference-tag-f.woff') format('woff');font-weight:400;font-style:normal;font-display:block;unicode-range:U+0046;} #xtalento-v3 .xt-talent-tag::before,#xtalento-v3 .xt-talent-tag::after {content:attr(data-text);} #xtalento-v3 .xt-languages a,#xtalento-v3 .xt-mobile-languages a {text-decoration:none;} @media(max-width:767px) { #xtalento-v3:is([data-xt-lang="de"],[data-xt-lang="en"]) #about #xt-about-heading.xt-section-title {font-size:clamp(23px,6.2vw,43px) !important;} #xtalento-v3[data-xt-lang="de"] .xt-contact-route {letter-spacing:0;} } #xtalento-v3 { --xt-section-title-size:clamp(28px,calc(6px + 3.4vw),56px); --xt-section-label-gap:20px; --xt-section-content-gap:24px; } #xtalento-v3 :is(#work,#services,#about,#lab,#contact) {scroll-margin-top:82px;} @media(min-width:1101px) { #xtalento-v3 .xt-header.is-compact {grid-template-columns:auto minmax(0,1fr) auto !important;grid-template-areas:"logo nav right" !important;gap:clamp(18px,2.2vw,32px) !important;} #xtalento-v3 .xt-header.is-compact .xt-nav {display:flex !important;grid-area:nav !important;justify-self:center;align-items:center;gap:clamp(14px,1.7vw,26px) !important;min-width:0;} #xtalento-v3 .xt-header.is-compact .xt-nav a {display:inline-flex;align-items:center;min-height:44px;font-size:11px !important;white-space:nowrap;} #xtalento-v3 .xt-header.is-compact .xt-header-right {gap:18px !important;} #xtalento-v3 .xt-header.is-compact .xt-header-links {display:flex !important;gap:14px;} #xtalento-v3 .xt-header.is-compact .xt-header-links a {display:inline-flex !important;align-items:center;min-height:44px;font-size:11px !important;} #xtalento-v3 .xt-header.is-compact .xt-languages {display:flex !important;align-items:center;gap:2px !important;} #xtalento-v3 .xt-header.is-compact .xt-languages :is(a,span) {display:inline-flex !important;align-items:center;justify-content:center;min-width:28px;min-height:44px;} #xtalento-v3 .xt-header.is-compact .xt-menu-trigger {display:none !important;} } .xt-mobile-menu {padding:72px max(20px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));overflow-y:auto;overscroll-behavior:contain;justify-content:flex-start;} .xt-mobile-menu .xt-menu-close {top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));display:inline-flex;align-items:center;justify-content:center;min-width:88px;min-height:44px;padding:0 12px;line-height:1.4;} .xt-mobile-menu nav {flex-shrink:0;margin:auto 0;} .xt-mobile-menu nav a {display:flex;align-items:center;min-height:44px;padding:10px 0;font-size:clamp(28px,5.4vw,64px);line-height:1.1;overflow-wrap:normal;} .xt-mobile-menu .xt-mobile-languages {position:static;flex-shrink:0;align-self:flex-start;gap:4px;margin-top:24px;} .xt-mobile-menu .xt-mobile-languages :is(a,span) {display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;} .xt-mobile-menu :is(.xt-menu-close,nav a,.xt-mobile-languages a):focus-visible {outline:2px solid var(--xt-blue);outline-offset:4px;} #xtalento-v3[data-xt-lang] #about #xt-about-heading.xt-section-title {font-size:var(--xt-section-title-size) !important;margin-bottom:24px !important;} #xtalento-v3 #services .xt-studio-service-copy h3 {font-size:clamp(22px,calc(12px + 1.5vw),36px);line-height:1.2;} #xtalento-v3 #work .xt-showcase-heading h2 {font-size:clamp(22px,calc(14px + 1.35vw),34px) !important;} #xtalento-v3 #lab .xt-lab-v2-group h3 {font-size:clamp(24px,calc(18px + 1vw),33px);} #xtalento-v3 #lab .xt-lab-project-name {font-size:clamp(22px,calc(14px + 1vw),29px);} #xtalento-v3 #work .xt-project-tab strong {font-size:11px;line-height:1.4;} #xtalento-v3 #work .xt-showcase-context span {font-size:10px;line-height:1.5;} #xtalento-v3 #work .xt-showcase-tags .xt-showcase-tags-label {font-size:11px;} #xtalento-v3 #work .xt-showcase-tags span:not(.xt-showcase-tags-label) {min-height:30px;font-size:11px;} #xtalento-v3 #services .xt-studio-service-tags span {min-height:31px;font-size:11px;line-height:1.5;} #xtalento-v3 #work .xt-client-links a {font-size:11px;} #xtalento-v3 #lab .xt-lab-steps {height:17px;margin-top:4px;} #xtalento-v3 #lab .xt-lab-step {font-size:10px;letter-spacing:0;} #xtalento-v3 #lab .xt-lab-access {min-height:44px;font-size:10px;} #xtalento-v3 #lab .xt-lab-v2-category {font-size:10px;} #xtalento-v3 #lab .xt-lab-details-label {font-size:11px;line-height:1.4;} #xtalento-v3 #services .xt-contact-paths {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;} #xtalento-v3 #services .xt-contact-route {min-width:0;min-height:60px;font-size:11px;padding:10px;gap:8px;letter-spacing:0;} #xtalento-v3 #services .xt-contact-route span {min-width:0;overflow-wrap:anywhere;} #xtalento-v3 #services .xt-contact-description-stack {display:grid;grid-template-areas:"description";max-width:44ch;margin:18px 0 20px;font-size:16px;line-height:1.65;} #xtalento-v3 #services .xt-services-contact .xt-contact-description-stack > p {grid-area:description;min-width:0;min-height:0;max-width:none;margin:0;font-size:inherit;line-height:inherit;} #xtalento-v3 #services .xt-contact-description-stack > .xt-contact-description-measure {visibility:hidden;pointer-events:none;user-select:none;} #xtalento-v3 #services .xt-services-contact-label {margin-bottom:18px;} #xtalento-v3 #services .xt-services-contact h3 {font-size:clamp(28px,calc(15px + 2.4vw),56px);margin-bottom:20px;} #xtalento-v3 #services.xt-services-studio > .xt-container {padding-top:clamp(60px,5vw,80px);padding-bottom:clamp(44px,4vw,56px);} #xtalento-v3 #about > .xt-container {padding-top:clamp(48px,4.7vw,64px);padding-bottom:clamp(44px,4vw,56px);} #xtalento-v3 #about .xt-about-statement {width:100%;max-width:800px;} #xtalento-v3 #about .xt-about-topline {justify-content:flex-start;flex-wrap:wrap;gap:12px 32px;margin-bottom:22px;} #xtalento-v3 #about .xt-about-statement .xt-about-lead {font-size:clamp(18px,calc(15px + .45vw),22px);max-width:720px;line-height:1.6;} #xtalento-v3 #about .xt-about-statement > p:not(.xt-about-lead) {max-width:720px;line-height:1.65;} #xtalento-v3 #lab {padding-top:clamp(40px,4vw,56px);padding-bottom:40px;} #xtalento-v3 .xt-footer > .xt-container {padding-top:clamp(48px,4vw,64px);} #xtalento-v3 .xt-footer-contact {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.75fr);align-items:end;gap:32px;padding-bottom:32px;} #xtalento-v3 .xt-footer-direct {display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0;} #xtalento-v3 .xt-footer-email {margin-top:0;font-size:clamp(20px,2vw,29px);} #xtalento-v3 .xt-footer-instagram {font-size:12px;} #xtalento-v3 .xt-client-mark img {opacity:.7;} #xtalento-v3 .xt-client-mark :is(.xt-client-logo-forst,.xt-client-logo-gains) {max-width:min(78%,225px) !important;} #xtalento-v3 .xt-client-mark .xt-client-logo-hama {max-width:min(67%,185px) !important;} #xtalento-v3 .xt-client-mark .xt-client-logo-golden {max-width:min(64%,190px) !important;} @media(hover:hover) {#xtalento-v3 .xt-client-mark:hover img {opacity:.94;}} body:has(#xtalento-v3) #ast-scroll-top {width:44px;height:44px;line-height:44px;right:max(16px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));background:var(--xt-blue,#14bff2);border-radius:3px;} @media(max-width:767px) { #xtalento-v3 :is(#work,#services,#about,#lab,#contact) {scroll-margin-top:76px;} #xtalento-v3 .xt-header:not(.is-compact) .xt-languages :is(a,span) {height:44px !important;} #xtalento-v3 #work .xt-project-tab {flex-basis:116px;} #xtalento-v3 #work .xt-project-tab strong {font-size:10px;padding:9px 7px;} #xtalento-v3 #work .xt-project-selector-wrap {padding-bottom:16px;} #xtalento-v3 #work .xt-showcase-context {gap:3px;} #xtalento-v3 #work .xt-showcase-description p {font-size:16px;line-height:1.6;} #xtalento-v3 #services .xt-studio-service-tags span {font-size:10px;} #xtalento-v3 #lab .xt-lab-v2-header > p {font-size:16px;line-height:1.6;} #xtalento-v3 #lab .xt-lab-v2-group-header > p {font-size:14px;line-height:1.6;} #xtalento-v3 #lab .xt-lab-v2-status {display:grid;grid-template-columns:minmax(0,1fr);} #xtalento-v3 #lab .xt-lab-state-label {grid-row:1;margin-bottom:12px;} #xtalento-v3 #lab .xt-lab-progress-row {display:contents;} #xtalento-v3 #lab .xt-lab-progress {grid-row:2;width:100%;} #xtalento-v3 #lab .xt-lab-steps {grid-row:3;width:100%;margin-top:9px;} #xtalento-v3 #lab .xt-lab-access {grid-row:4;justify-self:end;margin-top:8px;} #xtalento-v3 #lab .xt-lab-details {margin-top:10px;} #xtalento-v3 #lab .xt-lab-v2-description {font-size:16px;line-height:1.6;} #xtalento-v3 #services .xt-contact-paths {grid-template-columns:minmax(0,1fr);} #xtalento-v3 #services .xt-contact-route {min-height:48px;padding:12px 14px;} #xtalento-v3 #services .xt-services-contact {gap:24px;} #xtalento-v3 #services.xt-services-studio > .xt-container {padding-top:48px;padding-bottom:32px;} #xtalento-v3 #about > .xt-container {padding-top:40px;padding-bottom:32px;} #xtalento-v3 #about .xt-about-statement > p:not(.xt-about-lead) {font-size:16px;line-height:1.65;} #xtalento-v3 #lab {padding-top:40px;padding-bottom:32px;} #xtalento-v3 .xt-footer-contact {grid-template-columns:minmax(0,1fr);gap:20px;} #xtalento-v3 .xt-footer-direct {gap:4px;} #xtalento-v3 .xt-footer-email {font-size:clamp(20px,5.4vw,26px);overflow-wrap:anywhere;} } #xtalento-v3 #work.xt-work-showcase {padding-top:48px !important;} #xtalento-v3 #work .xt-work-intro {position:relative;inset:auto;width:auto !important;max-width:1800px;margin:0 auto 28px;padding:0 var(--xt-pad);opacity:1;visibility:visible;transform:none;pointer-events:auto;will-change:auto;} #xtalento-v3 #work .xt-work-intro::before {content:none !important;display:none;} #xtalento-v3 #work .xt-work-intro .xt-selected-footer {display:block;margin-top:0 !important;} #xtalento-v3 #work .xt-gallery-navigation {padding-top:24px;} #xtalento-v3 #work .xt-gallery-navigation .xt-project-selector-wrap {padding-bottom:14px;} #xtalento-v3 #work .xt-gallery-navigation .xt-gallery-heading {padding-bottom:0;} #xtalento-v3 #work .xt-gallery-navigation .xt-gallery-foot {padding-top:12px;} #xtalento-v3 #work [data-project-status] {font-size:11px;} @media(max-width:767px) { #xtalento-v3 #work.xt-work-showcase {padding-top:36px !important;} #xtalento-v3 #work .xt-work-intro {margin-bottom:24px;} #xtalento-v3 #work .xt-gallery-navigation {padding-top:20px;} } #xtalento-v3 #work .xt-work-intro {margin-bottom:64px;} @media(max-width:767px) { #xtalento-v3 #work .xt-work-intro {margin-bottom:48px;} } #xtalento-v3 #lab details.xt-lab-v2-group { display:block;margin:0 0 18px;padding:0;border:1px solid #3b3b3b; border-top:2px solid #c8ff3d66;background:linear-gradient(145deg,#c8ff3d05,#ffffff02 70%); } #xtalento-v3 #lab details.xt-lab-v2-group > summary.xt-lab-v2-group-header { display:grid;grid-template-columns:minmax(205px,.9fr) minmax(0,1.7fr) max-content 44px; align-items:center;gap:24px;margin:0;padding:24px;border:0;list-style:none; cursor:pointer;-webkit-tap-highlight-color:transparent; } #xtalento-v3 #lab details.xt-lab-v2-group > summary::-webkit-details-marker {display:none;} #xtalento-v3 #lab details.xt-lab-v2-group > summary::marker {content:"";} #xtalento-v3 #lab .xt-lab-group-title { display:block;min-width:0;font:500 clamp(24px,calc(18px + 1vw),33px)/1.2 "Unbounded",sans-serif; letter-spacing:-.055em;color:#fff; } #xtalento-v3 #lab .xt-lab-group-title > span {color:var(--xt-lime);} #xtalento-v3 #lab .xt-lab-group-description { display:block;min-width:0;font:400 15px/1.6 "Bricolage Grotesque",sans-serif;color:#b5b5b5; } #xtalento-v3 #lab .xt-lab-group-count { display:inline-flex;align-items:baseline;gap:8px;white-space:nowrap; font:400 10px/1.5 "IBM Plex Mono",monospace;letter-spacing:.04em;color:#a4a4a4; } #xtalento-v3 #lab .xt-lab-group-count strong { font:500 13px/1.5 "IBM Plex Mono",monospace;letter-spacing:0;font-variant-numeric:tabular-nums;color:var(--xt-lime); } #xtalento-v3 #lab .xt-lab-group-icon { display:grid;place-items:center;width:44px;height:44px;border:1px solid #c8ff3d55; border-radius:3px;color:var(--xt-lime);transition:background .2s,border-color .2s; } #xtalento-v3 #lab .xt-lab-group-icon svg {width:22px;height:22px;} #xtalento-v3 #lab .xt-lab-group-icon-vertical {opacity:1;transition:opacity .2s;} #xtalento-v3 #lab details.xt-lab-v2-group[open] > summary .xt-lab-group-icon-vertical {opacity:0;} #xtalento-v3 #lab details.xt-lab-v2-group > summary:focus-visible {outline:2px solid var(--xt-lime);outline-offset:4px;} #xtalento-v3 #lab details.xt-lab-v2-group > .xt-lab-v2-projects { margin:0 24px;padding:24px 0;border-left:0;border-top:1px solid #ffffff26; } #xtalento-v3 #lab details.xt-lab-v2-group:not([open]) > .xt-lab-v2-projects {display:none;} @media(hover:hover) { #xtalento-v3 #lab details.xt-lab-v2-group > summary:hover .xt-lab-group-icon {background:#c8ff3d12;border-color:var(--xt-lime);} } @media(max-width:1100px) { #xtalento-v3 #lab details.xt-lab-v2-group > summary.xt-lab-v2-group-header {grid-template-columns:minmax(0,1fr) max-content 44px;gap:12px 20px;} #xtalento-v3 #lab .xt-lab-group-title {grid-column:1;grid-row:1;} #xtalento-v3 #lab .xt-lab-group-count {grid-column:2;grid-row:1;} #xtalento-v3 #lab .xt-lab-group-icon {grid-column:3;grid-row:1;} #xtalento-v3 #lab .xt-lab-group-description {grid-column:1 / -1;grid-row:2;} } @media(max-width:767px) { #xtalento-v3 #lab details.xt-lab-v2-group {margin-bottom:16px;} #xtalento-v3 #lab details.xt-lab-v2-group > summary.xt-lab-v2-group-header {grid-template-columns:minmax(0,1fr) 44px;padding:18px 16px;gap:10px 14px;} #xtalento-v3 #lab .xt-lab-group-title {grid-column:1;grid-row:1;} #xtalento-v3 #lab .xt-lab-group-icon {grid-column:2;grid-row:1;} #xtalento-v3 #lab .xt-lab-group-description {grid-column:1 / -1;grid-row:2;font-size:14px;} #xtalento-v3 #lab .xt-lab-group-count {grid-column:1 / -1;grid-row:3;margin-top:4px;} #xtalento-v3 #lab details.xt-lab-v2-group > .xt-lab-v2-projects {margin:0 16px;padding:20px 0;} #xtalento-v3[data-xt-lang="de"] .xt-h1-a {font-size:.85em !important;} } @media(max-width:360px) { #xtalento-v3 #lab details.xt-lab-v2-group > summary.xt-lab-v2-group-header {padding-left:12px;padding-right:12px;} #xtalento-v3 #lab details.xt-lab-v2-group > .xt-lab-v2-projects {margin-left:12px;margin-right:12px;} } @media(prefers-reduced-motion:reduce) { #xtalento-v3 #lab .xt-lab-group-icon,#xtalento-v3 #lab .xt-lab-group-icon-vertical {transition:none;} }