{"id":10598,"date":"2026-05-21T19:55:40","date_gmt":"2026-05-21T17:55:40","guid":{"rendered":"https:\/\/www.yuliyapivnyak.it\/en\/?page_id=10598"},"modified":"2026-09-10T21:40:59","modified_gmt":"2026-09-10T19:40:59","slug":"home-2","status":"publish","type":"page","link":"https:\/\/www.yuliyapivnyak.it\/en\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"10598\" class=\"elementor elementor-10598\" data-elementor-post-type=\"page\">\n\t\t\t\t<main class=\"elementor-element elementor-element-e2e3d19 e-con-full e-flex e-con e-parent\" data-id=\"e2e3d19\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1eb0492 elementor-widget__width-initial elementor-widget elementor-widget-html\" data-id=\"1eb0492\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div\n  class=\"yu-kinetic-title\"\n  id=\"yuKineticTitle\"\n  aria-label=\"A WEBSITE IS NOT DESIGN\"\n>\n\n  <div class=\"yu-kinetic-title__line\">\n\n    <span class=\"yu-kinetic-piece yu-kinetic-piece--01\">\n      <span class=\"yu-kinetic-piece__text\">A WEBSITE<\/span>\n    <\/span>\n\n    <span class=\"yu-kinetic-space\">&nbsp;<\/span>\n\n    <span class=\"yu-kinetic-piece yu-kinetic-piece--02\">\n      <span class=\"yu-kinetic-piece__text\">IS NOT<\/span>\n    <\/span>\n\n    <span class=\"yu-kinetic-space\">&nbsp;<\/span>\n\n    <span class=\"yu-kinetic-piece yu-kinetic-piece--03\">\n      <span class=\"yu-kinetic-piece__text\">DESIGN<\/span>\n    <\/span>\n\n  <\/div>\n\n<\/div>\n\n\n<style>\n\n\/* =========================================================\n   YU.DESIGN\n   GRAVITY TYPE\n   EN VERSION\n========================================================= *\/\n\n.yu-kinetic-title{\n\n  --orange:#EA6B3A;\n  --blue:#405FD7;\n  --black:#111111;\n\n  position:relative;\n\n  width:100%;\n  max-width:100%;\n\n  min-height:185px;\n\n  display:flex;\n  align-items:center;\n  justify-content:center;\n\n  padding:0 12px;\n\n  box-sizing:border-box;\n\n  overflow:visible;\n\n  isolation:isolate;\n}\n\n\n\/* =========================================================\n   MAIN TITLE\n========================================================= *\/\n\n.yu-kinetic-title__line{\n\n  position:relative;\n  z-index:5;\n\n  display:flex;\n\n  align-items:center;\n  justify-content:center;\n\n  width:max-content;\n  max-width:100%;\n\n  font-family:\n    Inter,\n    Arial,\n    sans-serif;\n\n  \/*\n     EN is longer than the Italian title.\n     Fluid sizing prevents A WEBSITE IS NOT DESIGN\n     from overflowing while preserving the original scale.\n  *\/\n  font-size:clamp(72px,7vw,135px);\n\n  font-weight:900;\n\n  line-height:.8em;\n\n  letter-spacing:clamp(-7px,-.36vw,-4px);\n\n  text-transform:uppercase;\n\n  white-space:nowrap;\n\n  color:var(--orange);\n}\n\n\n\/* =========================================================\n   SPACING\n========================================================= *\/\n\n.yu-kinetic-space{\n\n  display:inline-block;\n\n  width:.21em;\n\n  flex:0 0 auto;\n}\n\n\n\/* =========================================================\n   WORDS\n========================================================= *\/\n\n.yu-kinetic-piece{\n\n  position:relative;\n\n  display:inline-block;\n\n  flex:0 0 auto;\n\n  opacity:1;\n}\n\n\n.yu-kinetic-piece__text{\n\n  position:relative;\n\n  z-index:3;\n\n  display:inline-block;\n\n  color:var(--orange);\n\n  opacity:1;\n\n  transform:none;\n}\n\n\n\/* =========================================================\n   GRAVITY PER LETTERA\n========================================================= *\/\n\n.yu-gravity-char{\n\n  display:inline-block;\n\n  position:relative;\n\n  color:inherit;\n\n  font:inherit;\n\n  letter-spacing:inherit;\n\n  line-height:inherit;\n\n  transform:translate3d(0,0,0) rotate(0deg);\n\n  transform-origin:50% 72%;\n\n  will-change:transform;\n}\n\n\n.yu-gravity-char--space{\n\n  width:.22em;\n\n  letter-spacing:0;\n}\n\n\n\/* =========================================================\n   NO CLIPPING\n========================================================= *\/\n\n.yu-kinetic-title,\n.yu-kinetic-title__line,\n.yu-kinetic-piece,\n.yu-kinetic-piece__text{\n  overflow:visible !important;\n}\n\n.yu-kinetic-title{\n  z-index:20;\n}\n\n.yu-gravity-char{\n  z-index:2;\n}\n\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media(max-width:1024px){\n\n  .yu-kinetic-title{\n\n    min-height:130px;\n\n    padding:0 14px;\n  }\n\n\n  .yu-kinetic-title__line{\n\n    font-size:\n      clamp(\n        45px,\n        7.2vw,\n        74px\n      );\n\n    letter-spacing:\n      clamp(\n        -4px,\n        -.38vw,\n        -2.5px\n      );\n  }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media(max-width:767px){\n\n  .yu-kinetic-title{\n\n    min-height:94px;\n\n    padding:0 8px;\n  }\n\n\n  .yu-kinetic-title__line{\n\n    font-size:\n      clamp(\n        21px,\n        6.25vw,\n        42px\n      );\n\n    line-height:.8em;\n\n    letter-spacing:\n      clamp(\n        -2.2px,\n        -.4vw,\n        -1.15px\n      );\n\n    max-width:100%;\n  }\n\n\n  .yu-kinetic-space{\n\n    width:.14em;\n  }\n\n}\n\n\n\/* =========================================================\n   SMALL MOBILE\n========================================================= *\/\n\n@media(max-width:390px){\n\n  .yu-kinetic-title{\n\n    min-height:78px;\n\n    padding:0 6px;\n  }\n\n\n  .yu-kinetic-title__line{\n\n    font-size:\n      clamp(\n        19px,\n        5.85vw,\n        25px\n      );\n\n    letter-spacing:-1.15px;\n  }\n\n}\n\n\n\/* =========================================================\n   ACCESSIBILITY\n========================================================= *\/\n\n@media(prefers-reduced-motion:reduce){\n\n  .yu-gravity-char{\n\n    transform:none !important;\n  }\n\n}\n\n<\/style>\n\n\n<script>\n\n(function(){\n\n  const title =\n    document.getElementById(\n      'yuKineticTitle'\n    );\n\n\n  if(!title){\n    return;\n  }\n\n\n  \/*\n     Trasforma il testo esistente\n     in lettere singole.\n  *\/\n\n  const textNodes =\n    title.querySelectorAll(\n      '.yu-kinetic-piece__text'\n    );\n\n\n  textNodes.forEach(\n    function(node){\n\n      const text =\n        node.textContent;\n\n      node.textContent = '';\n\n\n      Array.from(text).forEach(\n        function(char){\n\n          const span =\n            document.createElement('span');\n\n          span.className =\n            char === ' '\n              ? 'yu-gravity-char yu-gravity-char--space'\n              : 'yu-gravity-char';\n\n          span.textContent =\n            char === ' '\n              ? '\\u00A0'\n              : char;\n\n          node.appendChild(span);\n\n        }\n      );\n\n    }\n  );\n\n\n  const chars =\n    Array.from(\n      title.querySelectorAll(\n        '.yu-gravity-char:not(.yu-gravity-char--space)'\n      )\n    );\n\n\n  if(!chars.length){\n    return;\n  }\n\n\n  if(\n    window.matchMedia(\n      '(prefers-reduced-motion: reduce)'\n    ).matches\n  ){\n    return;\n  }\n\n\n  const finePointer =\n    window.matchMedia(\n      '(hover:hover) and (pointer:fine)'\n    ).matches;\n\n\n  if(!finePointer){\n    return;\n  }\n\n\n  const state =\n    chars.map(\n      function(_,i){\n\n        return {\n\n          x:0,\n          y:0,\n          r:0,\n\n          vx:0,\n          vy:0,\n          vr:0,\n\n          mass:\n            .68 +\n            (((i * 37) % 100) \/ 100) * .82\n\n        };\n\n      }\n    );\n\n\n  let mouseX = 0;\n  let mouseY = 0;\n\n  let smoothX = 0;\n  let smoothY = 0;\n\n  let hasPointer = false;\n  let active = false;\n\n\n  function updatePointer(event){\n\n    mouseX =\n      event.clientX;\n\n    mouseY =\n      event.clientY;\n\n    if(!hasPointer){\n\n      smoothX = mouseX;\n      smoothY = mouseY;\n\n      hasPointer = true;\n    }\n\n\n    const rect =\n      title.getBoundingClientRect();\n\n\n    active =\n\n      mouseX >\n      rect.left - 90\n\n      &&\n\n      mouseX <\n      rect.right + 90\n\n      &&\n\n      mouseY >\n      rect.top - 100\n\n      &&\n\n      mouseY <\n      rect.bottom + 160;\n\n  }\n\n\n  window.addEventListener(\n    'pointermove',\n    updatePointer,\n    {passive:true}\n  );\n\n\n  window.addEventListener(\n    'pointerleave',\n    function(){\n\n      active = false;\n\n    }\n  );\n\n\n  function animate(){\n\n    if(hasPointer){\n\n      smoothX +=\n        (mouseX - smoothX) * .16;\n\n      smoothY +=\n        (mouseY - smoothY) * .16;\n\n    }\n\n\n    chars.forEach(\n      function(char,index){\n\n        const rect =\n          char.getBoundingClientRect();\n\n        const centerX =\n          rect.left +\n          rect.width \/ 2;\n\n        const centerY =\n          rect.top +\n          rect.height \/ 2;\n\n\n        const dx =\n          smoothX - centerX;\n\n        const dy =\n          smoothY - centerY;\n\n\n        const distance =\n          Math.max(\n            1,\n            Math.hypot(dx,dy)\n          );\n\n\n        const fontSize =\n          parseFloat(\n            getComputedStyle(char).fontSize\n          ) || 135;\n\n\n        const radius =\n          Math.max(\n            150,\n            fontSize * 2.9\n          );\n\n\n        let targetX = 0;\n        let targetY = 0;\n        let targetR = 0;\n\n\n        if(active){\n\n          const influence =\n            Math.max(\n              0,\n              1 - distance \/ radius\n            );\n\n\n          const directionX =\n            smoothX > centerX\n              ? 1\n              : -1;\n\n\n          const mass =\n            state[index].mass;\n\n\n          targetY =\n            influence *\n            fontSize *\n            .62 *\n            mass;\n\n\n          targetX =\n            influence *\n            directionX *\n            fontSize *\n            .075 *\n            mass;\n\n\n          targetR =\n            influence *\n            directionX *\n            (4 + mass * 7);\n\n        }\n\n\n        const item =\n          state[index];\n\n\n        item.vx +=\n          (targetX - item.x) * .055;\n\n        item.vy +=\n          (targetY - item.y) * .055;\n\n        item.vr +=\n          (targetR - item.r) * .045;\n\n\n        item.vx *= .78;\n        item.vy *= .78;\n        item.vr *= .76;\n\n\n        item.x += item.vx;\n        item.y += item.vy;\n        item.r += item.vr;\n\n\n        char.style.transform =\n          'translate3d(' +\n          item.x.toFixed(2) + 'px,' +\n          item.y.toFixed(2) + 'px,0) ' +\n          'rotate(' +\n          item.r.toFixed(2) +\n          'deg)';\n\n      }\n    );\n\n\n    requestAnimationFrame(\n      animate\n    );\n\n  }\n\n\n  animate();\n\n})();\n\n<\/script>\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ee39b82 e-con-full e-flex e-con e-child\" data-id=\"ee39b82\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5af2961 elementor-widget__width-initial elementor-widget-mobile__width-initial elementor-widget-tablet__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"5af2961\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>It either makes your value clear \u2014 or it doesn&#8217;t work.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5b47442 elementor-widget__width-initial elementor-widget-mobile__width-initial elementor-widget-tablet__width-initial elementor-widget elementor-widget-heading\" data-id=\"5b47442\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<p class=\"elementor-heading-title elementor-size-default\">I DESIGN WEBSITES\nTHAT MAKE IT CLEAR\nWHY YOU\u2019RE THE CHOICE.<\/p>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ef2b156 elementor-widget__width-initial elementor-widget-tablet__width-initial elementor-widget elementor-widget-html\" data-id=\"ef2b156\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<a class=\"yu-cta-insert\"\n   href=\"#contact\"\n   aria-label=\"Tell me about your project\">\n\n    <span class=\"yu-cta-insert__plate\">\n\n        <i class=\"yu-cta-insert__screw yu-cta-insert__screw--tl\"><\/i>\n        <i class=\"yu-cta-insert__screw yu-cta-insert__screw--br\"><\/i>\n\n        <span class=\"yu-cta-insert__band\" aria-hidden=\"true\"><\/span>\n\n        <span class=\"yu-cta-insert__reflection\" aria-hidden=\"true\"><\/span>\n\n        <span class=\"yu-cta-insert__content\">\n\n            <span class=\"yu-cta-insert__micro\">\n                CTA \/ CONTACT\n            <\/span>\n\n            <span class=\"yu-cta-insert__row\">\n\n                <span class=\"yu-cta-insert__label\">\n                    TELL ME ABOUT YOUR PROJECT\n                <\/span>\n\n                <span class=\"yu-cta-insert__arrow\" aria-hidden=\"true\">\n                    \u2197\n                <\/span>\n\n            <\/span>\n\n        <\/span>\n\n    <\/span>\n\n<\/a>\n\n<style>\n\n\/* =========================================================\n   YU.DESIGN \u2014 CTA 02\n   PLEXI + INSERT \/ PRODUCTION\n========================================================= *\/\n\n.yu-cta-insert{\n\n    --yu-blue:#405FD7;\n    --yu-orange:#F26A3D;\n    --yu-black:#111111;\n\n    position:relative;\n\n    display:block;\n\n    width:100%;\n    max-width:370px;\n\n    height:78px;\n\n    color:var(--yu-black) !important;\n\n    text-decoration:none !important;\n\n    cursor:pointer;\n\n}\n\n\n\/* =========================================================\n   PLEXIGLASS\n========================================================= *\/\n\n.yu-cta-insert__plate{\n\n    position:absolute;\n\n    inset:0;\n\n    display:block;\n\n    overflow:hidden;\n\n    box-sizing:border-box;\n\n    border-radius:9px;\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(255,255,255,.78),\n            rgba(232,237,245,.57)\n        );\n\n    border:\n        1px solid\n        rgba(255,255,255,.95);\n\n    backdrop-filter:\n        blur(7px)\n        saturate(120%);\n\n    -webkit-backdrop-filter:\n        blur(7px)\n        saturate(120%);\n\n    box-shadow:\n\n        0 0 0 1px\n        rgba(142,154,175,.22),\n\n        0 0 0 3px\n        rgba(235,242,252,.24),\n\n        0 9px 17px\n        rgba(25,31,55,.11),\n\n        inset\n        1px 1px 3px\n        rgba(255,255,255,.94),\n\n        inset\n        -3px -3px 5px\n        rgba(35,45,75,.09);\n\n}\n\n\n\/* inner edge *\/\n\n.yu-cta-insert__plate::before{\n\n    content:\"\";\n\n    position:absolute;\n\n    inset:5px;\n\n    border-radius:6px;\n\n    border:\n        1px solid\n        rgba(255,255,255,.48);\n\n    pointer-events:none;\n\n}\n\n\n\/* =========================================================\n   COLOR INSERT\n========================================================= *\/\n\n.yu-cta-insert__band{\n\n    position:absolute;\n\n    z-index:2;\n\n    left:-8%;\n    top:50%;\n\n    width:116%;\n    height:42px;\n\n    background:\n        var(--yu-orange);\n\n    clip-path:polygon(\n        0 12%,\n        10% 4%,\n        21% 10%,\n        31% 3%,\n        43% 9%,\n        55% 2%,\n        68% 8%,\n        79% 1%,\n        91% 7%,\n        100% 3%,\n        98% 87%,\n        88% 82%,\n        77% 91%,\n        66% 84%,\n        54% 92%,\n        42% 86%,\n        31% 94%,\n        20% 87%,\n        9% 93%,\n        0 88%\n    );\n\n    opacity:.88;\n\n    transform:\n        translate(-57%,-50%)\n        rotate(-2deg);\n\n    transition:\n        transform .42s\n        cubic-bezier(.22,.8,.22,1),\n        background-color .28s ease;\n\n    will-change:transform;\n\n}\n\n\n\/* subtle texture *\/\n\n.yu-cta-insert__band::after{\n\n    content:\"\";\n\n    position:absolute;\n\n    inset:0;\n\n    opacity:.15;\n\n    background:\n        repeating-linear-gradient(\n            92deg,\n            transparent 0 8px,\n            rgba(255,255,255,.22) 8px 9px,\n            transparent 9px 15px\n        );\n\n}\n\n\n\/* =========================================================\n   REFLECTION\n========================================================= *\/\n\n.yu-cta-insert__reflection{\n\n    position:absolute;\n\n    z-index:3;\n\n    top:-50%;\n    left:-20%;\n\n    width:42%;\n    height:190%;\n\n    background:\n        linear-gradient(\n            105deg,\n            transparent,\n            rgba(255,255,255,.40),\n            transparent\n        );\n\n    opacity:.4;\n\n    transform:\n        rotate(12deg)\n        translateX(-45%);\n\n    transition:\n        transform .5s\n        cubic-bezier(.22,.8,.22,1);\n\n    will-change:transform;\n\n    pointer-events:none;\n\n}\n\n\n\/* =========================================================\n   CONTENT\n========================================================= *\/\n\n.yu-cta-insert__content{\n\n    position:absolute;\n\n    z-index:5;\n\n    inset:0;\n\n    display:flex;\n\n    flex-direction:column;\n\n    justify-content:center;\n\n    box-sizing:border-box;\n\n    padding:\n        10px\n        32px;\n\n}\n\n\n.yu-cta-insert__micro{\n\n    display:block;\n\n    margin-bottom:5px;\n\n    font-family:\n        Inter,\n        Arial,\n        sans-serif;\n\n    font-size:7px;\n\n    line-height:1;\n\n    font-weight:800;\n\n    letter-spacing:.15em;\n\n    color:\n        rgba(17,17,17,.47);\n\n    transition:\n        color .25s ease,\n        transform .28s ease;\n\n}\n\n\n.yu-cta-insert__row{\n\n    display:flex;\n\n    align-items:center;\n\n    justify-content:space-between;\n\n    gap:18px;\n\n}\n\n\n.yu-cta-insert__label{\n\n    font-family:\n        Khand,\n        \"Arial Narrow\",\n        Arial,\n        sans-serif;\n\n    font-size:19px;\n\n    line-height:1;\n\n    font-weight:600;\n\n    white-space:nowrap;\n\n    transition:\n        color .28s ease,\n        transform .3s\n        cubic-bezier(.22,.8,.22,1);\n\n}\n\n\n.yu-cta-insert__arrow{\n\n    flex:0 0 auto;\n\n    display:flex;\n\n    align-items:center;\n    justify-content:center;\n\n    width:25px;\n    height:25px;\n\n    color:\n        var(--yu-blue);\n\n    font-family:\n        Arial,\n        sans-serif;\n\n    font-size:25px;\n\n    line-height:1;\n\n    transition:\n        color .28s ease,\n        transform .3s\n        cubic-bezier(.22,.8,.22,1);\n\n}\n\n\n\/* =========================================================\n   SCREWS\n========================================================= *\/\n\n.yu-cta-insert__screw{\n\n    position:absolute;\n\n    z-index:8;\n\n    width:9px;\n    height:9px;\n\n    border-radius:50%;\n\n    background:\n        radial-gradient(\n            circle at 31% 27%,\n            #fff 0 7%,\n            #e3e6e8 14%,\n            #9ea4aa 30%,\n            #5b6268 48%,\n            #272b30 64%,\n            #a9afb4 79%,\n            #42484e 100%\n        );\n\n    box-shadow:\n        0 1px 2px\n        rgba(0,0,0,.38);\n\n}\n\n\n.yu-cta-insert__screw::after{\n\n    content:\"\";\n\n    position:absolute;\n\n    left:2px;\n    right:2px;\n    top:4px;\n\n    height:1px;\n\n    background:\n        rgba(0,0,0,.75);\n\n    transform:\n        rotate(35deg);\n\n}\n\n\n.yu-cta-insert__screw--tl{\n    top:8px;\n    left:8px;\n}\n\n\n.yu-cta-insert__screw--br{\n    right:8px;\n    bottom:8px;\n}\n\n\n\/* =========================================================\n   HOVER\n========================================================= *\/\n\n@media(hover:hover){\n\n    .yu-cta-insert:hover\n    .yu-cta-insert__band{\n\n        background:\n            var(--yu-blue);\n\n        transform:\n            translate(0,-50%)\n            rotate(1deg);\n\n    }\n\n\n    .yu-cta-insert:hover\n    .yu-cta-insert__reflection{\n\n        transform:\n            rotate(12deg)\n            translateX(360%);\n\n    }\n\n\n    .yu-cta-insert:hover\n    .yu-cta-insert__label{\n\n        color:#fff;\n\n        transform:\n            translateX(3px);\n\n    }\n\n\n    .yu-cta-insert:hover\n    .yu-cta-insert__micro{\n\n        color:\n            rgba(255,255,255,.68);\n\n        transform:\n            translateX(3px);\n\n    }\n\n\n    .yu-cta-insert:hover\n    .yu-cta-insert__arrow{\n\n        color:\n            var(--yu-orange);\n\n        transform:\n            translate(4px,-4px)\n            rotate(4deg);\n\n    }\n\n}\n\n\n\/* =========================================================\n   CLICK\n========================================================= *\/\n\n.yu-cta-insert:active\n.yu-cta-insert__arrow{\n\n    transform:\n        translate(1px,-1px);\n\n}\n\n\n\/* =========================================================\n   FOCUS\n========================================================= *\/\n\n.yu-cta-insert:focus-visible{\n\n    outline:\n        2px solid\n        var(--yu-blue);\n\n    outline-offset:6px;\n\n}\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media(max-width:767px){\n\n    .yu-cta-insert{\n\n        max-width:none;\n\n        height:70px;\n\n    }\n\n\n    .yu-cta-insert__content{\n\n        padding:\n            9px\n            28px;\n\n    }\n\n\n    .yu-cta-insert__label{\n\n        font-size:17px;\n\n        white-space:normal;\n\n    }\n\n\n    .yu-cta-insert__micro{\n\n        font-size:6.5px;\n\n    }\n\n\n    .yu-cta-insert__band{\n\n        height:38px;\n\n    }\n\n\n    .yu-cta-insert__arrow{\n\n        width:22px;\n        height:22px;\n\n        font-size:22px;\n\n    }\n\n}\n\n\n\/* =========================================================\n   REDUCED MOTION\n========================================================= *\/\n\n@media(prefers-reduced-motion:reduce){\n\n    .yu-cta-insert__band,\n    .yu-cta-insert__reflection,\n    .yu-cta-insert__micro,\n    .yu-cta-insert__label,\n    .yu-cta-insert__arrow{\n\n        transition:none !important;\n\n    }\n\n}\n\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/main>\n\t\t<div class=\"elementor-element elementor-element-c8e62fc e-con-full e-flex e-con e-parent\" data-id=\"c8e62fc\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cef5441 elementor-widget__width-initial elementor-widget-mobile__width-initial elementor-widget-tablet__width-initial elementor-widget elementor-widget-image\" data-id=\"cef5441\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;motion_fx_motion_fx_scrolling&quot;:&quot;yes&quot;,&quot;motion_fx_translateY_effect&quot;:&quot;yes&quot;,&quot;motion_fx_translateY_direction&quot;:&quot;negative&quot;,&quot;motion_fx_translateY_speed&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:4,&quot;sizes&quot;:[]},&quot;motion_fx_translateY_affectedRange&quot;:{&quot;unit&quot;:&quot;%&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:{&quot;start&quot;:0,&quot;end&quot;:100}},&quot;motion_fx_devices&quot;:[&quot;desktop&quot;,&quot;tablet&quot;,&quot;mobile&quot;]}\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"768\" height=\"576\" src=\"https:\/\/www.yuliyapivnyak.it\/en\/wp-content\/uploads\/sites\/2\/2026\/05\/iPhone-12-Pro-768x576.webp\" class=\"attachment-medium_large size-medium_large wp-image-10653\" alt=\"\" srcset=\"https:\/\/www.yuliyapivnyak.it\/en\/wp-content\/uploads\/sites\/2\/2026\/05\/iPhone-12-Pro-768x576.webp 768w, https:\/\/www.yuliyapivnyak.it\/en\/wp-content\/uploads\/sites\/2\/2026\/05\/iPhone-12-Pro-300x225.webp 300w, https:\/\/www.yuliyapivnyak.it\/en\/wp-content\/uploads\/sites\/2\/2026\/05\/iPhone-12-Pro-1024x768.webp 1024w, https:\/\/www.yuliyapivnyak.it\/en\/wp-content\/uploads\/sites\/2\/2026\/05\/iPhone-12-Pro.webp 1500w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a5ea2ce e-con-full e-flex e-con e-child\" data-id=\"a5ea2ce\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-defb3a8 e-con-full e-flex e-con e-child\" data-id=\"defb3a8\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bf71cc4 elementor-widget__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"bf71cc4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>(HOW I STEP IN)<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1440809 elementor-widget__width-initial elementor-widget elementor-widget-heading\" data-id=\"1440809\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;none&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">PROBLEM \u2014 SOLUTION<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-fb16c75 e-con-full e-flex e-con e-child\" data-id=\"fb16c75\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-9979138 e-con-full e-flex e-con e-child\" data-id=\"9979138\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ce379e0 elementor-widget__width-initial elementor-widget-mobile__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"ce379e0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>If your website\u2019s value isn\u2019t clear immediately, people are unlikely to choose you. They don\u2019t analyse: they compare and decide.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f963845 elementor-widget__width-initial elementor-widget-mobile__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"f963845\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>You don\u2019t need to figure out structure and messaging<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3828e34 elementor-widget__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"3828e34\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>\u2014\u2028 I take care of that.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6f70aeb elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"6f70aeb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\n     YU.DESIGN \u2014 PROBLEM \/ SOLUTION\n     DESKTOP = GRID\n     MOBILE = STICKY STACK CON TESTO + FRECCIA VISIBILI\n========================================================= -->\n\n<section class=\"yu-process\">\n\n    <div class=\"yu-process__grid\">\n\n\n        <!-- =================================================\n             01\n        ================================================== -->\n\n        <article class=\"yu-card\">\n\n            <div class=\"yu-card__top\">\n\n                <span class=\"yu-card__problem\">\n                    Starting from scratch\n                <\/span>\n\n                <span class=\"yu-card__number\">\n                    [01]\n                <\/span>\n\n                <span class=\"yu-card__mini-arrow\" aria-hidden=\"true\">\n                    \u2193\n                <\/span>\n\n            <\/div>\n\n            <div class=\"yu-card__arrow\" aria-hidden=\"true\">\n                \u2193\n            <\/div>\n\n            <h3 class=\"yu-card__solution\">\n                I SET THE<br>\n                DIRECTION\n            <\/h3>\n\n        <\/article>\n\n\n        <!-- =================================================\n             02\n        ================================================== -->\n\n        <article class=\"yu-card\">\n\n            <div class=\"yu-card__top\">\n\n                <span class=\"yu-card__problem yu-card__problem--strike\">\n                    Weak structure\n                <\/span>\n\n                <span class=\"yu-card__number\">\n                    [02]\n                <\/span>\n\n                <span class=\"yu-card__mini-arrow\" aria-hidden=\"true\">\n                    \u2193\n                <\/span>\n\n            <\/div>\n\n            <div class=\"yu-card__arrow\" aria-hidden=\"true\">\n                \u2193\n            <\/div>\n\n            <h3 class=\"yu-card__solution\">\n                I REBUILD THE<br>\n                LOGIC\n            <\/h3>\n\n        <\/article>\n\n\n        <!-- =================================================\n             03\n        ================================================== -->\n\n        <article class=\"yu-card yu-card--tilt\">\n\n            <div class=\"yu-card__top\">\n\n                <span class=\"yu-card__problem yu-card__problem--strike\">\n                    Unclear messaging\n                <\/span>\n\n                <span class=\"yu-card__number\">\n                    [03]\n                <\/span>\n\n                <span class=\"yu-card__mini-arrow\" aria-hidden=\"true\">\n                    \u2193\n                <\/span>\n\n            <\/div>\n\n            <div class=\"yu-card__arrow\" aria-hidden=\"true\">\n                \u2193\n            <\/div>\n\n            <h3 class=\"yu-card__solution\">\n                I CUT THE<br>\n                NOISE,<br>\n                STRENGTHEN THE<br>\n                MESSAGE\n            <\/h3>\n\n        <\/article>\n\n\n        <!-- =================================================\n             04\n        ================================================== -->\n\n        <article class=\"yu-card\">\n\n            <div class=\"yu-card__top\">\n\n                <span class=\"yu-card__problem yu-card__problem--strike\">\n                    Lack of trust\n                <\/span>\n\n                <span class=\"yu-card__number\">\n                    [04]\n                <\/span>\n\n                <span class=\"yu-card__mini-arrow\" aria-hidden=\"true\">\n                    \u2193\n                <\/span>\n\n            <\/div>\n\n            <div class=\"yu-card__arrow\" aria-hidden=\"true\">\n                \u2193\n            <\/div>\n\n            <h3 class=\"yu-card__solution\">\n                I BUILD A SOLID<br>\n                FOUNDATION\n            <\/h3>\n\n        <\/article>\n\n\n        <!-- =================================================\n             05 \u2014 PLEXY\n        ================================================== -->\n\n        <article class=\"yu-card yu-card--final\">\n\n            <span class=\"yu-screw yu-screw--tl\" aria-hidden=\"true\"><\/span>\n            <span class=\"yu-screw yu-screw--tr\" aria-hidden=\"true\"><\/span>\n            <span class=\"yu-screw yu-screw--bl\" aria-hidden=\"true\"><\/span>\n            <span class=\"yu-screw yu-screw--br\" aria-hidden=\"true\"><\/span>\n\n            <span class=\"yu-card__glass-reflection\" aria-hidden=\"true\"><\/span>\n\n            <div class=\"yu-card__top\">\n\n                <span class=\"yu-card__problem\">\n                    The project grows\n                <\/span>\n\n                <span class=\"yu-card__number\">\n                    [05]\n                <\/span>\n\n                <span class=\"yu-card__mini-arrow\" aria-hidden=\"true\">\n                    \u2193\n                <\/span>\n\n            <\/div>\n\n            <div class=\"yu-card__arrow\" aria-hidden=\"true\">\n                \u2193\n            <\/div>\n\n            <h3 class=\"yu-card__solution\">\n                I PREPARE THE SITE<br>\n                TO EVOLVE\n            <\/h3>\n\n        <\/article>\n\n\n    <\/div>\n\n<\/section>\n\n\n<style>\n\n\/* =========================================================\n   01 \u2014 ROOT\n========================================================= *\/\n\n.yu-process{\n\n    --yu-page:#F4F2EC;\n    --yu-beige:#E0DDD6;\n\n    --yu-black:#111111;\n    --yu-blue:#4058D6;\n\n    width:100%;\n\n    margin:0;\n    padding:0;\n\n    background:transparent;\n\n    font-family:\n        Inter,\n        Arial,\n        sans-serif;\n}\n\n\n.yu-process *,\n.yu-process *::before,\n.yu-process *::after{\n\n    box-sizing:border-box;\n}\n\n\n\n\/* =========================================================\n   02 \u2014 GRID DESKTOP\n========================================================= *\/\n\n.yu-process__grid{\n\n    width:min(96%,1800px);\n\n    margin:0 auto;\n\n    padding:\n        48px\n        0\n        68px;\n\n    display:grid;\n\n    grid-template-columns:\n        repeat(5,minmax(0,1fr));\n\n    gap:\n        clamp(14px,1.25vw,22px);\n\n    align-items:end;\n}\n\n\n\n\/* =========================================================\n   03 \u2014 CARD\n========================================================= *\/\n\n.yu-card{\n\n    position:relative;\n\n    min-width:0;\n\n    height:\n        clamp(300px,21vw,355px);\n\n    padding:\n        clamp(22px,1.7vw,30px);\n\n    display:flex;\n\n    flex-direction:column;\n\n    background:\n        var(--yu-beige);\n\n    border:0;\n\n    border-radius:10px;\n\n    box-shadow:none;\n\n    overflow:hidden;\n\n    color:\n        var(--yu-black);\n\n    transform-origin:\n        center bottom;\n}\n\n\n\n\/* =========================================================\n   04 \u2014 TOP\n========================================================= *\/\n\n.yu-card__top{\n\n    position:relative;\n\n    z-index:6;\n\n    width:100%;\n\n    display:flex;\n\n    align-items:flex-start;\n\n    justify-content:space-between;\n\n    gap:15px;\n}\n\n\n\n\/* =========================================================\n   05 \u2014 PROBLEM\n========================================================= *\/\n\n.yu-card__problem{\n\n    min-width:0;\n\n    font-family:\n        Inter,\n        Arial,\n        sans-serif;\n\n    font-size:18px;\n\n    line-height:1.25;\n\n    font-weight:400;\n\n    color:\n        rgba(17,17,17,.68);\n}\n\n\n.yu-card__problem--strike{\n\n    text-decoration:\n        line-through;\n\n    text-decoration-thickness:\n        1px;\n\n    text-decoration-color:\n        rgba(17,17,17,.60);\n}\n\n\n\n\/* =========================================================\n   06 \u2014 NUMBER\n========================================================= *\/\n\n.yu-card__number{\n\n    flex:0 0 auto;\n\n    font-family:\n        Khand,\n        \"Arial Narrow\",\n        Arial,\n        sans-serif;\n\n    font-size:14px;\n\n    line-height:1;\n\n    font-weight:600;\n\n    color:\n        var(--yu-blue);\n}\n\n\n\n\/* =========================================================\n   07 \u2014 MINI ARROW\n   NASCOSTA SU DESKTOP\n========================================================= *\/\n\n.yu-card__mini-arrow{\n\n    display:none;\n}\n\n\n\n\/* =========================================================\n   08 \u2014 MAIN FLOW ARROW\n========================================================= *\/\n\n.yu-card__arrow{\n\n    position:relative;\n\n    z-index:5;\n\n    flex:1;\n\n    display:flex;\n\n    align-items:center;\n\n    justify-content:center;\n\n    color:\n        var(--yu-blue);\n\n    font-family:\n        Arial,\n        sans-serif;\n\n    font-size:\n        clamp(25px,1.9vw,32px);\n\n    line-height:1;\n\n    font-weight:400;\n}\n\n\n\n\/* =========================================================\n   09 \u2014 SOLUTION\n========================================================= *\/\n\n.yu-card__solution{\n\n    position:relative;\n\n    z-index:5;\n\n    width:100%;\n\n    margin:0 !important;\n    padding:0 !important;\n\n    font-family:\n        Khand,\n        \"Arial Narrow\",\n        Arial,\n        sans-serif !important;\n\n    font-size:\n        30px !important;\n\n    line-height:\n        .92 !important;\n\n    font-weight:\n        600 !important;\n\n    letter-spacing:\n        -.02em !important;\n\n    text-transform:uppercase;\n\n    color:\n        var(--yu-black) !important;\n}\n\n\n.yu-card__solution::before,\n.yu-card__solution::after{\n\n    display:none !important;\n\n    content:none !important;\n}\n\n\n\n\/* =========================================================\n   10 \u2014 CARD 03\n========================================================= *\/\n\n.yu-card--tilt{\n\n    transform:\n        translateY(-20px)\n        rotate(2deg);\n\n    box-shadow:\n        0 16px 28px\n        rgba(17,17,17,.07);\n}\n\n\n\n\/* =========================================================\n   11 \u2014 FINAL PLEXY\n========================================================= *\/\n\n.yu-card--final{\n\n    position:relative;\n\n    background:\n\n        radial-gradient(\n            circle at 20% 12%,\n            rgba(255,255,255,.48),\n            transparent 36%\n        ),\n\n        linear-gradient(\n            145deg,\n            rgba(90,112,225,.35) 0%,\n            rgba(64,88,214,.27) 50%,\n            rgba(48,72,198,.31) 100%\n        );\n\n    border:\n        1px solid\n        rgba(255,255,255,.82);\n\n    border-radius:10px;\n\n    -webkit-backdrop-filter:\n        blur(18px)\n        saturate(145%);\n\n    backdrop-filter:\n        blur(18px)\n        saturate(145%);\n\n    box-shadow:\n\n        0 0 0 1px\n        rgba(72,92,170,.18),\n\n        0 0 0 3px\n        rgba(224,230,255,.22),\n\n        0 16px 34px\n        rgba(30,43,112,.14),\n\n        inset\n        1px 1px 4px\n        rgba(255,255,255,.70),\n\n        inset\n        -3px -3px 8px\n        rgba(32,48,120,.08);\n\n    color:\n        var(--yu-black);\n\n    isolation:isolate;\n}\n\n\n\n\/* =========================================================\n   12 \u2014 INNER FRAME\n========================================================= *\/\n\n.yu-card--final::before{\n\n    content:\"\";\n\n    position:absolute;\n\n    inset:6px;\n\n    z-index:1;\n\n    border:\n        1px solid\n        rgba(255,255,255,.44);\n\n    border-radius:8px;\n\n    pointer-events:none;\n}\n\n\n\n\/* =========================================================\n   13 \u2014 FINAL TEXT\n========================================================= *\/\n\n.yu-card--final\n.yu-card__problem{\n\n    color:\n        rgba(17,17,17,.70);\n}\n\n\n.yu-card--final\n.yu-card__number{\n\n    color:\n        var(--yu-blue);\n}\n\n\n.yu-card--final\n.yu-card__arrow{\n\n    color:\n        var(--yu-blue);\n}\n\n\n.yu-card--final\n.yu-card__solution{\n\n    color:\n        var(--yu-black) !important;\n}\n\n\n\n\/* =========================================================\n   14 \u2014 REFLECTION\n========================================================= *\/\n\n.yu-card__glass-reflection{\n\n    position:absolute;\n\n    z-index:2;\n\n    top:-65%;\n    left:-50%;\n\n    width:48%;\n    height:230%;\n\n    background:\n\n        linear-gradient(\n            105deg,\n\n            transparent 0%,\n\n            rgba(255,255,255,.08) 40%,\n\n            rgba(255,255,255,.34) 50%,\n\n            rgba(255,255,255,.08) 60%,\n\n            transparent 100%\n        );\n\n    transform:\n        rotate(12deg);\n\n    pointer-events:none;\n}\n\n\n\n\/* =========================================================\n   15 \u2014 SCREWS\n========================================================= *\/\n\n.yu-screw{\n\n    position:absolute;\n\n    z-index:10;\n\n    width:12px;\n    height:12px;\n\n    border-radius:50%;\n\n    background:\n\n        radial-gradient(\n            circle at 30% 25%,\n\n            #ffffff 0 6%,\n            #e8ebed 13%,\n            #a6adb2 29%,\n            #61696f 46%,\n            #292e32 64%,\n            #aeb4b8 80%,\n            #444a4e 100%\n        );\n\n    box-shadow:\n        0 1px 2px\n        rgba(0,0,0,.45);\n}\n\n\n.yu-screw::after{\n\n    content:\"\";\n\n    position:absolute;\n\n    left:2px;\n    right:2px;\n\n    top:5.5px;\n\n    height:1px;\n\n    background:\n        rgba(0,0,0,.80);\n\n    transform:\n        rotate(35deg);\n}\n\n\n.yu-screw--tl{\n    top:11px;\n    left:11px;\n}\n\n\n.yu-screw--tr{\n    top:11px;\n    right:11px;\n}\n\n\n.yu-screw--bl{\n    bottom:11px;\n    left:11px;\n}\n\n\n.yu-screw--br{\n    bottom:11px;\n    right:11px;\n}\n\n\n\n\/* =========================================================\n   16 \u2014 HOVER\n========================================================= *\/\n\n@media(hover:hover){\n\n    .yu-card{\n\n        transition:\n            transform .25s ease,\n            background .25s ease,\n            box-shadow .25s ease;\n    }\n\n\n    .yu-card:not(.yu-card--tilt):not(.yu-card--final):hover{\n\n        transform:\n            translateY(-4px);\n\n        background:\n            #DAD6CE;\n    }\n\n\n    .yu-card--tilt:hover{\n\n        transform:\n            translateY(-26px)\n            rotate(1.6deg);\n\n        box-shadow:\n            0 20px 32px\n            rgba(17,17,17,.09);\n    }\n\n\n    .yu-card--final:hover{\n\n        transform:\n            translateY(-5px);\n    }\n\n}\n\n\n\n\/* =========================================================\n   17 \u2014 TABLET LANDSCAPE\n========================================================= *\/\n\n@media(max-width:1200px){\n\n    .yu-process__grid{\n\n        width:\n            calc(100% - 32px);\n\n        grid-template-columns:\n            repeat(3,minmax(0,1fr));\n\n        gap:14px;\n    }\n\n\n    .yu-card{\n\n        height:280px;\n    }\n\n\n    .yu-card__problem{\n\n        font-size:16px;\n    }\n\n\n    .yu-card__solution{\n\n        font-size:\n            28px !important;\n    }\n\n\n    .yu-card--tilt{\n\n        transform:\n            translateY(-12px)\n            rotate(1.5deg);\n    }\n\n}\n\n\n\n\/* =========================================================\n   18 \u2014 TABLET\n========================================================= *\/\n\n@media(max-width:900px){\n\n    .yu-process__grid{\n\n        grid-template-columns:\n            repeat(2,minmax(0,1fr));\n\n        padding-top:30px;\n        padding-bottom:45px;\n    }\n\n\n    .yu-card{\n\n        height:245px;\n    }\n\n\n    .yu-card__problem{\n\n        font-size:16px;\n    }\n\n\n    .yu-card__solution{\n\n        font-size:\n            28px !important;\n    }\n\n\n    .yu-card--tilt{\n\n        transform:\n            translateY(-7px)\n            rotate(1deg);\n    }\n\n}\n\n\n\n\/* =========================================================\n   19 \u2014 MOBILE\n   STICKY STACK CON HEADER VISIBILE\n========================================================= *\/\n\n@media(max-width:767px){\n\n    .yu-process{\n\n        overflow:visible;\n    }\n\n\n    .yu-process__grid{\n\n        width:100%;\n\n        margin:0;\n\n        padding:\n            18px\n            14px\n            280px;\n\n        display:flex;\n\n        flex-direction:column;\n\n        gap:0;\n\n        overflow:visible;\n    }\n\n\n    \/* =====================================================\n       CARD MOBILE\n    ===================================================== *\/\n\n    .yu-card{\n\n        position:sticky;\n\n        width:100%;\n\n        height:235px;\n        min-height:235px;\n\n        margin:\n            0\n            0\n            18px;\n\n        padding:\n            0\n            17px\n            18px;\n\n        border-radius:10px;\n\n        transform:none;\n\n        box-shadow:\n            0 10px 24px\n            rgba(17,17,17,.08);\n\n        overflow:hidden;\n    }\n\n\n    \/* =====================================================\n       TESTATA MOBILE\n    ===================================================== *\/\n\n    .yu-card__top{\n\n        position:relative;\n\n        flex:0 0 62px;\n\n        width:100%;\n\n        display:grid;\n\n        grid-template-columns:\n            minmax(0,1fr)\n            auto\n            22px;\n\n        align-items:center;\n\n        column-gap:9px;\n\n        padding:0;\n\n        border-bottom:\n            1px solid\n            rgba(17,17,17,.08);\n    }\n\n\n    \/* problema *\/\n\n    .yu-card__problem{\n\n        overflow:hidden;\n\n        white-space:nowrap;\n\n        text-overflow:ellipsis;\n\n        padding:0;\n\n        font-size:16px;\n\n        line-height:1.15;\n    }\n\n\n    \/* numero *\/\n\n    .yu-card__number{\n\n        position:static;\n\n        padding:0;\n\n        background:none;\n\n        transform:none;\n\n        font-size:14px;\n\n        color:\n            var(--yu-blue);\n    }\n\n\n    \/* FRECCIA VISIBILE NELLA TESTATA *\/\n\n    .yu-card__mini-arrow{\n\n        display:block;\n\n        justify-self:end;\n\n        color:\n            var(--yu-blue);\n\n        font-family:\n            Arial,\n            sans-serif;\n\n        font-size:20px;\n\n        line-height:1;\n    }\n\n\n    \/* =====================================================\n       FRECCIA INTERNA\n    ===================================================== *\/\n\n    .yu-card__arrow{\n\n        display:none;\n    }\n\n\n    \/* =====================================================\n       SOLUTION MOBILE\n    ===================================================== *\/\n\n    .yu-card__solution{\n\n        flex:1;\n\n        display:flex;\n\n        align-items:flex-end;\n\n        padding-bottom:4px !important;\n\n        font-size:\n            26px !important;\n\n        line-height:\n            .92 !important;\n    }\n\n\n    \/* =====================================================\n       STACK OFFSETS\n    ===================================================== *\/\n\n    .yu-card:nth-child(1){\n\n        top:88px;\n\n        z-index:1;\n    }\n\n\n    .yu-card:nth-child(2){\n\n        top:150px;\n\n        z-index:2;\n    }\n\n\n    .yu-card:nth-child(3){\n\n        top:212px;\n\n        z-index:3;\n    }\n\n\n    .yu-card:nth-child(4){\n\n        top:274px;\n\n        z-index:4;\n    }\n\n\n    .yu-card:nth-child(5){\n\n        top:336px;\n\n        z-index:5;\n    }\n\n\n    \/* =====================================================\n       NIENTE TILT NELLO STACK\n    ===================================================== *\/\n\n    .yu-card--tilt{\n\n        transform:none;\n\n        box-shadow:\n            0 10px 24px\n            rgba(17,17,17,.08);\n    }\n\n\n    \/* =====================================================\n       FINAL PLEXY MOBILE\n    ===================================================== *\/\n\n    .yu-card--final{\n\n        background:\n\n            radial-gradient(\n                circle at 20% 12%,\n                rgba(255,255,255,.50),\n                transparent 38%\n            ),\n\n            linear-gradient(\n                145deg,\n                rgba(90,112,225,.34),\n                rgba(64,88,214,.25),\n                rgba(48,72,198,.29)\n            );\n\n        -webkit-backdrop-filter:\n            blur(18px)\n            saturate(150%);\n\n        backdrop-filter:\n            blur(18px)\n            saturate(150%);\n    }\n\n\n    .yu-card--final\n    .yu-card__top{\n\n        border-bottom:\n            1px solid\n            rgba(17,17,17,.12);\n    }\n\n\n    .yu-card--final\n    .yu-card__problem{\n\n        color:\n            var(--yu-black);\n    }\n\n\n    .yu-card--final\n    .yu-card__number{\n\n        color:\n            var(--yu-blue);\n    }\n\n\n    .yu-card--final\n    .yu-card__mini-arrow{\n\n        color:\n            var(--yu-blue);\n    }\n\n\n    .yu-card--final\n    .yu-card__solution{\n\n        color:\n            var(--yu-black) !important;\n    }\n\n\n    .yu-screw{\n\n        width:9px;\n        height:9px;\n    }\n\n\n    .yu-screw--tl{\n\n        top:5px;\n        left:5px;\n    }\n\n\n    .yu-screw--tr{\n\n        top:5px;\n        right:5px;\n    }\n\n\n    .yu-screw--bl{\n\n        bottom:8px;\n        left:8px;\n    }\n\n\n    .yu-screw--br{\n\n        bottom:8px;\n        right:8px;\n    }\n\n}\n\n\n\n\/* =========================================================\n   20 \u2014 SMALL MOBILE\n========================================================= *\/\n\n@media(max-width:390px){\n\n    .yu-process__grid{\n\n        padding:\n            15px\n            11px\n            260px;\n    }\n\n\n    .yu-card{\n\n        height:220px;\n        min-height:220px;\n\n        padding:\n            0\n            14px\n            16px;\n\n        margin-bottom:15px;\n    }\n\n\n    .yu-card__top{\n\n        flex-basis:56px;\n\n        grid-template-columns:\n            minmax(0,1fr)\n            auto\n            19px;\n\n        column-gap:7px;\n    }\n\n\n    .yu-card__problem{\n\n        font-size:16px;\n    }\n\n\n    .yu-card__number{\n\n        font-size:14px;\n    }\n\n\n    .yu-card__mini-arrow{\n\n        font-size:18px;\n    }\n\n\n    .yu-card__solution{\n\n        font-size:\n            26px !important;\n    }\n\n\n    \/* stack compatto *\/\n\n    .yu-card:nth-child(1){\n        top:84px;\n    }\n\n\n    .yu-card:nth-child(2){\n        top:140px;\n    }\n\n\n    .yu-card:nth-child(3){\n        top:196px;\n    }\n\n\n    .yu-card:nth-child(4){\n        top:252px;\n    }\n\n\n    .yu-card:nth-child(5){\n        top:308px;\n    }\n\n}\n\n\n\n\/* =========================================================\n   21 \u2014 REDUCED MOTION\n========================================================= *\/\n\n@media(prefers-reduced-motion:reduce){\n\n    .yu-card{\n\n        transition:none !important;\n    }\n\n}\n\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-55f78cf e-con-full yu-dark-section e-flex e-con e-parent\" data-id=\"55f78cf\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-8a2c35d e-flex e-con-boxed e-con e-child\" data-id=\"8a2c35d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-9c4e147 e-con-full e-flex e-con e-child\" data-id=\"9c4e147\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-216166c elementor-widget__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"216166c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>[WEBSITES]<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-43b141e elementor-widget__width-initial elementor-widget elementor-widget-heading\" data-id=\"43b141e\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;motion_fx_motion_fx_scrolling&quot;:&quot;yes&quot;,&quot;motion_fx_translateX_effect&quot;:&quot;yes&quot;,&quot;motion_fx_translateX_speed&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:0.200000000000000011102230246251565404236316680908203125,&quot;sizes&quot;:[]},&quot;motion_fx_translateX_affectedRange&quot;:{&quot;unit&quot;:&quot;%&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:{&quot;start&quot;:0,&quot;end&quot;:100}},&quot;motion_fx_devices&quot;:[&quot;desktop&quot;,&quot;tablet&quot;,&quot;mobile&quot;]}\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">I DESIGN WEBSITES<br>\nFOR DIFFERENT NEEDS\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b7f32dd elementor-widget__width-initial elementor-widget elementor-widget-html\" data-id=\"b7f32dd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<a class=\"yu-plexi-insert\"\n   href=\"#contact\"\n   aria-label=\"Tell me about your project\">\n\n    <span class=\"yu-plexi-insert__plate\">\n\n        <i class=\"yu-plexi-insert__screw yu-plexi-insert__screw--tl\"><\/i>\n        <i class=\"yu-plexi-insert__screw yu-plexi-insert__screw--br\"><\/i>\n\n        <span class=\"yu-plexi-insert__reflection\" aria-hidden=\"true\"><\/span>\n\n        <span class=\"yu-plexi-insert__band\" aria-hidden=\"true\"><\/span>\n\n        <span class=\"yu-plexi-insert__content\">\n\n            <span class=\"yu-plexi-insert__micro\">\n                01 \/ CONTACT\n            <\/span>\n\n            <span class=\"yu-plexi-insert__row\">\n\n                <span class=\"yu-plexi-insert__label\">\n                    TELL ME ABOUT YOUR PROJECT\n                <\/span>\n\n                <span class=\"yu-plexi-insert__arrow\" aria-hidden=\"true\">\n                    \u2197\n                <\/span>\n\n            <\/span>\n\n        <\/span>\n\n    <\/span>\n\n<\/a>\n\n\n<style>\n\n\/* =========================================================\n   YU.DESIGN \u2014 PLEXI CTA \/ VERSION 02\n   PLEXI + COLOR INSERT\n========================================================= *\/\n\n.yu-plexi-insert{\n\n    --yu-blue:#405FD7;\n    --yu-orange:#F26A3D;\n    --yu-black:#111111;\n\n    position:relative;\n\n    display:block;\n\n    width:100%;\n    max-width:370px;\n\n    height:78px;\n\n    color:var(--yu-black) !important;\n\n    text-decoration:none !important;\n\n    cursor:pointer;\n\n}\n\n\n\/* =========================================================\n   PLEXIGLASS\n========================================================= *\/\n\n.yu-plexi-insert__plate{\n\n    position:absolute;\n\n    inset:0;\n\n    display:block;\n\n    overflow:hidden;\n\n    box-sizing:border-box;\n\n    border-radius:9px;\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(255,255,255,.78),\n            rgba(232,237,245,.57)\n        );\n\n    border:\n        1px solid\n        rgba(255,255,255,.95);\n\n    backdrop-filter:\n        blur(7px)\n        saturate(120%);\n\n    -webkit-backdrop-filter:\n        blur(7px)\n        saturate(120%);\n\n    box-shadow:\n\n        0 0 0 1px\n        rgba(142,154,175,.22),\n\n        0 0 0 3px\n        rgba(235,242,252,.25),\n\n        0 10px 18px\n        rgba(25,31,55,.12),\n\n        inset\n        1px 1px 3px\n        rgba(255,255,255,.96),\n\n        inset\n        -3px -3px 6px\n        rgba(35,45,75,.10);\n\n}\n\n\n\/* inner edge *\/\n\n.yu-plexi-insert__plate::before{\n\n    content:\"\";\n\n    position:absolute;\n\n    z-index:1;\n\n    inset:5px;\n\n    border-radius:6px;\n\n    border:\n        1px solid\n        rgba(255,255,255,.50);\n\n    pointer-events:none;\n\n}\n\n\n\/* =========================================================\n   COLOR BAND\n========================================================= *\/\n\n.yu-plexi-insert__band{\n\n    position:absolute;\n\n    z-index:2;\n\n    left:-18%;\n    top:50%;\n\n    width:78%;\n    height:42px;\n\n    transform:\n        translateY(-50%)\n        rotate(-2deg);\n\n    background:\n        var(--yu-orange);\n\n    clip-path:polygon(\n        0 12%,\n        10% 4%,\n        21% 10%,\n        31% 3%,\n        43% 9%,\n        55% 2%,\n        68% 8%,\n        79% 1%,\n        91% 7%,\n        100% 3%,\n        98% 87%,\n        88% 82%,\n        77% 91%,\n        66% 84%,\n        54% 92%,\n        42% 86%,\n        31% 94%,\n        20% 87%,\n        9% 93%,\n        0 88%\n    );\n\n    opacity:.88;\n\n    transition:\n        transform .48s\n        cubic-bezier(.22,.8,.22,1),\n        width .45s ease,\n        background-color .35s ease;\n\n}\n\n\n\/* little print texture *\/\n\n.yu-plexi-insert__band::after{\n\n    content:\"\";\n\n    position:absolute;\n\n    inset:0;\n\n    opacity:.20;\n\n    background:\n        repeating-linear-gradient(\n            92deg,\n            transparent 0 7px,\n            rgba(255,255,255,.22) 7px 8px,\n            transparent 8px 14px\n        );\n\n}\n\n\n\/* =========================================================\n   REFLECTION\n========================================================= *\/\n\n.yu-plexi-insert__reflection{\n\n    position:absolute;\n\n    z-index:3;\n\n    top:-50%;\n    left:-20%;\n\n    width:42%;\n    height:190%;\n\n    transform:\n        rotate(12deg)\n        translateX(-40%);\n\n    background:\n        linear-gradient(\n            105deg,\n            transparent,\n            rgba(255,255,255,.40),\n            transparent\n        );\n\n    opacity:.45;\n\n    transition:\n        transform .55s\n        cubic-bezier(.22,.8,.22,1);\n\n    pointer-events:none;\n\n}\n\n\n\/* =========================================================\n   CONTENT\n========================================================= *\/\n\n.yu-plexi-insert__content{\n\n    position:absolute;\n\n    z-index:5;\n\n    inset:0;\n\n    display:flex;\n\n    flex-direction:column;\n\n    justify-content:center;\n\n    padding:\n        10px\n        32px;\n\n    box-sizing:border-box;\n\n}\n\n\n.yu-plexi-insert__micro{\n\n    display:block;\n\n    margin-bottom:5px;\n\n    font-family:\n        Inter,\n        Arial,\n        sans-serif;\n\n    font-size:7px;\n\n    line-height:1;\n\n    font-weight:800;\n\n    letter-spacing:.15em;\n\n    color:\n        rgba(17,17,17,.48);\n\n    transition:\n        color .3s ease,\n        transform .3s ease;\n\n}\n\n\n.yu-plexi-insert__row{\n\n    display:flex;\n\n    align-items:center;\n\n    justify-content:space-between;\n\n    gap:20px;\n\n}\n\n\n.yu-plexi-insert__label{\n\n    font-family:\n        Khand,\n        \"Arial Narrow\",\n        Arial,\n        sans-serif;\n\n    font-size:19px;\n\n    line-height:1;\n\n    font-weight:600;\n\n    letter-spacing:-.01em;\n\n    white-space:nowrap;\n\n    transition:\n        color .3s ease,\n        transform .35s\n        cubic-bezier(.22,.8,.22,1);\n\n}\n\n\n\/* =========================================================\n   ARROW\n========================================================= *\/\n\n.yu-plexi-insert__arrow{\n\n    flex:0 0 auto;\n\n    display:flex;\n\n    align-items:center;\n    justify-content:center;\n\n    width:24px;\n    height:24px;\n\n    color:\n        var(--yu-blue);\n\n    font-family:\n        Arial,\n        sans-serif;\n\n    font-size:24px;\n\n    line-height:1;\n\n    transition:\n        color .3s ease,\n        transform .35s\n        cubic-bezier(.22,.8,.22,1);\n\n}\n\n\n\/* =========================================================\n   SCREWS\n========================================================= *\/\n\n.yu-plexi-insert__screw{\n\n    position:absolute;\n\n    z-index:8;\n\n    width:9px;\n    height:9px;\n\n    border-radius:50%;\n\n    background:\n        radial-gradient(\n            circle at 31% 27%,\n            #ffffff 0 7%,\n            #e3e6e8 14%,\n            #9ea4aa 30%,\n            #5b6268 48%,\n            #272b30 64%,\n            #a9afb4 79%,\n            #42484e 100%\n        );\n\n    box-shadow:\n        0 1px 2px\n        rgba(0,0,0,.4);\n\n}\n\n\n.yu-plexi-insert__screw::after{\n\n    content:\"\";\n\n    position:absolute;\n\n    left:2px;\n    right:2px;\n\n    top:4px;\n\n    height:1px;\n\n    background:\n        rgba(0,0,0,.75);\n\n    transform:\n        rotate(35deg);\n\n}\n\n\n.yu-plexi-insert__screw--tl{\n\n    top:8px;\n    left:8px;\n\n}\n\n\n.yu-plexi-insert__screw--br{\n\n    right:8px;\n    bottom:8px;\n\n}\n\n\n\/* =========================================================\n   HOVER\n========================================================= *\/\n\n@media(hover:hover){\n\n    .yu-plexi-insert:hover\n    .yu-plexi-insert__band{\n\n        width:122%;\n\n        background:\n            var(--yu-blue);\n\n        transform:\n            translate(9%,-50%)\n            rotate(1deg);\n\n    }\n\n\n    .yu-plexi-insert:hover\n    .yu-plexi-insert__reflection{\n\n        transform:\n            rotate(12deg)\n            translateX(360%);\n\n    }\n\n\n    .yu-plexi-insert:hover\n    .yu-plexi-insert__label{\n\n        color:#fff;\n\n        transform:\n            translateX(4px);\n\n    }\n\n\n    .yu-plexi-insert:hover\n    .yu-plexi-insert__micro{\n\n        color:\n            rgba(255,255,255,.68);\n\n        transform:\n            translateX(4px);\n\n    }\n\n\n    .yu-plexi-insert:hover\n    .yu-plexi-insert__arrow{\n\n        color:\n            var(--yu-orange);\n\n        transform:\n            translate(4px,-4px)\n            rotate(4deg);\n\n    }\n\n}\n\n\n\/* =========================================================\n   CLICK\n========================================================= *\/\n\n.yu-plexi-insert:active\n.yu-plexi-insert__band{\n\n    transform:\n        translate(7%,-50%)\n        scale(.985)\n        rotate(1deg);\n\n}\n\n\n.yu-plexi-insert:active\n.yu-plexi-insert__arrow{\n\n    transform:\n        translate(1px,-1px);\n\n}\n\n\n\/* =========================================================\n   FOCUS\n========================================================= *\/\n\n.yu-plexi-insert:focus-visible{\n\n    outline:\n        2px solid\n        var(--yu-blue);\n\n    outline-offset:6px;\n\n}\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media(max-width:767px){\n\n    .yu-plexi-insert{\n\n        max-width:none;\n\n        height:70px;\n\n    }\n\n\n    .yu-plexi-insert__content{\n\n        padding:\n            10px\n            28px;\n\n    }\n\n\n    .yu-plexi-insert__label{\n\n        font-size:17px;\n\n        white-space:normal;\n\n    }\n\n\n    .yu-plexi-insert__micro{\n\n        font-size:6.5px;\n\n    }\n\n\n    .yu-plexi-insert__arrow{\n\n        width:21px;\n        height:21px;\n\n        font-size:21px;\n\n    }\n\n\n    .yu-plexi-insert__band{\n\n        height:38px;\n\n        width:82%;\n\n    }\n\n}\n\n\n\/* =========================================================\n   REDUCED MOTION\n========================================================= *\/\n\n@media(prefers-reduced-motion:reduce){\n\n    .yu-plexi-insert__band,\n    .yu-plexi-insert__reflection,\n    .yu-plexi-insert__label,\n    .yu-plexi-insert__micro,\n    .yu-plexi-insert__arrow{\n\n        transition:none !important;\n\n    }\n\n}\n\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-85770f0 e-con-full e-flex e-con e-child\" data-id=\"85770f0\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bcb46d8 elementor-widget__width-initial elementor-widget-mobile__width-initial elementor-widget-tablet__width-initial elementor-widget elementor-widget-image\" data-id=\"bcb46d8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"599\" height=\"600\" src=\"https:\/\/www.yuliyapivnyak.it\/en\/wp-content\/uploads\/sites\/2\/2026\/05\/yuliya-foto.webp\" class=\"attachment-large size-large wp-image-10606\" alt=\"\" srcset=\"https:\/\/www.yuliyapivnyak.it\/en\/wp-content\/uploads\/sites\/2\/2026\/05\/yuliya-foto.webp 599w, https:\/\/www.yuliyapivnyak.it\/en\/wp-content\/uploads\/sites\/2\/2026\/05\/yuliya-foto-300x300.webp 300w, https:\/\/www.yuliyapivnyak.it\/en\/wp-content\/uploads\/sites\/2\/2026\/05\/yuliya-foto-150x150.webp 150w\" sizes=\"(max-width: 599px) 100vw, 599px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-af87243 elementor-widget__width-initial elementor-widget-mobile__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"af87243\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Yuliya Pivnyak.<br \/>web designer \/ ux strategist.<br \/>I design. Organise. Clarify.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ae5256f elementor-widget__width-initial elementor-widget-mobile__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"ae5256f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>I identify the starting point<br \/>and shape the project around it.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6357217 e-con-full e-flex e-con e-child\" data-id=\"6357217\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-2f03166 e-con-full e-flex e-con e-child\" data-id=\"2f03166\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-0d3f581 e-con-full e-flex e-con e-child\" data-id=\"0d3f581\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-c8673a8 e-con-full e-flex e-con e-child\" data-id=\"c8673a8\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b62a112 elementor-widget__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"b62a112\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>[01]<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-356c381 elementor-widget__width-initial elementor-widget-mobile__width-initial elementor-widget elementor-widget-heading\" data-id=\"356c381\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">START (NEW WEBSITE)<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ba716fe elementor-widget__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"ba716fe\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>For businesses starting from scratch<br \/>and needing a clear position from day one.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2de4695 e-con-full e-flex e-con e-child\" data-id=\"2de4695\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-18c8d87 e-con-full e-flex e-con e-child\" data-id=\"18c8d87\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-38ab786 e-con-full e-flex e-con e-child\" data-id=\"38ab786\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4a81216 elementor-widget__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"4a81216\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>[02]<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-69bcea8 elementor-widget__width-initial elementor-widget-mobile__width-initial elementor-widget elementor-widget-heading\" data-id=\"69bcea8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">REORGANISE\n(REDESIGN)\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6ebf8d3 elementor-widget__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"6ebf8d3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>For existing websites<br \/>that no longer communicate clearly or convert.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c9d206c e-con-full e-flex e-con e-child\" data-id=\"c9d206c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-f2a61de e-con-full e-transform e-flex e-con e-child\" data-id=\"f2a61de\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;_transform_rotateZ_effect&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:-6,&quot;sizes&quot;:[]},&quot;_transform_rotateZ_effect_mobile&quot;:{&quot;unit&quot;:&quot;deg&quot;,&quot;size&quot;:-2,&quot;sizes&quot;:[]},&quot;_transform_rotateZ_effect_tablet&quot;:{&quot;unit&quot;:&quot;deg&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}\">\n\t\t<div class=\"elementor-element elementor-element-81364be e-con-full e-flex e-con e-child\" data-id=\"81364be\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a2e852f elementor-widget__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"a2e852f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>[03]<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-278e43c elementor-widget__width-initial elementor-widget-mobile__width-initial elementor-widget elementor-widget-heading\" data-id=\"278e43c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">EVOLVE<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6b682f1 elementor-widget__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"6b682f1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p data-start=\"324\" data-end=\"386\">For growing businesses<br \/>that need the website to support the next stage.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-43cf05c e-con-full e-flex e-con e-parent\" data-id=\"43cf05c\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a7cf650 elementor-widget elementor-widget-html\" data-id=\"a7cf650\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\nYU.DESIGN \u2014 HOW I WORK \/ PROCESS\nFULLSCREEN HORIZONTAL SCROLL\n8 CARDS \/ 2 CHAPTERS \/ RESPONSIVE 5% COMPOSITION\n========================================================= -->\n\n<section id=\"yu-method-flow\">\n\n  <div class=\"ymf-track\">\n\n    <div class=\"ymf-stage\">\n\n      <!-- BACKGROUNDS -->\n      <div class=\"ymf-bg ymf-bg-light\"><\/div>\n      <div class=\"ymf-bg ymf-bg-dark\"><\/div>\n\n\n      <!-- ==================================================\n      SCENE 01\n      =================================================== -->\n\n      <div class=\"ymf-scene ymf-scene-light\">\n\n        <div class=\"ymf-context\">\n          <span>[WHY WORK WITH ME]<\/span>\n        <\/div>\n\n        <div class=\"ymf-big-title\">\n          HOW I WORK\n        <\/div>\n\n      <\/div>\n\n\n      <!-- ==================================================\n      SCENE 02\n      =================================================== -->\n\n      <div class=\"ymf-scene ymf-scene-dark\">\n\n        <div class=\"ymf-context\">\n          <span>[HOW IT WORKS]<\/span>\n\n          <span>\n            THROUGHOUT THE PROJECT, YOU ALWAYS KNOW WHAT'S HAPPENING,\n            WHERE WE ARE\n            AND WHAT YOU'RE INVESTING IN.\n          <\/span>\n        <\/div>\n\n        <div class=\"ymf-big-title\">\n          PROCESS\n        <\/div>\n\n      <\/div>\n\n\n      <!-- ==================================================\n      5% \u2014 BUSINESS GOALS MESSAGE\n      =================================================== -->\n\n      <div class=\"ymf-five\">\n\n        <div class=\"ymf-five-business\">\n          <span>OF WEBSITES<\/span>\n\n          <strong>\n            ARE DESIGNED AROUND<br>\n            BUSINESS GOALS.\n          <\/strong>\n        <\/div>\n\n\n        <img decoding=\"async\"\n          src=\"https:\/\/www.yuliyapivnyak.it\/wp-content\/uploads\/2026\/08\/5-_.png\"\n          alt=\"5%\"\n        >\n\n\n        <div class=\"ymf-five-work\">\n          THAT'S WHERE<br>\n          I WORK.\n        <\/div>\n\n      <\/div>\n\n\n      <!-- ==================================================\n      CARDS\n      =================================================== -->\n\n      <div class=\"ymf-window\">\n\n        <div class=\"ymf-rail\">\n\n\n          <!-- 01 -->\n          <article class=\"ymf-card ymf-card-01\">\n\n            <div class=\"ymf-card-top\">\n              <span>METHOD \/ CLARITY<\/span>\n              <span>[01]<\/span>\n            <\/div>\n\n            <div class=\"ymf-content\">\n\n              <h3>\n                I SIMPLIFY COMPLEXITY\n                WITHOUT LOSING MEANING.\n              <\/h3>\n\n              <p>\n                I don't just execute,\n                I work as a project partner.\n              <\/p>\n\n            <\/div>\n\n            <div class=\"ymf-art ymf-art-01\">\n\n              <img decoding=\"async\"\n                src=\"https:\/\/www.yuliyapivnyak.it\/wp-content\/uploads\/2026\/05\/image_11-removebg-preview-1.svg\"\n                alt=\"\"\n              >\n\n              <div class=\"ymf-ring\"><\/div>\n\n            <\/div>\n\n            <div class=\"ymf-card-bottom\">\n              <span>UNDERSTAND FIRST \/ REMOVE LATER<\/span>\n              <b>01<\/b>\n            <\/div>\n\n          <\/article>\n\n\n          <!-- 02 -->\n          <article class=\"ymf-card ymf-card-02\">\n\n            <div class=\"ymf-card-top\">\n              <span>UX \/ STRUCTURE<\/span>\n              <span>[02]<\/span>\n            <\/div>\n\n            <div class=\"ymf-content\">\n\n              <h3>\n                I CREATE A CLEAR LOGIC\n                THAT GUIDES DECISIONS.\n              <\/h3>\n\n              <p>\n                I design the structure\n                so people know what to do next.\n              <\/p>\n\n            <\/div>\n\n            <div class=\"ymf-art ymf-art-02\">\n\n              <strong>UX<\/strong>\n\n              <img decoding=\"async\"\n                src=\"https:\/\/www.yuliyapivnyak.it\/wp-content\/uploads\/2026\/05\/Group-17.svg\"\n                alt=\"\"\n              >\n\n            <\/div>\n\n            <div class=\"ymf-card-bottom\">\n              <span>LOGIC \/ JOURNEY \/ DECISION<\/span>\n              <b>\u2192<\/b>\n            <\/div>\n\n          <\/article>\n\n\n          <!-- 03 -->\n          <article class=\"ymf-card ymf-card-03\">\n\n            <div class=\"ymf-card-top\">\n              <span>BUSINESS \/ FOCUS<\/span>\n              <span>[03]<\/span>\n            <\/div>\n\n            <div class=\"ymf-content ymf-content-narrow\">\n\n              <h3>\n                I DON'T DRAG OUT PROJECTS\n                OR INFLATE BUDGETS.\n              <\/h3>\n\n              <p>\n                I design around priorities,\n                timing and real objectives.\n              <\/p>\n\n            <\/div>\n\n            <div class=\"ymf-orange-zone\">\n              YU.\n            <\/div>\n\n            <div class=\"ymf-card-bottom\">\n              <span>TIME \/ BUDGET \/ OBJECTIVES<\/span>\n              <b>03<\/b>\n            <\/div>\n\n          <\/article>\n\n\n          <!-- 05 -->\n          <article class=\"ymf-card ymf-process-black ymf-card-05\">\n\n            <div class=\"ymf-card-top\">\n              <span>PROCESS \/ INPUT<\/span>\n              <span>[01]<\/span>\n            <\/div>\n\n            <div class=\"ymf-content\">\n\n              <h3>ANALYSIS<\/h3>\n\n              <p>\n                I understand the business\n                and its customers.\n              <\/p>\n\n            <\/div>\n\n            <div class=\"ymf-art ymf-art-05\">\n              <strong>01<\/strong>\n            <\/div>\n\n            <div class=\"ymf-card-bottom\">\n              <span>BUSINESS \/ CUSTOMER<\/span>\n              <b>01<\/b>\n            <\/div>\n\n          <\/article>\n\n\n          <!-- 06 -->\n          <article class=\"ymf-card ymf-process-black ymf-card-06\">\n\n            <div class=\"ymf-card-top\">\n              <span>PROCESS \/ ARCHITECTURE<\/span>\n              <span>[02]<\/span>\n            <\/div>\n\n            <div class=\"ymf-content\">\n\n              <h3>STRUCTURE<\/h3>\n\n              <p>\n                I design the logic\n                and the user journey.\n              <\/p>\n\n            <\/div>\n\n            <div class=\"ymf-art ymf-art-06\">\n              <i><\/i>\n              <i><\/i>\n              <i><\/i>\n            <\/div>\n\n            <div class=\"ymf-card-bottom\">\n              <span>FLOW \/ UX \/ ARCHITECTURE<\/span>\n              <b>02<\/b>\n            <\/div>\n\n          <\/article>\n\n\n          <!-- 07 -->\n          <article class=\"ymf-card ymf-process-black ymf-card-07\">\n\n            <div class=\"ymf-card-top\">\n              <span>PROCESS \/ MESSAGE<\/span>\n              <span>[03]<\/span>\n            <\/div>\n\n            <div class=\"ymf-content\">\n\n              <h3>COPY<\/h3>\n\n              <p>\n                I make the value clear.\n              <\/p>\n\n            <\/div>\n\n            <div class=\"ymf-art ymf-art-07\">\n              <strong>CLEAR.<\/strong>\n            <\/div>\n\n            <div class=\"ymf-card-bottom\">\n              <span>VALUE \/ MESSAGE<\/span>\n              <b>03<\/b>\n            <\/div>\n\n          <\/article>\n\n\n          <!-- 08 -->\n          <article class=\"ymf-card ymf-card-08\">\n\n            <div class=\"ymf-card-top\">\n              <span>PROCESS \/ VISUAL<\/span>\n              <span>[04]<\/span>\n            <\/div>\n\n            <div class=\"ymf-content\">\n\n              <h3>DESIGN<\/h3>\n\n              <p>\n                I create a visual system\n                that supports the content.\n              <\/p>\n\n            <\/div>\n\n            <div class=\"ymf-art ymf-art-08\">\n              <strong>DESIGN<\/strong>\n            <\/div>\n\n            <div class=\"ymf-card-bottom\">\n              <span>VISUAL \/ CONTENT<\/span>\n              <b>04<\/b>\n            <\/div>\n\n          <\/article>\n\n\n          <!-- 09 -->\n          <article class=\"ymf-card ymf-final ymf-card-09\">\n\n            <span class=\"ymf-screw tl\"><\/span>\n            <span class=\"ymf-screw tr\"><\/span>\n            <span class=\"ymf-screw bl\"><\/span>\n            <span class=\"ymf-screw br\"><\/span>\n\n            <div class=\"ymf-card-top\">\n              <span>PROCESS \/ OUTPUT<\/span>\n              <span>[05]<\/span>\n            <\/div>\n\n            <div class=\"ymf-content\">\n\n              <h3>\n                DEVELOPMENT\n                &amp; LAUNCH.\n              <\/h3>\n\n              <p>\n                A finished website,\n                ready to launch.\n              <\/p>\n\n            <\/div>\n\n            <div class=\"ymf-art ymf-art-09\">\n              <strong>05<\/strong>\n              <i><\/i>\n            <\/div>\n\n            <div class=\"ymf-card-bottom\">\n              <span>READY \/ LIVE<\/span>\n              <b>\u2192<\/b>\n            <\/div>\n\n          <\/article>\n\n        <\/div>\n\n      <\/div>\n\n\n      <!-- BOTTOM UI -->\n\n      <div class=\"ymf-scroll-label\">\n        <i><\/i>\n        SCROLL\n      <\/div>\n\n      <div class=\"ymf-counter\">\n        <strong class=\"ymf-current\">01<\/strong>\n        <i><\/i>\n        <span>03<\/span>\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n<style>\n\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&family=Khand:wght@500;600;700&display=swap');\n\n\n\/* =========================================================\nROOT\n========================================================= *\/\n\n#yu-method-flow{\n\n  --paper:#F4F2EC;\n  --black:#111111;\n  --blue:#4058CF;\n  --orange:#EA6B3A;\n  --white:#F8F7F3;\n\n  position:relative;\n\n  width:100vw;\n  max-width:none;\n\n  margin-left:calc(50% - 50vw);\n  margin-right:calc(50% - 50vw);\n\n  overflow:clip;\n\n  background:var(--paper);\n\n  color:var(--black);\n}\n\n\n#yu-method-flow *,\n#yu-method-flow *::before,\n#yu-method-flow *::after{\n  box-sizing:border-box;\n}\n\n\n\/* =========================================================\nTRACK \/ STAGE\n========================================================= *\/\n\n#yu-method-flow .ymf-track{\n  height:680vh;\n}\n\n\n#yu-method-flow .ymf-stage{\n\n  position:sticky;\n\n  top:0;\n\n  width:100vw;\n\n  height:100vh;\n  height:100svh;\n\n  min-height:650px;\n\n  overflow:hidden;\n\n  isolation:isolate;\n}\n\n\n\/* =========================================================\nBACKGROUNDS\n========================================================= *\/\n\n#yu-method-flow .ymf-bg{\n\n  position:absolute;\n\n  inset:0;\n\n  z-index:-20;\n}\n\n\n#yu-method-flow .ymf-bg-light{\n  background:var(--paper);\n}\n\n\n#yu-method-flow .ymf-bg-dark{\n\n  background:#101010;\n\n  opacity:0;\n}\n\n\n\/* =========================================================\nSCENES\n========================================================= *\/\n\n#yu-method-flow .ymf-scene{\n\n  position:absolute;\n\n  inset:0;\n\n  z-index:1;\n\n  pointer-events:none;\n}\n\n\n#yu-method-flow .ymf-scene-dark{\n\n  opacity:0;\n\n  color:var(--paper);\n}\n\n\n\/* =========================================================\nTOP CONTEXT\n========================================================= *\/\n\n#yu-method-flow .ymf-context{\n\n  position:absolute;\n\n  top:28px;\n\n  left:40px;\n  right:40px;\n\n  display:flex;\n\n  justify-content:space-between;\n\n  gap:40px;\n\n  font-family:\"Inter\",sans-serif;\n\n  font-size:9px;\n\n  line-height:1.4;\n\n  font-weight:700;\n\n  letter-spacing:.025em;\n\n  text-transform:uppercase;\n}\n\n\n#yu-method-flow .ymf-context span:last-child{\n\n  width:min(440px,38vw);\n\n  text-align:right;\n}\n\n\n\/* =========================================================\nGIANT TYPE\n========================================================= *\/\n\n#yu-method-flow .ymf-big-title{\n\n  position:absolute;\n\n  z-index:2;\n\n  left:50%;\n\n  bottom:245px;\n\n  width:100vw;\n\n  transform:translateX(-50%);\n\n  transform-origin:center bottom;\n\n  text-align:center;\n\n  white-space:nowrap;\n\n  font-family:\"Khand\",sans-serif;\n\n  font-size:clamp(190px,21vw,405px);\n\n  line-height:.60;\n\n  letter-spacing:-.055em;\n\n  font-weight:600;\n\n  text-transform:uppercase;\n\n  pointer-events:none;\n\n  will-change:transform;\n}\n\n\n#yu-method-flow\n.ymf-scene-light\n.ymf-big-title{\n  color:#111111;\n}\n\n\n#yu-method-flow\n.ymf-scene-dark\n.ymf-big-title{\n  color:#F4F2EC;\n}\n\n\n\/* =========================================================\n5% \u2014 DESKTOP\n========================================================= *\/\n\n#yu-method-flow .ymf-five{\n\n  position:absolute;\n\n  z-index:8;\n\n  top:20%;\n\n  left:50%;\n\n  width:min(300px,17vw);\n\n  transform:translate(-50%,-50%);\n\n  color:#111;\n\n  pointer-events:none;\n\n  will-change:transform,opacity;\n}\n\n\n#yu-method-flow .ymf-five img{\n\n  position:relative;\n\n  z-index:2;\n\n  display:block;\n\n  width:100%;\n  height:auto;\n\n  transition:filter .35s ease;\n}\n\n\n\/* LEFT COPY *\/\n\n#yu-method-flow .ymf-five-business{\n\n  position:absolute;\n\n  z-index:5;\n\n  right:calc(100% + 30px);\n\n  top:31%;\n\n  width:185px;\n\n  display:flex;\n\n  flex-direction:column;\n\n  align-items:flex-end;\n\n  gap:5px;\n\n  text-align:right;\n\n  color:#111;\n\n  transition:color .35s ease;\n}\n\n\n#yu-method-flow .ymf-five-business span{\n\n  font-family:\"Khand\",sans-serif;\n\n  font-size:16px;\n\n  line-height:1;\n\n  font-weight:600;\n}\n\n\n#yu-method-flow .ymf-five-business strong{\n\n  font-family:\"Inter\",sans-serif;\n\n  font-size:11px;\n\n  line-height:1.32;\n\n  font-weight:700;\n\n  letter-spacing:.035em;\n\n  text-transform:uppercase;\n}\n\n\n#yu-method-flow .ymf-five-business::after{\n\n  content:\"\";\n\n  position:absolute;\n\n  top:3px;\n\n  right:-18px;\n\n  width:1px;\n\n  height:52px;\n\n  background:rgba(17,17,17,.34);\n\n  transition:background .35s ease;\n}\n\n\n\/* RIGHT COPY *\/\n\n#yu-method-flow .ymf-five-work{\n\n  position:absolute;\n\n  z-index:5;\n\n  left:calc(100% + 30px);\n\n  bottom:18%;\n\n  width:180px;\n\n  color:#111;\n\n  font-family:\"Khand\",sans-serif;\n\n  font-size:30px;\n\n  line-height:.87;\n\n  font-weight:600;\n\n  letter-spacing:-.015em;\n\n  text-align:left;\n\n  text-transform:uppercase;\n\n  transition:color .35s ease;\n}\n\n\n\/* =========================================================\n5% DARK MODE\n========================================================= *\/\n\n#yu-method-flow.is-dark .ymf-five img{\n\n  filter:\n    brightness(0)\n    invert(1);\n}\n\n\n#yu-method-flow.is-dark .ymf-five-business,\n#yu-method-flow.is-dark .ymf-five-work{\n\n  color:#F8F7F3;\n}\n\n\n#yu-method-flow.is-dark\n.ymf-five-business::after{\n\n  background:rgba(255,255,255,.48);\n}\n\n\n\/* =========================================================\nCARDS WINDOW\n========================================================= *\/\n\n#yu-method-flow .ymf-window{\n\n  position:absolute;\n\n  z-index:20;\n\n  left:0;\n\n  bottom:30px;\n\n  width:100vw;\n\n  overflow:visible;\n}\n\n\n\/* =========================================================\nRAIL\n========================================================= *\/\n\n#yu-method-flow .ymf-rail{\n\n  display:flex;\n\n  align-items:center;\n\n  gap:20px;\n\n  width:max-content;\n\n  padding-left:6vw;\n  padding-right:6vw;\n\n  will-change:transform;\n}\n\n\n\/* =========================================================\nALL CARDS\n========================================================= *\/\n\n#yu-method-flow .ymf-card{\n\n  position:relative;\n\n  flex:0 0 620px;\n\n  width:620px;\n  min-width:620px;\n  max-width:620px;\n\n  height:350px;\n  min-height:350px;\n  max-height:350px;\n\n  padding:32px 34px;\n\n  overflow:hidden;\n\n  border-radius:20px;\n\n  box-shadow:\n    0 28px 80px\n    rgba(0,0,0,.16);\n\n  transform-origin:center;\n\n  will-change:transform,opacity;\n}\n\n\n\/* =========================================================\nCARD TOP\n========================================================= *\/\n\n#yu-method-flow .ymf-card-top{\n\n  position:relative;\n\n  z-index:10;\n\n  display:flex;\n\n  justify-content:space-between;\n\n  align-items:flex-start;\n\n  gap:20px;\n\n  font-family:\"Inter\",sans-serif;\n\n  font-size:8px;\n\n  line-height:1;\n\n  font-weight:700;\n\n  letter-spacing:.03em;\n\n  text-transform:uppercase;\n}\n\n\n#yu-method-flow\n.ymf-card-top span:last-child{\n\n  color:var(--blue);\n\n  font-size:10px;\n}\n\n\n\/* =========================================================\nCONTENT\n========================================================= *\/\n\n#yu-method-flow .ymf-content{\n\n  position:relative;\n\n  z-index:10;\n\n  width:54%;\n\n  margin-top:38px;\n}\n\n\n#yu-method-flow\n.ymf-content-narrow{\n  width:48%;\n}\n\n\n#yu-method-flow .ymf-content h3{\n\n  margin:0;\n\n  font-family:\"Khand\",sans-serif;\n\n  font-size:25px;\n\n  line-height:1;\n\n  font-weight:600;\n\n  letter-spacing:-.01em;\n\n  text-transform:uppercase;\n}\n\n\n#yu-method-flow .ymf-content p{\n\n  margin:14px 0 0;\n\n  font-family:\"Inter\",sans-serif;\n\n  font-size:18px;\n\n  line-height:1.35;\n\n  font-weight:400;\n}\n\n\n\/* =========================================================\nART\n========================================================= *\/\n\n#yu-method-flow .ymf-art{\n\n  position:absolute;\n\n  z-index:1;\n\n  top:0;\n\n  right:0;\n\n  width:42%;\n\n  height:100%;\n\n  overflow:hidden;\n\n  pointer-events:none;\n}\n\n\n\/* =========================================================\nCARD BOTTOM\n========================================================= *\/\n\n#yu-method-flow .ymf-card-bottom{\n\n  position:absolute;\n\n  z-index:12;\n\n  left:34px;\n  right:34px;\n  bottom:24px;\n\n  display:flex;\n\n  align-items:flex-end;\n\n  justify-content:space-between;\n\n  gap:20px;\n}\n\n\n#yu-method-flow\n.ymf-card-bottom > span{\n\n  max-width:70%;\n\n  font-family:\"Inter\",sans-serif;\n\n  font-size:7px;\n\n  line-height:1.2;\n\n  font-weight:700;\n\n  letter-spacing:.03em;\n\n  text-transform:uppercase;\n\n  opacity:.72;\n}\n\n\n#yu-method-flow .ymf-card-bottom b{\n\n  flex:none;\n\n  width:52px;\n  height:52px;\n\n  display:flex;\n\n  align-items:center;\n\n  justify-content:center;\n\n  border-radius:50%;\n\n  background:var(--blue);\n\n  color:#fff;\n\n  font-family:\"Khand\",sans-serif;\n\n  font-size:19px;\n\n  line-height:1;\n\n  font-weight:600;\n}\n\n\n\/* =========================================================\nCARD 01\n========================================================= *\/\n\n#yu-method-flow .ymf-card-01{\n\n  background:#F8F7F3;\n\n  color:#111;\n\n  border:1px solid rgba(17,17,17,.07);\n}\n\n\n#yu-method-flow .ymf-art-01 img{\n\n  position:absolute;\n\n  left:12%;\n\n  top:25%;\n\n  width:68%;\n\n  max-height:130px;\n\n  object-fit:contain;\n}\n\n\n#yu-method-flow .ymf-ring{\n\n  position:absolute;\n\n  right:-28%;\n\n  bottom:-30%;\n\n  width:270px;\n\n  height:270px;\n\n  border-radius:50%;\n\n  border:44px solid rgba(64,88,207,.15);\n}\n\n\n\/* =========================================================\nCARD 02\n========================================================= *\/\n\n#yu-method-flow .ymf-card-02{\n\n  background:var(--blue);\n\n  color:#fff;\n\n  box-shadow:\n    0 30px 82px\n    rgba(36,56,153,.28);\n}\n\n\n#yu-method-flow\n.ymf-card-02\n.ymf-card-top span:last-child{\n\n  color:#fff;\n\n  opacity:.85;\n}\n\n\n#yu-method-flow .ymf-art-02 strong{\n\n  position:absolute;\n\n  left:50%;\n  top:48%;\n\n  transform:translate(-50%,-50%);\n\n  font-family:\"Khand\",sans-serif;\n\n  font-size:145px;\n\n  line-height:.7;\n\n  font-weight:700;\n\n  color:#fff;\n\n  opacity:.92;\n}\n\n\n#yu-method-flow .ymf-art-02 img{\n\n  position:absolute;\n\n  right:2%;\n\n  bottom:4%;\n\n  width:34%;\n\n  filter:\n    brightness(0)\n    invert(1);\n\n  opacity:.15;\n}\n\n\n#yu-method-flow\n.ymf-card-02\n.ymf-card-bottom b{\n\n  background:var(--orange);\n\n  color:#111;\n}\n\n\n\/* =========================================================\nCARD 03\n========================================================= *\/\n\n#yu-method-flow .ymf-card-03{\n\n  background:#F8F7F3;\n\n  color:#111;\n\n  border:1px solid rgba(17,17,17,.07);\n}\n\n\n#yu-method-flow .ymf-orange-zone{\n\n  position:absolute;\n\n  z-index:1;\n\n  top:0;\n  right:0;\n  bottom:0;\n\n  width:43%;\n\n  display:flex;\n\n  align-items:center;\n\n  justify-content:center;\n\n  background:var(--orange);\n\n  font-family:\"Khand\",sans-serif;\n\n  font-size:140px;\n\n  line-height:.8;\n\n  font-weight:600;\n\n  color:#111;\n}\n\n\n\/* =========================================================\nCARD 04 PLEXY\n========================================================= *\/\n\n#yu-method-flow .ymf-plexy{\n\n  color:#111;\n\n  border:1px solid rgba(255,255,255,.94);\n\n  background:\n    linear-gradient(\n      135deg,\n      rgba(248,249,255,.99),\n      rgba(213,220,248,.95) 50%,\n      rgba(246,247,252,.99)\n    );\n\n  backdrop-filter:\n    blur(18px)\n    saturate(118%);\n\n  -webkit-backdrop-filter:\n    blur(18px)\n    saturate(118%);\n\n  box-shadow:\n    0 30px 90px rgba(0,0,0,.22),\n    inset 0 0 0 1px rgba(255,255,255,.72);\n}\n\n\n#yu-method-flow .ymf-plexy::after,\n#yu-method-flow .ymf-final::after{\n\n  content:\"\";\n\n  position:absolute;\n\n  z-index:3;\n\n  inset:8px;\n\n  border:1px solid rgba(255,255,255,.62);\n\n  border-radius:14px;\n\n  pointer-events:none;\n}\n\n\n\/* =========================================================\nBLACK PROCESS CARDS\n========================================================= *\/\n\n#yu-method-flow .ymf-process-black{\n\n  background:\n    linear-gradient(\n      135deg,\n      #191919 0%,\n      #101010 52%,\n      #080808 100%\n    );\n\n  color:#F4F2EC;\n\n  border:1px solid rgba(255,255,255,.10);\n\n  box-shadow:\n    0 30px 90px rgba(0,0,0,.42),\n    inset 0 0 0 1px rgba(255,255,255,.025);\n}\n\n\n#yu-method-flow\n.ymf-process-black\n.ymf-card-top{\n\n  color:rgba(244,242,236,.68);\n}\n\n\n#yu-method-flow\n.ymf-process-black\n.ymf-card-top span:last-child{\n\n  color:#8294FF;\n}\n\n\n#yu-method-flow\n.ymf-process-black\n.ymf-content h3{\n\n  color:#F8F7F3;\n}\n\n\n#yu-method-flow\n.ymf-process-black\n.ymf-content p{\n\n  color:rgba(248,247,243,.82);\n}\n\n\n#yu-method-flow\n.ymf-process-black\n.ymf-card-bottom > span{\n\n  color:rgba(248,247,243,.76);\n}\n\n\n\/* =========================================================\n05\n========================================================= *\/\n\n#yu-method-flow .ymf-art-05{\n\n  display:flex;\n\n  align-items:center;\n\n  justify-content:center;\n}\n\n\n#yu-method-flow .ymf-art-05 strong{\n\n  font-family:\"Khand\",sans-serif;\n\n  font-size:180px;\n\n  line-height:.7;\n\n  font-weight:600;\n\n  color:rgba(91,113,224,.30);\n}\n\n\n\/* =========================================================\n06\n========================================================= *\/\n\n#yu-method-flow .ymf-art-06 i{\n\n  position:absolute;\n\n  height:4px;\n\n  border-radius:999px;\n\n  background:#5A72E4;\n\n  opacity:.72;\n}\n\n\n#yu-method-flow\n.ymf-art-06 i:nth-child(1){\n\n  width:70%;\n\n  right:-5%;\n\n  top:35%;\n}\n\n\n#yu-method-flow\n.ymf-art-06 i:nth-child(2){\n\n  width:48%;\n\n  right:10%;\n\n  top:50%;\n}\n\n\n#yu-method-flow\n.ymf-art-06 i:nth-child(3){\n\n  width:76%;\n\n  right:-10%;\n\n  top:65%;\n}\n\n\n\/* =========================================================\n07\n========================================================= *\/\n\n#yu-method-flow .ymf-art-07{\n\n  display:flex;\n\n  align-items:center;\n\n  justify-content:center;\n}\n\n\n#yu-method-flow .ymf-art-07 strong{\n\n  font-family:\"Khand\",sans-serif;\n\n  font-size:115px;\n\n  line-height:.7;\n\n  font-weight:600;\n\n  color:rgba(255,255,255,.10);\n}\n\n\n\/* =========================================================\n08\n========================================================= *\/\n\n#yu-method-flow .ymf-card-08{\n\n  background:var(--orange);\n\n  color:#111;\n\n  box-shadow:\n    0 30px 82px rgba(0,0,0,.26);\n}\n\n\n#yu-method-flow\n.ymf-card-08\n.ymf-card-top span:last-child{\n\n  color:#111;\n}\n\n\n#yu-method-flow .ymf-art-08{\n\n  display:flex;\n\n  align-items:center;\n\n  justify-content:center;\n}\n\n\n#yu-method-flow .ymf-art-08 strong{\n\n  font-family:\"Khand\",sans-serif;\n\n  font-size:130px;\n\n  line-height:.7;\n\n  font-weight:600;\n\n  color:rgba(17,17,17,.12);\n}\n\n\n#yu-method-flow\n.ymf-card-08\n.ymf-card-bottom b{\n\n  background:#111;\n\n  color:#fff;\n}\n\n\n\/* =========================================================\n09\n========================================================= *\/\n\n#yu-method-flow .ymf-final{\n\n  color:#fff;\n\n  border:1px solid rgba(255,255,255,.68);\n\n  background:\n    linear-gradient(\n      135deg,\n      #5369D9,\n      #4058CF 52%,\n      #7589E4\n    );\n\n  backdrop-filter:blur(18px);\n\n  -webkit-backdrop-filter:blur(18px);\n\n  box-shadow:\n    0 35px 100px rgba(0,0,0,.34),\n    inset 0 0 0 1px rgba(255,255,255,.38);\n}\n\n\n#yu-method-flow\n.ymf-final\n.ymf-card-top span:last-child{\n\n  color:#fff;\n\n  opacity:.86;\n}\n\n\n#yu-method-flow .ymf-art-09{\n\n  display:flex;\n\n  align-items:center;\n\n  justify-content:center;\n}\n\n\n#yu-method-flow .ymf-art-09 strong{\n\n  position:relative;\n\n  z-index:2;\n\n  font-family:\"Khand\",sans-serif;\n\n  font-size:180px;\n\n  line-height:.7;\n\n  font-weight:600;\n\n  color:rgba(255,255,255,.14);\n}\n\n\n#yu-method-flow .ymf-art-09 i{\n\n  position:absolute;\n\n  right:-25%;\n\n  bottom:-38%;\n\n  width:280px;\n  height:280px;\n\n  border-radius:50%;\n\n  background:#BDC8FF;\n\n  filter:blur(58px);\n\n  opacity:.38;\n}\n\n\n\/* =========================================================\nSCREWS\n========================================================= *\/\n\n#yu-method-flow .ymf-screw{\n\n  position:absolute;\n\n  z-index:30;\n\n  width:14px;\n  height:14px;\n\n  border-radius:50%;\n\n  background:\n    radial-gradient(\n      circle at 30% 25%,\n      #fff 0 6%,\n      #ABB0B2 16%,\n      #444 43%,\n      #111 72%,\n      #020202 100%\n    );\n\n  box-shadow:\n    0 1px 3px\n    rgba(0,0,0,.58);\n}\n\n\n#yu-method-flow .ymf-screw::after{\n\n  content:\"\";\n\n  position:absolute;\n\n  left:3px;\n  right:3px;\n  top:7px;\n\n  height:1px;\n\n  background:rgba(255,255,255,.55);\n\n  transform:rotate(-38deg);\n}\n\n\n#yu-method-flow .ymf-screw.tl{\n  top:12px;\n  left:12px;\n}\n\n\n#yu-method-flow .ymf-screw.tr{\n  top:12px;\n  right:12px;\n}\n\n\n#yu-method-flow .ymf-screw.bl{\n  bottom:12px;\n  left:12px;\n}\n\n\n#yu-method-flow .ymf-screw.br{\n  right:12px;\n  bottom:12px;\n}\n\n\n\/* =========================================================\nBOTTOM UI\n========================================================= *\/\n\n#yu-method-flow .ymf-scroll-label{\n\n  position:absolute;\n\n  z-index:100;\n\n  left:40px;\n\n  bottom:10px;\n\n  display:flex;\n\n  align-items:center;\n\n  gap:9px;\n\n  font-family:\"Inter\",sans-serif;\n\n  font-size:8px;\n\n  font-weight:700;\n\n  text-transform:uppercase;\n}\n\n\n#yu-method-flow\n.ymf-scroll-label > i{\n\n  width:8px;\n  height:8px;\n\n  border-radius:50%;\n\n  background:var(--orange);\n}\n\n\n#yu-method-flow .ymf-counter{\n\n  position:absolute;\n\n  z-index:100;\n\n  right:40px;\n\n  bottom:9px;\n\n  display:grid;\n\n  grid-template-columns:\n    auto 60px auto;\n\n  gap:9px;\n\n  align-items:center;\n\n  font-family:\"Inter\",sans-serif;\n\n  font-size:8px;\n\n  font-weight:700;\n}\n\n\n#yu-method-flow\n.ymf-counter strong{\n\n  color:var(--blue);\n\n  font-size:10px;\n}\n\n\n#yu-method-flow\n.ymf-counter > i{\n\n  height:1px;\n\n  background:rgba(17,17,17,.28);\n}\n\n\n#yu-method-flow.is-dark\n.ymf-scroll-label,\n#yu-method-flow.is-dark\n.ymf-counter{\n\n  color:#fff;\n}\n\n\n#yu-method-flow.is-dark\n.ymf-counter strong{\n\n  color:#8294FF;\n}\n\n\n#yu-method-flow.is-dark\n.ymf-counter > i{\n\n  background:rgba(255,255,255,.34);\n}\n\n\n\/* =========================================================\nTABLET\n========================================================= *\/\n\n@media(max-width:1024px) and (min-width:768px){\n\n  #yu-method-flow .ymf-big-title{\n\n    bottom:245px;\n\n    font-size:\n      clamp(135px,20vw,220px);\n  }\n\n\n  #yu-method-flow .ymf-five{\n\n    top:18%;\n\n    width:min(245px,25vw);\n  }\n\n\n  #yu-method-flow .ymf-five-business{\n\n    right:auto;\n\n    left:50%;\n\n    top:-38px;\n\n    width:max-content;\n\n    transform:translateX(-50%);\n\n    flex-direction:row;\n\n    align-items:center;\n\n    gap:8px;\n\n    text-align:center;\n  }\n\n\n  #yu-method-flow .ymf-five-business span{\n\n    font-size:15px;\n  }\n\n\n  #yu-method-flow .ymf-five-business strong{\n\n    font-size:10px;\n\n    line-height:1.15;\n\n    text-align:left;\n  }\n\n\n  #yu-method-flow\n  .ymf-five-business::after{\n\n    top:auto;\n\n    right:auto;\n\n    left:50%;\n\n    bottom:-12px;\n\n    width:42px;\n\n    height:1px;\n\n    transform:translateX(-50%);\n\n    background:rgba(17,17,17,.36);\n  }\n\n\n  #yu-method-flow.is-dark\n  .ymf-five-business::after{\n\n    background:rgba(255,255,255,.48);\n  }\n\n\n  #yu-method-flow .ymf-five-work{\n\n    left:auto;\n\n    right:-105px;\n\n    bottom:4%;\n\n    width:120px;\n\n    font-size:24px;\n  }\n\n\n  #yu-method-flow .ymf-card{\n\n    flex:0 0 560px;\n\n    width:560px;\n    min-width:560px;\n    max-width:560px;\n\n    height:350px;\n    min-height:350px;\n    max-height:350px;\n  }\n\n}\n\n\n\/* =========================================================\nMOBILE\n========================================================= *\/\n\n@media(max-width:767px){\n\n  #yu-method-flow .ymf-track{\n    height:610vh;\n  }\n\n\n  #yu-method-flow .ymf-stage{\n    min-height:620px;\n  }\n\n\n  #yu-method-flow .ymf-context{\n\n    top:14px;\n\n    left:18px;\n    right:18px;\n\n    display:grid;\n\n    grid-template-columns:\n      .72fr 1.28fr;\n\n    gap:14px;\n\n    font-size:6px;\n\n    line-height:1.35;\n  }\n\n\n  #yu-method-flow\n  .ymf-context span:last-child{\n\n    width:auto;\n\n    text-align:right;\n  }\n\n\n  #yu-method-flow .ymf-five{\n\n    top:18%;\n\n    width:min(165px,40vw);\n  }\n\n\n  #yu-method-flow .ymf-five-business{\n\n    right:auto;\n\n    left:50%;\n\n    top:-38px;\n\n    width:190px;\n\n    transform:translateX(-50%);\n\n    flex-direction:row;\n\n    align-items:center;\n\n    justify-content:center;\n\n    gap:8px;\n\n    text-align:center;\n  }\n\n\n  #yu-method-flow .ymf-five-business span{\n\n    font-size:14px;\n\n    line-height:1;\n  }\n\n\n  #yu-method-flow .ymf-five-business strong{\n\n    font-size:9px;\n\n    line-height:1.12;\n\n    text-align:left;\n  }\n\n\n  #yu-method-flow\n  .ymf-five-business::after{\n\n    top:auto;\n\n    right:auto;\n\n    left:50%;\n\n    bottom:-10px;\n\n    width:36px;\n\n    height:1px;\n\n    transform:translateX(-50%);\n\n    background:rgba(17,17,17,.40);\n  }\n\n\n  #yu-method-flow.is-dark\n  .ymf-five-business::after{\n\n    background:rgba(255,255,255,.50);\n  }\n\n\n  #yu-method-flow .ymf-five-work{\n\n    left:58%;\n\n    bottom:-38px;\n\n    width:120px;\n\n    font-size:21px;\n\n    line-height:.86;\n\n    text-align:left;\n  }\n\n\n  #yu-method-flow .ymf-big-title{\n\n    bottom:242px;\n\n    font-size:\n      clamp(92px,29vw,155px);\n\n    line-height:.64;\n  }\n\n\n  #yu-method-flow .ymf-window{\n\n    bottom:30px;\n  }\n\n\n  #yu-method-flow .ymf-rail{\n\n    gap:20px;\n\n    padding-left:7vw;\n    padding-right:7vw;\n  }\n\n\n  #yu-method-flow .ymf-card{\n\n    flex:0 0 86vw;\n\n    width:86vw;\n    min-width:86vw;\n    max-width:86vw;\n\n    height:350px;\n    min-height:350px;\n    max-height:350px;\n\n    padding:23px;\n\n    border-radius:20px;\n  }\n\n\n  #yu-method-flow .ymf-content{\n\n    width:58%;\n\n    margin-top:38px;\n  }\n\n\n  #yu-method-flow\n  .ymf-content-narrow{\n\n    width:51%;\n  }\n\n\n  #yu-method-flow .ymf-content h3{\n\n    font-size:25px;\n\n    line-height:.96;\n  }\n\n\n  #yu-method-flow .ymf-content p{\n\n    margin-top:11px;\n\n    font-size:16px;\n\n    line-height:1.3;\n  }\n\n\n  #yu-method-flow .ymf-art{\n    width:39%;\n  }\n\n\n  #yu-method-flow .ymf-orange-zone{\n\n    width:41%;\n\n    font-size:\n      clamp(78px,24vw,120px);\n  }\n\n\n  #yu-method-flow\n  .ymf-art-02 strong{\n\n    font-size:\n      clamp(90px,27vw,135px);\n  }\n\n\n  #yu-method-flow\n  .ymf-art-05 strong{\n\n    font-size:\n      clamp(95px,29vw,145px);\n  }\n\n\n  #yu-method-flow\n  .ymf-art-07 strong{\n\n    font-size:\n      clamp(55px,17vw,85px);\n  }\n\n\n  #yu-method-flow\n  .ymf-art-08 strong{\n\n    font-size:\n      clamp(65px,20vw,100px);\n  }\n\n\n  #yu-method-flow\n  .ymf-art-09 strong{\n\n    font-size:\n      clamp(95px,29vw,145px);\n  }\n\n\n  #yu-method-flow .ymf-card-bottom{\n\n    left:23px;\n    right:23px;\n    bottom:20px;\n  }\n\n\n  #yu-method-flow\n  .ymf-card-bottom b{\n\n    width:46px;\n    height:46px;\n  }\n\n\n  #yu-method-flow .ymf-scroll-label{\n\n    left:18px;\n\n    bottom:8px;\n\n    font-size:6px;\n  }\n\n\n  #yu-method-flow .ymf-counter{\n\n    right:18px;\n\n    bottom:7px;\n\n    grid-template-columns:\n      auto 28px auto;\n\n    gap:6px;\n\n    font-size:6px;\n  }\n\n}\n\n\n\/* =========================================================\nSMALL MOBILE\n========================================================= *\/\n\n@media(max-width:390px){\n\n  #yu-method-flow .ymf-five{\n\n    top:17%;\n\n    width:38vw;\n  }\n\n\n  #yu-method-flow .ymf-five-business{\n\n    top:-34px;\n\n    width:170px;\n  }\n\n\n  #yu-method-flow\n  .ymf-five-business span{\n\n    font-size:13px;\n  }\n\n\n  #yu-method-flow\n  .ymf-five-business strong{\n\n    font-size:8px;\n  }\n\n\n  #yu-method-flow .ymf-five-work{\n\n    left:55%;\n\n    bottom:-34px;\n\n    width:105px;\n\n    font-size:18px;\n  }\n\n\n  #yu-method-flow .ymf-big-title{\n\n    bottom:240px;\n\n    font-size:\n      clamp(82px,28vw,118px);\n  }\n\n\n  #yu-method-flow .ymf-card{\n\n    flex-basis:86vw;\n\n    width:86vw;\n    min-width:86vw;\n    max-width:86vw;\n\n    height:350px;\n    min-height:350px;\n    max-height:350px;\n\n    padding:21px;\n  }\n\n\n  #yu-method-flow .ymf-content{\n\n    width:60%;\n\n    margin-top:35px;\n  }\n\n\n  #yu-method-flow\n  .ymf-content h3{\n\n    font-size:23px;\n  }\n\n\n  #yu-method-flow\n  .ymf-content p{\n\n    font-size:15px;\n  }\n\n}\n\n\n\/* =========================================================\nCOPY 5% \u2014 FINAL RESPONSIVE\n========================================================= *\/\n\n#yu-method-flow .ymf-five-business{\n  width:250px;\n}\n\n#yu-method-flow .ymf-five-business span,\n#yu-method-flow .ymf-five-business strong{\n\n  display:block;\n\n  font-family:\"Khand\",sans-serif;\n\n  font-size:19px;\n\n  line-height:.96;\n\n  font-weight:600;\n\n  letter-spacing:-.012em;\n\n  text-transform:uppercase;\n\n  text-align:right;\n}\n\n\n@media(max-width:1024px) and (min-width:768px){\n\n  #yu-method-flow .ymf-five-business{\n\n    right:calc(100% + 18px);\n\n    left:auto;\n\n    top:18%;\n\n    width:205px;\n\n    transform:none;\n\n    display:block;\n\n    text-align:right;\n  }\n\n\n  #yu-method-flow .ymf-five-business span,\n  #yu-method-flow .ymf-five-business strong{\n\n    font-size:16px;\n\n    line-height:.96;\n\n    text-align:right;\n  }\n\n\n  #yu-method-flow .ymf-five-business::after{\n\n    top:1px;\n\n    right:-12px;\n\n    left:auto;\n\n    bottom:auto;\n\n    width:1px;\n\n    height:58px;\n\n    transform:none;\n  }\n\n}\n\n\n@media(max-width:767px){\n\n  #yu-method-flow .ymf-five-business{\n\n    right:calc(100% + 8px);\n\n    left:auto;\n\n    top:7%;\n\n    width:min(132px,32vw);\n\n    transform:none;\n\n    display:block;\n\n    text-align:right;\n  }\n\n\n  #yu-method-flow .ymf-five-business span,\n  #yu-method-flow .ymf-five-business strong{\n\n    font-size:13px;\n\n    line-height:.95;\n\n    text-align:right;\n  }\n\n\n  #yu-method-flow .ymf-five-business::after{\n\n    top:1px;\n\n    right:-6px;\n\n    left:auto;\n\n    bottom:auto;\n\n    width:1px;\n\n    height:48px;\n\n    transform:none;\n  }\n\n}\n\n\n@media(max-width:390px){\n\n  #yu-method-flow .ymf-five-business{\n\n    right:calc(100% + 6px);\n\n    left:auto;\n\n    top:6%;\n\n    width:min(112px,30vw);\n\n    transform:none;\n  }\n\n\n  #yu-method-flow .ymf-five-business span,\n  #yu-method-flow .ymf-five-business strong{\n\n    font-size:11.5px;\n\n    line-height:.95;\n  }\n\n}\n\n\n\/* =========================================================\nHEADER STICKY SAFE AREA\n========================================================= *\/\n\n#yu-method-flow .ymf-context{\n  top:118px;\n}\n\n\n#yu-method-flow .ymf-five{\n  top:25%;\n}\n\n\n@media(max-width:1024px) and (min-width:768px){\n\n  #yu-method-flow .ymf-context{\n    top:102px;\n  }\n\n  #yu-method-flow .ymf-five{\n    top:24%;\n  }\n\n}\n\n\n@media(max-width:767px){\n\n  #yu-method-flow .ymf-context{\n    top:96px;\n  }\n\n  #yu-method-flow .ymf-five{\n    top:23%;\n  }\n\n}\n\n\n@media(max-width:390px){\n\n  #yu-method-flow .ymf-context{\n    top:92px;\n  }\n\n  #yu-method-flow .ymf-five{\n    top:22.5%;\n  }\n\n}\n\n\n\/* =========================================================\nMOBILE REFINEMENT\n========================================================= *\/\n\n@media(max-width:767px){\n\n  #yu-method-flow .ymf-context{\n\n    left:10px;\n\n    right:10px;\n\n    top:104px;\n  }\n\n\n  #yu-method-flow .ymf-five{\n\n    top:25.5%;\n\n    left:50%;\n\n    width:min(168px,42vw);\n  }\n\n\n  #yu-method-flow .ymf-five-business{\n\n    right:calc(100% + 8px);\n\n    left:auto;\n\n    top:7%;\n\n    width:min(132px,32vw);\n\n    transform:none;\n\n    text-align:right;\n  }\n\n\n  #yu-method-flow .ymf-five-business span,\n  #yu-method-flow .ymf-five-business strong{\n\n    font-size:13px;\n\n    line-height:.98;\n  }\n\n\n  #yu-method-flow .ymf-five-business::after{\n\n    top:2px;\n\n    right:-6px;\n\n    left:auto;\n\n    width:1px;\n\n    height:48px;\n  }\n\n\n  #yu-method-flow .ymf-five-work{\n\n    left:calc(100% + 8px);\n\n    right:auto;\n\n    bottom:8%;\n\n    width:min(92px,23vw);\n\n    font-size:20px;\n\n    line-height:.86;\n  }\n\n}\n\n\n@media(max-width:390px){\n\n  #yu-method-flow .ymf-context{\n\n    left:10px;\n\n    right:10px;\n\n    top:100px;\n  }\n\n\n  #yu-method-flow .ymf-five{\n\n    top:25%;\n\n    left:50%;\n\n    width:40vw;\n  }\n\n\n  #yu-method-flow .ymf-five-business{\n\n    right:calc(100% + 6px);\n\n    left:auto;\n\n    top:6%;\n\n    width:min(110px,29vw);\n\n    font-size:11.5px;\n\n    line-height:.97;\n  }\n\n\n  #yu-method-flow .ymf-five-business span,\n  #yu-method-flow .ymf-five-business strong{\n\n    font-size:11.5px;\n\n    line-height:.97;\n  }\n\n\n  #yu-method-flow .ymf-five-work{\n\n    left:calc(100% + 6px);\n\n    right:auto;\n\n    bottom:7%;\n\n    width:min(80px,21vw);\n\n    font-size:18px;\n\n    line-height:.86;\n  }\n\n}\n\n\n\/* =========================================================\nCHAPTER BREAK\n========================================================= *\/\n\n#yu-method-flow .ymf-card-03{\n\n  margin-right:\n    clamp(420px,42vw,760px);\n}\n\n\n@media(max-width:1024px) and (min-width:768px){\n\n  #yu-method-flow .ymf-card-03{\n    margin-right:48px;\n  }\n\n}\n\n\n@media(max-width:767px){\n\n  #yu-method-flow .ymf-card-03{\n    margin-right:0;\n  }\n\n}\n\n\n@media(max-width:390px){\n\n  #yu-method-flow .ymf-card-03{\n    margin-right:0;\n  }\n\n}\n\n<\/style>\n\n\n<script>\n\n(function(){\n\n  function initYuMethodFlow(root){\n\n    if(!root){\n      return;\n    }\n\n\n    if(\n      typeof root._ymfCleanup === \"function\"\n    ){\n      root._ymfCleanup();\n    }\n\n\n    const track =\n      root.querySelector(\n        \".ymf-track\"\n      );\n\n\n    const rail =\n      root.querySelector(\n        \".ymf-rail\"\n      );\n\n\n    const cards =\n      Array.from(\n        root.querySelectorAll(\n          \".ymf-card\"\n        )\n      );\n\n\n    const current =\n      root.querySelector(\n        \".ymf-current\"\n      );\n\n\n    const totalCounter =\n      root.querySelector(\n        \".ymf-counter span\"\n      );\n\n\n    const sceneLight =\n      root.querySelector(\n        \".ymf-scene-light\"\n      );\n\n\n    const sceneDark =\n      root.querySelector(\n        \".ymf-scene-dark\"\n      );\n\n\n    const bgDark =\n      root.querySelector(\n        \".ymf-bg-dark\"\n      );\n\n\n    const five =\n      root.querySelector(\n        \".ymf-five\"\n      );\n\n\n    const scrollLabel =\n      root.querySelector(\n        \".ymf-scroll-label\"\n      );\n\n\n    if(\n      !track ||\n      !rail ||\n      cards.length < 8 ||\n      !current ||\n      !sceneLight ||\n      !sceneDark ||\n      !bgDark ||\n      !five\n    ){\n      return;\n    }\n\n\n    const lightTitle =\n      sceneLight.querySelector(\n        \".ymf-big-title\"\n      );\n\n\n    const darkTitle =\n      sceneDark.querySelector(\n        \".ymf-big-title\"\n      );\n\n\n    let ticking = false;\n\n\n    function clamp(\n      value,\n      min,\n      max\n    ){\n\n      return Math.min(\n        Math.max(\n          value,\n          min\n        ),\n        max\n      );\n\n    }\n\n\n    function ease(t){\n\n      t =\n        clamp(\n          t,\n          0,\n          1\n        );\n\n\n      return t < .5\n        ? 4 * t * t * t\n        : 1 - Math.pow(-2 * t + 2,3) \/ 2;\n\n    }\n\n\n    function render(){\n\n      ticking = false;\n\n\n      const rect =\n        track.getBoundingClientRect();\n\n\n      const total =\n        track.offsetHeight -\n        window.innerHeight;\n\n\n      if(total <= 0){\n        return;\n      }\n\n\n      const p =\n        clamp(\n          -rect.top \/ total,\n          0,\n          1\n        );\n\n\n      const viewport =\n        window.innerWidth;\n\n\n      \/* HORIZONTAL MOVEMENT *\/\n\n      const maxMove =\n        Math.max(\n          0,\n          rail.scrollWidth -\n          viewport +\n          viewport * .08\n        );\n\n\n      const x =\n        viewport * .04 -\n        maxMove * ease(p);\n\n\n      rail.style.transform =\n        `translate3d(${x}px,0,0)`;\n\n\n      \/* CARD FOCUS *\/\n\n      let nearestIndex = 0;\n\n      let nearestDistance =\n        Infinity;\n\n\n      cards.forEach(function(\n        card,\n        index\n      ){\n\n        const r =\n          card.getBoundingClientRect();\n\n\n        const center =\n          r.left +\n          r.width \/ 2;\n\n\n        const distance =\n          Math.abs(\n            center -\n            viewport \/ 2\n          );\n\n\n        if(\n          distance <\n          nearestDistance\n        ){\n\n          nearestDistance =\n            distance;\n\n          nearestIndex =\n            index;\n        }\n\n\n        const normalized =\n          clamp(\n            1 -\n            distance \/\n            (viewport * .75),\n            0,\n            1\n          );\n\n\n        const scale =\n          .92 +\n          normalized * .08;\n\n\n        const y =\n          (1 - normalized) *\n          14;\n\n\n        card.style.transform =\n          `scale(${scale}) translateY(${y}px)`;\n\n\n        card.style.opacity =\n          String(\n            .72 +\n            normalized * .28\n          );\n\n      });\n\n\n      \/* TWO CHAPTERS *\/\n\n      if(\n        nearestIndex <= 2\n      ){\n\n        current.textContent =\n          String(\n            nearestIndex + 1\n          ).padStart(\n            2,\n            \"0\"\n          );\n\n\n        if(totalCounter){\n          totalCounter.textContent =\n            \"03\";\n        }\n\n      }else{\n\n        current.textContent =\n          String(\n            nearestIndex - 2\n          ).padStart(\n            2,\n            \"0\"\n          );\n\n\n        if(totalCounter){\n          totalCounter.textContent =\n            \"05\";\n        }\n\n      }\n\n\n      \/* CHAPTER TRANSITION *\/\n\n      const lastMethodRect =\n        cards[2]\n        .getBoundingClientRect();\n\n\n      const firstProcessRect =\n        cards[3]\n        .getBoundingClientRect();\n\n\n      const gapLeft =\n        lastMethodRect.right;\n\n\n      const gapRight =\n        firstProcessRect.left;\n\n\n      const gapCenter =\n        (\n          gapLeft +\n          gapRight\n        ) \/ 2;\n\n\n      const darkStart =\n        viewport * .68;\n\n\n      const darkEnd =\n        viewport * .32;\n\n\n      const dark =\n        ease(\n          clamp(\n            (\n              darkStart -\n              gapCenter\n            ) \/\n            (\n              darkStart -\n              darkEnd\n            ),\n            0,\n            1\n          )\n        );\n\n\n      bgDark.style.opacity =\n        String(dark);\n\n\n      sceneLight.style.opacity =\n        String(\n          1 - dark\n        );\n\n\n      sceneDark.style.opacity =\n        String(dark);\n\n\n      root.classList.toggle(\n        \"is-dark\",\n        dark > .5\n      );\n\n\n      \/* 5% *\/\n\n      five.style.opacity =\n        \"1\";\n\n\n      \/* BIG TYPE *\/\n\n      if(\n        lightTitle &&\n        darkTitle\n      ){\n\n        const breathe =\n          1 +\n          Math.sin(\n            p * Math.PI\n          ) * .016;\n\n\n        lightTitle.style.transform =\n          `translateX(-50%) scale(${breathe})`;\n\n\n        darkTitle.style.transform =\n          `translateX(-50%) scale(${breathe})`;\n\n      }\n\n\n      \/* 5% MICRO MOTION *\/\n\n      const fiveY =\n        Math.sin(\n          p * Math.PI\n        ) * -5;\n\n\n      five.style.transform =\n        `translate(-50%, calc(-50% + ${fiveY}px))`;\n\n\n      if(scrollLabel){\n\n        scrollLabel.style.opacity =\n          String(\n            1 -\n            clamp(\n              p \/ .72,\n              0,\n              1\n            )\n          );\n\n      }\n\n    }\n\n\n    function requestRender(){\n\n      if(ticking){\n        return;\n      }\n\n\n      ticking = true;\n\n\n      requestAnimationFrame(\n        render\n      );\n\n    }\n\n\n    window.addEventListener(\n      \"scroll\",\n      requestRender,\n      {\n        passive:true\n      }\n    );\n\n\n    window.addEventListener(\n      \"resize\",\n      requestRender,\n      {\n        passive:true\n      }\n    );\n\n\n    root._ymfCleanup =\n      function(){\n\n        window.removeEventListener(\n          \"scroll\",\n          requestRender\n        );\n\n\n        window.removeEventListener(\n          \"resize\",\n          requestRender\n        );\n\n\n        ticking =\n          false;\n\n      };\n\n\n    requestAnimationFrame(\n      function(){\n\n        render();\n\n        requestAnimationFrame(\n          render\n        );\n\n      }\n    );\n\n  }\n\n\n  function boot(){\n\n    const roots =\n      document.querySelectorAll(\n        '[id=\"yu-method-flow\"]'\n      );\n\n\n    roots.forEach(\n      initYuMethodFlow\n    );\n\n  }\n\n\n  if(\n    document.readyState ===\n    \"loading\"\n  ){\n\n    document.addEventListener(\n      \"DOMContentLoaded\",\n      boot,\n      {\n        once:true\n      }\n    );\n\n  }else{\n\n    boot();\n\n  }\n\n\n  window.addEventListener(\n    \"load\",\n    boot,\n    {\n      once:true\n    }\n  );\n\n})();\n\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f868e75 e-con-full e-flex e-con e-parent\" data-id=\"f868e75\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b2f87d8 elementor-widget elementor-widget-html\" data-id=\"b2f87d8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section class=\"yu-projects-arc\" id=\"yuProjectsArc\" aria-labelledby=\"yuProjectsArcTitle\">\n\n  <div class=\"yu-projects-arc__scroll\">\n    <div class=\"yu-projects-arc__stage\">\n\n      <header class=\"yu-projects-arc__header\">\n\n        <div class=\"yu-projects-arc__micro\">[WORK]<\/div>\n\n        <h2 id=\"yuProjectsArcTitle\">PROJECTS<\/h2>\n\n        <div class=\"yu-projects-arc__sub\">\n          SYSTEMS \u00b7 WEBSITES \u00b7 DIGITAL IDENTITIES\n        <\/div>\n\n        <div class=\"yu-projects-arc__hint\">\n          <span>SCROLL TO RECOMPOSE<\/span>\n          <b>\u2193<\/b>\n        <\/div>\n\n      <\/header>\n\n\n      <div class=\"yu-projects-arc__center\" aria-hidden=\"true\">\n        <span>YU.DESIGN \/ SELECTED WORK<\/span>\n        <strong>04<\/strong>\n        <small>PROJECTS \u00b7 2026<\/small>\n      <\/div>\n\n\n      <div class=\"yu-projects-arc__objects\">\n\n        <!-- 01 -->\n        <article class=\"yu-arc-card yu-arc-card--01\">\n\n          <div class=\"yu-arc-card__head\">\n            <span class=\"yu-arc-card__number\">[01]<\/span>\n            <h3>3-IN-1 PAGE<\/h3>\n          <\/div>\n\n          <div class=\"yu-arc-card__visual\">\n            <img\n              src=\"https:\/\/www.yuliyapivnyak.it\/wp-content\/uploads\/2026\/05\/Group-82-scaled-e1777823637128.webp\"\n              alt=\"3-IN-1 PAGE \u2014 web project by Yu.Design\"\n              loading=\"lazy\"\n              decoding=\"async\"\n            >\n          <\/div>\n\n          <div class=\"yu-arc-card__body\">\n\n            <p>\n              A proprietary format that brings three services\n              into one clear, coherent experience.\n            <\/p>\n\n            <span class=\"yu-arc-card__direction\">\n              PROPRIETARY FORMAT \u00b7 STRUCTURE \u00b7 UX\n            <\/span>\n\n          <\/div>\n\n        <\/article>\n\n\n        <!-- 02 -->\n        <article\n          class=\"yu-arc-card yu-arc-card--02\"\n          data-url=\"https:\/\/studio-guarino-partners.it\/\"\n          tabindex=\"0\"\n          role=\"link\"\n        >\n\n          <div class=\"yu-arc-card__head\">\n            <span class=\"yu-arc-card__number\">[02]<\/span>\n\n            <h3>\n              GUARINO &amp; PARTNERS<br>\n              LAW FIRM\n            <\/h3>\n          <\/div>\n\n          <div class=\"yu-arc-card__visual\">\n            <img\n              src=\"https:\/\/www.yuliyapivnyak.it\/wp-content\/uploads\/2026\/05\/Group-32-scaled.webp\"\n              alt=\"Studio Legale Guarino & Partners\"\n              loading=\"lazy\"\n              decoding=\"async\"\n            >\n          <\/div>\n\n          <div class=\"yu-arc-card__body\">\n\n            <p>\n              A corporate website with an editorial structure and blog.\n              A classic-contemporary visual direction built to strengthen authority.\n            <\/p>\n\n            <span class=\"yu-arc-card__direction\">\n              EDITORIAL \u00b7 AUTHORITY \u00b7 LAW\n            <\/span>\n\n            <span class=\"yu-arc-card__link\">\n              <span>VISIT WEBSITE<\/span>\n              <b>\u2197<\/b>\n            <\/span>\n\n          <\/div>\n\n        <\/article>\n\n\n        <!-- 03 -->\n        <article\n          class=\"yu-arc-card yu-arc-card--04\"\n          data-url=\"https:\/\/nnlogistic.it\/\"\n          tabindex=\"0\"\n          role=\"link\"\n        >\n\n          <div class=\"yu-arc-card__head\">\n            <span class=\"yu-arc-card__number\">[03]<\/span>\n\n            <h3>\n              NEW NETWORK<br>\n              LOGISTIC\n            <\/h3>\n          <\/div>\n\n          <div class=\"yu-arc-card__visual\">\n            <img\n              src=\"https:\/\/www.yuliyapivnyak.it\/wp-content\/uploads\/2026\/05\/Group-30-1-e1779023698716.webp\"\n              alt=\"New Network Logistic\"\n              loading=\"lazy\"\n              decoding=\"async\"\n            >\n          <\/div>\n\n          <div class=\"yu-arc-card__body\">\n\n            <p>\n              An operational one-page website for logistics services.\n              A clear structure designed to communicate services\n              and how the company works.\n            <\/p>\n\n            <span class=\"yu-arc-card__direction\">\n              ESSENTIAL \u00b7 TECHNICAL \u00b7 OPERATIONAL\n            <\/span>\n\n            <span class=\"yu-arc-card__link\">\n              <span>VISIT WEBSITE<\/span>\n              <b>\u2197<\/b>\n            <\/span>\n\n          <\/div>\n\n        <\/article>\n\n\n        <!-- 04 FEATURED -->\n        <article\n          class=\"yu-arc-card yu-arc-card--03 yu-arc-card--featured\"\n          data-url=\"\/case-study\"\n          tabindex=\"0\"\n          role=\"link\"\n        >\n\n          <i class=\"yu-arc-screw yu-arc-screw--tl\"><\/i>\n          <i class=\"yu-arc-screw yu-arc-screw--tr\"><\/i>\n          <i class=\"yu-arc-screw yu-arc-screw--bl\"><\/i>\n          <i class=\"yu-arc-screw yu-arc-screw--br\"><\/i>\n\n          <div class=\"yu-arc-card__head\">\n\n            <span class=\"yu-arc-card__number\">[04]<\/span>\n\n            <h3>\n              SIGESTI TOUR OPERATOR\n            <\/h3>\n\n          <\/div>\n\n          <div class=\"yu-arc-card__visual yu-arc-card__visual--sigesti\">\n\n            <img\n              src=\"https:\/\/www.yuliyapivnyak.it\/wp-content\/uploads\/2026\/08\/Group-10442.png\"\n              alt=\"SIGESTI Tour Operator\"\n              loading=\"lazy\"\n              decoding=\"async\"\n            >\n\n          <\/div>\n\n          <div class=\"yu-arc-card__body\">\n\n            <span class=\"yu-arc-card__hero-label\">\n              CASE STUDY \/ 2026\n            <\/span>\n\n            <p>\n              A dynamic experience platform designed to present,\n              organise and book local experiences.\n            <\/p>\n\n            <span class=\"yu-arc-card__direction\">\n              EDITORIAL \u00b7 IMMERSIVE \u00b7 DYNAMIC UX\n            <\/span>\n\n            <span class=\"yu-arc-card__link\">\n              <span>VIEW CASE STUDY<\/span>\n              <b>\u2192<\/b>\n            <\/span>\n\n          <\/div>\n\n        <\/article>\n\n      <\/div>\n\n\n      <div class=\"yu-projects-arc__progress\" aria-hidden=\"true\">\n        <i><\/i>\n      <\/div>\n\n    <\/div>\n  <\/div>\n\n<\/section>\n\n\n<style>\n\n\/* =========================================================\n   ROOT\n========================================================= *\/\n\n#yuProjectsArc{\n\n  --yu-blue:#405FD7;\n  --yu-orange:#F26A3D;\n  --yu-black:#111111;\n  --yu-cream:#F4F2EC;\n\n  width:100%;\n\n  color:var(--yu-black);\n  background:var(--yu-cream);\n\n  font-family:Inter,Arial,sans-serif;\n\n  overflow:clip;\n}\n\n\n#yuProjectsArc *,\n#yuProjectsArc *::before,\n#yuProjectsArc *::after{\n  box-sizing:border-box;\n}\n\n\n\/* =========================================================\n   DESKTOP SCROLL\n========================================================= *\/\n\n#yuProjectsArc .yu-projects-arc__scroll{\n  position:relative;\n  height:260vh;\n}\n\n\n#yuProjectsArc .yu-projects-arc__stage{\n\n  position:sticky;\n  top:0;\n\n  width:100%;\n  height:100svh;\n  min-height:720px;\n\n  overflow:hidden;\n\n  background:\n    linear-gradient(\n      rgba(17,17,17,.055) 1px,\n      transparent 1px\n    ),\n    linear-gradient(\n      90deg,\n      rgba(17,17,17,.055) 1px,\n      transparent 1px\n    ),\n    var(--yu-cream);\n\n  background-size:\n    12.5vw 12.5vh;\n\n}\n\n\n\/* =========================================================\n   HEADER\n========================================================= *\/\n\n#yuProjectsArc .yu-projects-arc__header{\n\n  position:absolute;\n  z-index:2;\n\n  top:clamp(120px,13vh,150px);\n\n  left:clamp(24px,4.2vw,84px);\n  right:clamp(24px,4.2vw,84px);\n\n  pointer-events:none;\n\n}\n\n\n#yuProjectsArc .yu-projects-arc__micro{\n\n  margin-bottom:11px;\n\n  font-family:\n    Khand,\n    \"Arial Narrow\",\n    Arial,\n    sans-serif;\n\n  font-size:14px;\n  line-height:1;\n\n  font-weight:600;\n\n  text-transform:uppercase;\n\n}\n\n\n#yuProjectsArc .yu-projects-arc__header h2{\n\n  position:relative;\n  z-index:1;\n\n  margin:0;\n\n  width:max-content;\n\n  font-family:\n    Khand,\n    Impact,\n    sans-serif;\n\n  font-size:120px;\n  line-height:.82;\n\n  font-weight:600;\n\n  letter-spacing:-.04em;\n\n  text-transform:uppercase;\n\n}\n\n\n#yuProjectsArc .yu-projects-arc__sub{\n\n  margin-top:20px;\n\n  font-size:12px;\n  line-height:1;\n\n  font-weight:700;\n\n  letter-spacing:.07em;\n\n  text-transform:uppercase;\n\n}\n\n\n#yuProjectsArc .yu-projects-arc__hint{\n\n  display:flex;\n  align-items:center;\n\n  gap:12px;\n\n  margin-top:22px;\n\n  font-family:\n    Khand,\n    Arial,\n    sans-serif;\n\n  font-size:13px;\n\n  font-weight:600;\n\n  text-transform:uppercase;\n\n}\n\n\n#yuProjectsArc .yu-projects-arc__hint b{\n\n  color:var(--yu-orange);\n\n  font-size:20px;\n\n  animation:\n    yuArcHint\n    1.4s\n    ease-in-out\n    infinite;\n\n}\n\n\n@keyframes yuArcHint{\n\n  50%{\n    transform:translateY(6px);\n  }\n\n}\n\n\n\/* =========================================================\n   CENTER\n========================================================= *\/\n\n#yuProjectsArc .yu-projects-arc__center{\n\n  display:none !important;\n\n  position:absolute;\n  z-index:3;\n\n  left:50%;\n  top:57%;\n\n  transform:\n    translate(-50%,-50%);\n\n  justify-items:center;\n\n  width:min(360px,34vw);\n\n  opacity:0;\n\n  text-align:center;\n\n  pointer-events:none;\n\n}\n\n\n#yuProjectsArc .yu-projects-arc__center span,\n#yuProjectsArc .yu-projects-arc__center small{\n\n  font-size:10px;\n\n  font-weight:700;\n\n  letter-spacing:.08em;\n\n  text-transform:uppercase;\n\n}\n\n\n#yuProjectsArc .yu-projects-arc__center strong{\n\n  margin:\n    3px 0 -4px;\n\n  color:var(--yu-orange);\n\n  font-family:\n    Khand,\n    Arial,\n    sans-serif;\n\n  font-size:\n    clamp(80px,8vw,132px);\n\n  line-height:.8;\n\n  font-weight:600;\n\n}\n\n\n\/* =========================================================\n   OBJECT AREA\n========================================================= *\/\n\n#yuProjectsArc .yu-projects-arc__objects{\n\n  position:absolute;\n  z-index:10;\n\n  inset:0;\n\n}\n\n\n\/* =========================================================\n   CARDS\n========================================================= *\/\n\n#yuProjectsArc .yu-arc-card{\n\n  --r:0deg;\n  --s:1;\n\n  position:absolute;\n\n  display:flex;\n  flex-direction:column;\n\n  width:\n    clamp(430px,27vw,560px);\n\n  min-height:690px;\n\n  overflow:hidden;\n\n  border:\n    1px solid rgba(17,17,17,.16);\n\n  border-radius:10px;\n\n  background:#fff;\n\n  box-shadow:\n    0 10px 26px rgba(17,17,17,.07);\n\n  transform:\n    rotate(var(--r))\n    scale(var(--s));\n\n  transform-origin:center;\n\n  will-change:\n    left,\n    top,\n    transform;\n\n  transition:\n    box-shadow .25s ease,\n    border-color .25s ease;\n\n}\n\n\n\/* =========================================================\n   CARD COLORS\n========================================================= *\/\n\n#yuProjectsArc .yu-arc-card--01{\n  background:#fff;\n}\n\n\n#yuProjectsArc .yu-arc-card--02{\n  background:#ECE9E2;\n}\n\n\n#yuProjectsArc .yu-arc-card--04{\n\n  background:#171717;\n\n  color:#fff;\n\n}\n\n\n#yuProjectsArc .yu-arc-card--04 .yu-arc-card__head h3,\n#yuProjectsArc .yu-arc-card--04 .yu-arc-card__body p,\n#yuProjectsArc .yu-arc-card--04 .yu-arc-card__direction,\n#yuProjectsArc .yu-arc-card--04 .yu-arc-card__link{\n\n  color:#fff;\n\n}\n\n\n#yuProjectsArc .yu-arc-card--04 .yu-arc-card__number{\n  color:#fff;\n}\n\n\n#yuProjectsArc .yu-arc-card--04 .yu-arc-card__link{\n\n  border-color:\n    rgba(255,255,255,.22);\n\n}\n\n\n\/* =========================================================\n   FEATURED SIGESTI\n========================================================= *\/\n\n#yuProjectsArc .yu-arc-card--featured{\n\n  width:\n    clamp(500px,31vw,640px);\n\n  min-height:760px;\n\n  background:\n    linear-gradient(\n      145deg,\n      rgba(255,255,255,.96),\n      rgba(249,247,241,.93) 48%,\n      rgba(232,236,244,.90)\n    );\n\n  border:\n    1px solid rgba(255,255,255,.94);\n\n  box-shadow:\n    0 0 0 2px rgba(155,164,180,.18),\n    0 18px 38px rgba(28,34,52,.12),\n    inset 1px 1px 2px rgba(255,255,255,.9);\n\n}\n\n\n#yuProjectsArc .yu-arc-card--featured::before{\n\n  content:\"\";\n\n  position:absolute;\n  z-index:2;\n\n  inset:8px;\n\n  border:\n    1px solid rgba(255,255,255,.62);\n\n  border-radius:7px;\n\n  pointer-events:none;\n\n}\n\n\n\/* =========================================================\n   INITIAL STACK\n========================================================= *\/\n\n#yuProjectsArc .yu-arc-card--01{\n  left:63vw;\n  top:33vh;\n  z-index:4;\n}\n\n#yuProjectsArc .yu-arc-card--02{\n  left:66vw;\n  top:37vh;\n  z-index:5;\n}\n\n#yuProjectsArc .yu-arc-card--04{\n  left:69vw;\n  top:41vh;\n  z-index:6;\n}\n\n#yuProjectsArc .yu-arc-card--03{\n  left:72vw;\n  top:45vh;\n  z-index:7;\n}\n\n\n\/* =========================================================\n   CARD HEADER\n========================================================= *\/\n\n#yuProjectsArc .yu-arc-card__head{\n\n  position:relative;\n  z-index:4;\n\n  display:grid;\n\n  grid-template-columns:\n    36px 1fr;\n\n  gap:8px;\n\n  padding:\n    18px 19px 22px;\n\n}\n\n\n#yuProjectsArc .yu-arc-card__number{\n\n  padding-top:2px;\n\n  color:var(--yu-black);\n\n  font-family:\n    Khand,\n    Arial,\n    sans-serif;\n\n  font-size:12px;\n  line-height:1;\n\n  font-weight:600;\n\n}\n\n\n#yuProjectsArc .yu-arc-card__head h3{\n\n  margin:0;\n\n  font-family:\n    Khand,\n    Impact,\n    sans-serif;\n\n  font-size:26px;\n  line-height:.92;\n\n  font-weight:600;\n\n  letter-spacing:-.02em;\n\n  text-transform:uppercase;\n\n}\n\n\n\/* =========================================================\n   CARD IMAGE\n========================================================= *\/\n\n#yuProjectsArc .yu-arc-card__visual{\n\n  position:relative;\n  z-index:4;\n\n  width:\n    calc(100% - 24px);\n\n  margin:\n    0 auto;\n\n  overflow:hidden;\n\n  border-radius:7px;\n\n  flex:\n    0 0 auto;\n\n}\n\n\n#yuProjectsArc .yu-arc-card__visual img{\n\n  display:block;\n\n  width:100%;\n\n  height:340px;\n\n  object-fit:contain;\n\n  object-position:\n    top center;\n\n  border-radius:7px;\n\n}\n\n\n#yuProjectsArc .yu-arc-card__visual--sigesti{\n  background:transparent;\n}\n\n\n#yuProjectsArc .yu-arc-card__visual--sigesti img{\n\n  height:405px;\n\n  object-fit:contain;\n\n  object-position:\n    top center;\n\n  background:transparent;\n\n}\n\n\n\/* =========================================================\n   BODY\n========================================================= *\/\n\n#yuProjectsArc .yu-arc-card__body{\n\n  position:relative;\n  z-index:4;\n\n  margin-top:auto;\n\n  padding:\n    16px 20px 34px;\n\n}\n\n\n#yuProjectsArc .yu-arc-card__body p{\n\n  margin:0;\n\n  color:\n    rgba(17,17,17,.78);\n\n  font-size:18px;\n\n  line-height:1.42;\n\n}\n\n\n#yuProjectsArc .yu-arc-card__direction,\n#yuProjectsArc .yu-arc-card__hero-label{\n\n  display:block;\n\n  margin-top:9px;\n\n  font-size:9px;\n  line-height:1.25;\n\n  font-weight:700;\n\n  letter-spacing:.045em;\n\n  text-transform:uppercase;\n\n}\n\n\n#yuProjectsArc .yu-arc-card__hero-label{\n\n  margin:\n    0 0 10px;\n\n  color:\n    var(--yu-orange);\n\n}\n\n\n\/* =========================================================\n   LINK\n========================================================= *\/\n\n#yuProjectsArc .yu-arc-card__link{\n\n  position:relative;\n\n  display:flex;\n\n  align-items:center;\n  justify-content:space-between;\n\n  gap:12px;\n\n  width:100%;\n\n  margin-top:11px;\n\n  padding:\n    11px 0 0;\n\n  border-top:\n    1px solid rgba(17,17,17,.18);\n\n  color:\n    var(--yu-black);\n\n  text-decoration:none !important;\n\n}\n\n\n#yuProjectsArc .yu-arc-card__link span{\n\n  font-family:\n    Khand,\n    Arial,\n    sans-serif;\n\n  font-size:14px;\n\n  font-weight:600;\n\n  text-transform:uppercase;\n\n}\n\n\n#yuProjectsArc .yu-arc-card__link b{\n\n  color:\n    var(--yu-orange);\n\n  font-size:18px;\n\n  line-height:1;\n\n  font-weight:400;\n\n}\n\n\n\/* =========================================================\n   SCREWS\n========================================================= *\/\n\n#yuProjectsArc .yu-arc-screw{\n\n  position:absolute;\n  z-index:20;\n\n  width:11px;\n  height:11px;\n\n  border-radius:50%;\n\n  background:\n    radial-gradient(\n      circle at 30% 26%,\n      #fff 0 7%,\n      #eceeef 12%,\n      #b7bcc0 24%,\n      #747b81 42%,\n      #25292d 63%,\n      #b9bec2 80%,\n      #454a4f 100%\n    );\n\n  box-shadow:\n    0 1px 3px rgba(0,0,0,.36);\n\n}\n\n\n#yuProjectsArc .yu-arc-screw::after{\n\n  content:\"\";\n\n  position:absolute;\n\n  left:3px;\n  right:3px;\n\n  top:5px;\n\n  height:1px;\n\n  background:\n    rgba(0,0,0,.82);\n\n  transform:\n    rotate(35deg);\n\n}\n\n\n#yuProjectsArc .yu-arc-screw--tl{\n  top:10px;\n  left:10px;\n}\n\n#yuProjectsArc .yu-arc-screw--tr{\n  top:10px;\n  right:10px;\n}\n\n#yuProjectsArc .yu-arc-screw--bl{\n  bottom:18px;\n  left:10px;\n}\n\n#yuProjectsArc .yu-arc-screw--br{\n  bottom:10px;\n  right:10px;\n}\n\n\n\/* =========================================================\n   PROGRESS\n========================================================= *\/\n\n#yuProjectsArc .yu-projects-arc__progress{\n\n  position:absolute;\n  z-index:50;\n\n  left:\n    clamp(24px,4.2vw,84px);\n\n  right:\n    clamp(24px,4.2vw,84px);\n\n  bottom:10px;\n\n  height:1px;\n\n  overflow:hidden;\n\n  background:\n    rgba(17,17,17,.09);\n\n}\n\n\n#yuProjectsArc .yu-projects-arc__progress i{\n\n  display:block;\n\n  width:0;\n  height:100%;\n\n  background:\n    var(--yu-orange);\n\n  opacity:.82;\n\n}\n\n\n\/* =========================================================\n   HOVER\n========================================================= *\/\n\n@media (hover:hover){\n\n  #yuProjectsArc .yu-arc-card[data-url]{\n    cursor:pointer;\n  }\n\n  #yuProjectsArc .yu-arc-card:hover{\n\n    box-shadow:\n      0 18px 38px rgba(17,17,17,.13);\n\n  }\n\n  #yuProjectsArc .yu-arc-card__link span{\n\n    transition:\n      transform .2s ease;\n\n  }\n\n  #yuProjectsArc .yu-arc-card:hover\n  .yu-arc-card__link span{\n\n    transform:\n      translateX(3px);\n\n  }\n\n}\n\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width:1100px) and (min-width:768px){\n\n  #yuProjectsArc .yu-projects-arc__scroll{\n    height:280vh;\n  }\n\n  #yuProjectsArc .yu-projects-arc__stage{\n    min-height:680px;\n  }\n\n  #yuProjectsArc .yu-projects-arc__header h2{\n    font-size:82px;\n  }\n\n  #yuProjectsArc .yu-arc-card{\n    width:340px;\n  }\n\n  #yuProjectsArc .yu-arc-card--featured{\n    width:390px;\n  }\n\n  #yuProjectsArc .yu-arc-card--01{\n    left:61vw;\n  }\n\n  #yuProjectsArc .yu-arc-card--02{\n    left:64vw;\n  }\n\n  #yuProjectsArc .yu-arc-card--04{\n    left:67vw;\n  }\n\n  #yuProjectsArc .yu-arc-card--03{\n    left:69vw;\n  }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n   Un solo sistema.\n   Nessuno sticky.\n   Scroll pagina sempre libero.\n   Card swipe orizzontale.\n========================================================= *\/\n\n@media (max-width:767px){\n\n  #yuProjectsArc{\n\n    width:100%;\n\n    overflow:hidden;\n\n    background:\n      var(--yu-cream);\n\n  }\n\n\n  #yuProjectsArc .yu-projects-arc__scroll{\n\n    position:relative;\n\n    height:auto !important;\n    min-height:0 !important;\n\n  }\n\n\n  #yuProjectsArc .yu-projects-arc__stage{\n\n    position:relative !important;\n\n    top:auto !important;\n\n    width:100% !important;\n\n    height:auto !important;\n    min-height:0 !important;\n    max-height:none !important;\n\n    overflow:visible !important;\n\n    padding:\n      72px 0 74px;\n\n    background:\n      var(--yu-cream);\n\n  }\n\n\n  \/* HEADER *\/\n\n  #yuProjectsArc .yu-projects-arc__header{\n\n    position:relative !important;\n\n    inset:auto !important;\n\n    width:\n      calc(100% - 36px);\n\n    margin:\n      0 18px 34px;\n\n    padding:0;\n\n    pointer-events:auto;\n\n  }\n\n\n  #yuProjectsArc .yu-projects-arc__micro{\n\n    margin-bottom:10px;\n\n    font-size:12px;\n\n  }\n\n\n  #yuProjectsArc .yu-projects-arc__header h2{\n\n    font-size:58px;\n\n    line-height:.88;\n\n  }\n\n\n  #yuProjectsArc .yu-projects-arc__sub{\n\n    margin-top:14px;\n\n    font-size:11px;\n\n  }\n\n\n  \/* DESKTOP ELEMENTS OFF *\/\n\n  #yuProjectsArc .yu-projects-arc__center,\n  #yuProjectsArc .yu-projects-arc__progress,\n  #yuProjectsArc .yu-projects-arc__hint{\n\n    display:none !important;\n\n  }\n\n\n  \/* =====================================================\n     HORIZONTAL RAIL\n  ===================================================== *\/\n\n  #yuProjectsArc .yu-projects-arc__objects{\n\n    position:relative !important;\n\n    inset:auto !important;\n\n    display:flex !important;\n\n    align-items:flex-start;\n\n    gap:14px;\n\n    width:100% !important;\n\n    padding:\n      8px 14vw 26px 18px;\n\n    overflow-x:auto !important;\n\n    \/*\n      IMPORTANTISSIMO:\n      niente overflow-y:visible sullo scroller.\n      Evita comportamenti strani Safari.\n    *\/\n    overflow-y:hidden !important;\n\n    \/*\n      proximity \u00e8 molto meno aggressivo\n      di mandatory.\n    *\/\n    scroll-snap-type:\n      x proximity;\n\n    scroll-padding-left:\n      18px;\n\n    \/*\n      Manteniamo momentum iOS.\n    *\/\n    -webkit-overflow-scrolling:\n      touch;\n\n    \/*\n      QUESTO \u00c8 IL FIX PRINCIPALE:\n      il browser pu\u00f2 interpretare sia\n      movimento verticale che orizzontale.\n    *\/\n    touch-action:\n      pan-x pan-y;\n\n    \/*\n      Non intrappoliamo lo swipe.\n    *\/\n    overscroll-behavior:\n      auto;\n\n    scrollbar-width:\n      none;\n\n  }\n\n\n  #yuProjectsArc\n  .yu-projects-arc__objects::-webkit-scrollbar{\n\n    display:none;\n\n  }\n\n\n  \/* CARD *\/\n\n  #yuProjectsArc .yu-arc-card,\n  #yuProjectsArc .yu-arc-card--featured{\n\n    position:relative !important;\n\n    left:auto !important;\n    right:auto !important;\n    top:auto !important;\n    bottom:auto !important;\n\n    flex:\n      0 0 86vw !important;\n\n    width:\n      86vw !important;\n\n    min-width:\n      86vw !important;\n\n    max-width:\n      360px !important;\n\n    height:auto !important;\n\n    min-height:\n      0 !important;\n\n    max-height:\n      none !important;\n\n    transform:\n      none !important;\n\n    rotate:\n      0deg !important;\n\n    scale:\n      1 !important;\n\n    scroll-snap-align:\n      start;\n\n    scroll-snap-stop:\n      normal;\n\n    will-change:\n      auto !important;\n\n  }\n\n\n  \/* CARD HEADER *\/\n\n  #yuProjectsArc .yu-arc-card__head{\n\n    grid-template-columns:\n      30px 1fr;\n\n    gap:7px;\n\n    padding:\n      17px 16px 18px;\n\n  }\n\n\n  #yuProjectsArc .yu-arc-card__number{\n\n    font-size:11px;\n\n  }\n\n\n  #yuProjectsArc .yu-arc-card__head h3{\n\n    font-size:20px;\n\n    line-height:.95;\n\n  }\n\n\n  \/* IMAGE *\/\n\n  #yuProjectsArc .yu-arc-card__visual,\n  #yuProjectsArc\n  .yu-arc-card--featured\n  .yu-arc-card__visual{\n\n    height:auto !important;\n\n    min-height:\n      0 !important;\n\n  }\n\n\n  #yuProjectsArc .yu-arc-card__visual img{\n\n    display:block;\n\n    width:100%;\n\n    height:auto !important;\n\n    max-height:\n      none !important;\n\n    object-fit:\n      contain;\n\n    object-position:\n      top center;\n\n  }\n\n\n  #yuProjectsArc\n  .yu-arc-card__visual--sigesti img{\n\n    height:auto !important;\n\n    max-height:\n      none !important;\n\n  }\n\n\n  \/* BODY *\/\n\n  #yuProjectsArc .yu-arc-card__body{\n\n    margin-top:\n      0 !important;\n\n    padding:\n      16px 17px 27px;\n\n  }\n\n\n  #yuProjectsArc .yu-arc-card__body p{\n\n    font-size:16px;\n\n    line-height:1.42;\n\n  }\n\n\n  #yuProjectsArc .yu-arc-card__direction,\n  #yuProjectsArc .yu-arc-card__hero-label{\n\n    font-size:9px;\n\n  }\n\n\n  #yuProjectsArc .yu-arc-card__link span{\n\n    font-size:13px;\n\n  }\n\n\n  \/*\n    Su mobile togliamo completamente\n    i costi di animazione desktop.\n  *\/\n\n  #yuProjectsArc .yu-arc-card{\n\n    transition:none !important;\n\n  }\n\n}\n\n\n\/* =========================================================\n   REDUCED MOTION\n========================================================= *\/\n\n@media (prefers-reduced-motion:reduce){\n\n  #yuProjectsArc .yu-projects-arc__hint b{\n\n    animation:\n      none !important;\n\n  }\n\n\n  #yuProjectsArc .yu-arc-card{\n\n    transition:\n      none !important;\n\n  }\n\n}\n\n<\/style>\n\n\n<script>\n\n(() => {\n\n  const root =\n    document.querySelector('#yuProjectsArc');\n\n  if (!root) return;\n\n\n  const scroll =\n    root.querySelector(\n      '.yu-projects-arc__scroll'\n    );\n\n\n  const cards = [\n\n    root.querySelector(\n      '.yu-arc-card--01'\n    ),\n\n    root.querySelector(\n      '.yu-arc-card--02'\n    ),\n\n    root.querySelector(\n      '.yu-arc-card--04'\n    ),\n\n    root.querySelector(\n      '.yu-arc-card--03'\n    )\n\n  ];\n\n\n  const center =\n    root.querySelector(\n      '.yu-projects-arc__center'\n    );\n\n\n  const progress =\n    root.querySelector(\n      '.yu-projects-arc__progress i'\n    );\n\n\n  const clamp =\n    (v,a,b) =>\n      Math.max(\n        a,\n        Math.min(b,v)\n      );\n\n\n  const mix =\n    (a,b,t) =>\n      a + (b-a)*t;\n\n\n  const ease = t => {\n\n    t =\n      clamp(t,0,1);\n\n    return (\n      1 -\n      Math.pow(\n        1-t,\n        3\n      )\n    );\n\n  };\n\n\n  const starts = [\n\n    [47.0,17.0,-7],\n\n    [49.5,19.5,-3],\n\n    [52.0,22.0,2],\n\n    [54.5,24.5,6]\n\n  ];\n\n\n  const finals = [\n\n    [2.5,13.0,-7.5],\n\n    [23.0,11.0,-2.8],\n\n    [47.0,11.0,2.8],\n\n    [65.0,13.0,7.5]\n\n  ];\n\n\n  let ticking = false;\n\n  let wasMobile = null;\n\n\n  function isMobile(){\n\n    return window.matchMedia(\n      '(max-width:767px)'\n    ).matches;\n\n  }\n\n\n  \/* =====================================================\n     REMOVE INLINE DESKTOP STYLES\n     WHEN ENTERING MOBILE\n  ===================================================== *\/\n\n  function resetMobile(){\n\n    cards.forEach(card => {\n\n      if (!card) return;\n\n\n      card.style.removeProperty(\n        'left'\n      );\n\n      card.style.removeProperty(\n        'top'\n      );\n\n      card.style.removeProperty(\n        'height'\n      );\n\n      card.style.removeProperty(\n        '--r'\n      );\n\n      card.style.removeProperty(\n        '--s'\n      );\n\n\n      const img =\n        card.querySelector(\n          '.yu-arc-card__visual img'\n        );\n\n\n      if (img){\n\n        img.style.removeProperty(\n          'height'\n        );\n\n      }\n\n    });\n\n\n    if (progress){\n\n      progress.style.width =\n        '0%';\n\n    }\n\n\n    if (center){\n\n      center.style.opacity =\n        '';\n\n      center.style.transform =\n        '';\n\n    }\n\n  }\n\n\n  \/* =====================================================\n     DESKTOP RENDER\n  ===================================================== *\/\n\n  function render(){\n\n    ticking = false;\n\n\n    const mobile =\n      isMobile();\n\n\n    \/*\n      Cambiando breakpoint,\n      puliamo subito eventuali\n      stili inline desktop.\n    *\/\n\n    if (mobile){\n\n      if (wasMobile !== true){\n\n        resetMobile();\n\n      }\n\n      wasMobile = true;\n\n      return;\n\n    }\n\n\n    wasMobile = false;\n\n\n    if (!scroll) return;\n\n\n    const rect =\n      scroll.getBoundingClientRect();\n\n\n    const max =\n      Math.max(\n        1,\n        scroll.offsetHeight -\n        window.innerHeight\n      );\n\n\n    const passed =\n      clamp(\n        -rect.top,\n        0,\n        max\n      );\n\n\n    const p =\n      passed \/ max;\n\n\n    if (progress){\n\n      progress.style.width =\n        `${p * 100}%`;\n\n    }\n\n\n    const cardP =\n      ease(\n        (p - .04) \/ .68\n      );\n\n\n    cards.forEach(\n      (card,i) => {\n\n        if (!card) return;\n\n\n        const start =\n          starts[i];\n\n\n        const end =\n          finals[i];\n\n\n        const x =\n          mix(\n            start[0],\n            end[0],\n            cardP\n          );\n\n\n        const y =\n          mix(\n            start[1],\n            end[1],\n            cardP\n          );\n\n\n        const rot =\n          mix(\n            start[2],\n            end[2],\n            cardP\n          );\n\n\n        const lift =\n\n          Math.sin(\n            cardP *\n            Math.PI\n          )\n\n          *\n\n          (\n            7 +\n            i * 1.2\n          );\n\n\n        const finalScale =\n\n          i === 3\n            ? .92\n\n          : i === 1\n            ? .88\n\n          : i === 2\n            ? .88\n\n          : .86;\n\n\n        const scale =\n          mix(\n            i === 3\n              ? .80\n              : .76,\n\n            finalScale,\n\n            cardP\n          );\n\n\n        const startCardH =\n          i === 3\n            ? 735\n            : 665;\n\n\n        const bottomSafe =\n          72;\n\n\n        const finalTopVh =\n          finals[i][1];\n\n\n        const availableH =\n\n          window.innerHeight\n\n          *\n\n          (\n            1 -\n            finalTopVh \/ 100\n          )\n\n          -\n\n          bottomSafe;\n\n\n        const targetCardH =\n          Math.min(\n\n            i === 3\n              ? 850\n              : 842,\n\n            Math.max(\n\n              i === 3\n                ? 710\n                : 702,\n\n              (\n                availableH \/\n                finalScale\n              )\n\n              -\n\n              (\n                i === 3\n                  ? 50\n                  : 18\n              )\n\n            )\n\n          );\n\n\n        const startVisualH =\n          i === 3\n            ? 390\n            : 325;\n\n\n        const reservedForText =\n          i === 3\n            ? 250\n            : 235;\n\n\n        const targetVisualH =\n          Math.min(\n\n            i === 3\n              ? 520\n              : 495,\n\n            Math.max(\n\n              i === 3\n                ? 390\n                : 370,\n\n              targetCardH -\n              reservedForText\n\n            )\n\n          );\n\n\n        card.style.height =\n          `${mix(\n            startCardH,\n            targetCardH,\n            cardP\n          )}px`;\n\n\n        const visualImg =\n          card.querySelector(\n            '.yu-arc-card__visual img'\n          );\n\n\n        if (visualImg){\n\n          visualImg.style.height =\n            `${mix(\n              startVisualH,\n              targetVisualH,\n              cardP\n            )}px`;\n\n        }\n\n\n        card.style.left =\n          `${x}vw`;\n\n\n        card.style.top =\n          `${y - lift}vh`;\n\n\n        card.style.setProperty(\n          '--r',\n          `${rot}deg`\n        );\n\n\n        card.style.setProperty(\n          '--s',\n          scale\n        );\n\n      }\n    );\n\n\n    if (center){\n\n      const centerP =\n        ease(\n          (p - .54) \/ .24\n        );\n\n\n      center.style.opacity =\n        centerP;\n\n\n      center.style.transform =\n        `translate(-50%,-50%) scale(${mix(\n          .86,\n          1,\n          centerP\n        )})`;\n\n    }\n\n  }\n\n\n  \/* =====================================================\n     RAF\n  ===================================================== *\/\n\n  function requestRender(){\n\n    if (ticking) return;\n\n    ticking = true;\n\n    requestAnimationFrame(\n      render\n    );\n\n  }\n\n\n  window.addEventListener(\n    'scroll',\n    requestRender,\n    {passive:true}\n  );\n\n\n  window.addEventListener(\n    'resize',\n    requestRender,\n    {passive:true}\n  );\n\n\n  window.addEventListener(\n    'orientationchange',\n    () => {\n\n      requestAnimationFrame(\n        () => {\n\n          resetMobile();\n\n          requestRender();\n\n        }\n      );\n\n    },\n    {passive:true}\n  );\n\n\n  \/* =====================================================\n     CLICKABLE CARDS\n  ===================================================== *\/\n\n  root\n    .querySelectorAll(\n      '.yu-arc-card[data-url]'\n    )\n    .forEach(card => {\n\n\n      const go = () => {\n\n        const url =\n          card.dataset.url;\n\n        if (!url) return;\n\n\n        window.open(\n          url,\n          '_blank',\n          'noopener,noreferrer'\n        );\n\n      };\n\n\n      card.addEventListener(\n        'click',\n        go\n      );\n\n\n      card.addEventListener(\n        'keydown',\n        e => {\n\n          if (\n            e.key === 'Enter' ||\n            e.key === ' '\n          ){\n\n            e.preventDefault();\n\n            go();\n\n          }\n\n        }\n      );\n\n    });\n\n\n  render();\n\n})();\n\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6653cc0 e-con-full e-flex e-con e-parent\" data-id=\"6653cc0\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c7a2bc3 elementor-widget elementor-widget-html\" data-id=\"c7a2bc3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\nYU.DESIGN \u2014 WAYS TO WORK TOGETHER\nCommercial bridge \/ EN Home\nElementor HTML widget \u2014 standalone\n========================================================= -->\n\n<section class=\"yu-workways\" id=\"yuWorkWays\" aria-labelledby=\"yuWorkWaysTitle\">\n  <div class=\"yu-workways__noise\" aria-hidden=\"true\"><\/div>\n\n  <header class=\"yu-workways__header\">\n    <div class=\"yu-workways__micro\">[FOR CREATIVE STUDIOS &amp; AGENCIES]<\/div>\n\n    <h2 id=\"yuWorkWaysTitle\">\n      <span>YOUR DESIGN.<\/span>\n      <span>STILL YOUR DESIGN.<\/span>\n    <\/h2>\n\n    <p>\n      I step in after the creative direction is set \u2014<br>\n      and make sure it survives the build.\n    <\/p>\n  <\/header>\n\n  <div class=\"yu-workways__system\">\n\n    <article class=\"yu-workways__item is-active\" tabindex=\"0\">\n      <div class=\"yu-workways__stripe\" aria-hidden=\"true\"><\/div>\n\n      <div class=\"yu-workways__top\">\n        <span class=\"yu-workways__number\">[01]<\/span>\n        <span class=\"yu-workways__type\">FIDELITY<\/span>\n        <b aria-hidden=\"true\">\u2197<\/b>\n      <\/div>\n\n      <div class=\"yu-workways__body\">\n        <h3>WHAT YOU APPROVE<br>IS WHAT GETS BUILT.<\/h3>\n        <p>\n          No visual downgrade between the design file\n          and the live website.\n        <\/p>\n      <\/div>\n\n      <div class=\"yu-workways__bottom\">\n        <span>DESIGN FIDELITY<\/span><i><\/i><span>RESPONSIVE<\/span><i><\/i><span>INTERACTIONS<\/span>\n      <\/div>\n    <\/article>\n\n    <article class=\"yu-workways__item\" tabindex=\"0\">\n      <div class=\"yu-workways__stripe\" aria-hidden=\"true\"><\/div>\n\n      <div class=\"yu-workways__top\">\n        <span class=\"yu-workways__number\">[02]<\/span>\n        <span class=\"yu-workways__type\">INDEPENDENCE<\/span>\n        <b aria-hidden=\"true\">\u2197<\/b>\n      <\/div>\n\n      <div class=\"yu-workways__body\">\n        <h3>LESS TO<br>MANAGE.<\/h3>\n        <p>\n          Give me the direction and the assets.\n          I handle the build, responsive behaviour, testing\n          and the details in between.\n        <\/p>\n      <\/div>\n\n      <div class=\"yu-workways__bottom\">\n        <span>BUILD<\/span><i><\/i><span>QA<\/span><i><\/i><span>DELIVERY<\/span>\n      <\/div>\n    <\/article>\n\n    <article class=\"yu-workways__item\" tabindex=\"0\">\n      <div class=\"yu-workways__stripe\" aria-hidden=\"true\"><\/div>\n\n      <div class=\"yu-workways__top\">\n        <span class=\"yu-workways__number\">[03]<\/span>\n        <span class=\"yu-workways__type\">WHITE LABEL<\/span>\n        <b aria-hidden=\"true\">\u2197<\/b>\n      <\/div>\n\n      <div class=\"yu-workways__body\">\n        <h3>YOUR CLIENT<br>STAYS YOUR CLIENT.<\/h3>\n        <p>\n          I can work quietly behind your studio,\n          without changing the relationship you already have\n          with your client.\n        <\/p>\n      <\/div>\n\n      <div class=\"yu-workways__bottom\">\n        <span>WHITE LABEL<\/span><i><\/i><span>EXTERNAL PARTNER<\/span><i><\/i><span>WORDPRESS<\/span>\n      <\/div>\n    <\/article>\n\n  <\/div>\n\n  <div class=\"yu-workways__conversion\">\n    <div class=\"yu-workways__cta-small\">NEED A RELIABLE BUILD PARTNER?<\/div>\n\n    <a class=\"yu-plexi-insert yu-workways__plexi\"\n       href=\"\/collaborations\/\"\n       aria-label=\"See how I work with agencies\">\n\n      <span class=\"yu-plexi-insert__plate\">\n\n        <i class=\"yu-plexi-insert__screw yu-plexi-insert__screw--tl\" aria-hidden=\"true\"><\/i>\n        <i class=\"yu-plexi-insert__screw yu-plexi-insert__screw--tr\" aria-hidden=\"true\"><\/i>\n        <i class=\"yu-plexi-insert__screw yu-plexi-insert__screw--bl\" aria-hidden=\"true\"><\/i>\n        <i class=\"yu-plexi-insert__screw yu-plexi-insert__screw--br\" aria-hidden=\"true\"><\/i>\n\n        <span class=\"yu-plexi-insert__band\" aria-hidden=\"true\"><\/span>\n        <span class=\"yu-plexi-insert__shine\" aria-hidden=\"true\"><\/span>\n\n        <span class=\"yu-plexi-insert__content\">\n          <span class=\"yu-plexi-insert__micro\">03 \/ COLLABORATIONS<\/span>\n          <span class=\"yu-plexi-insert__label\">HOW I WORK WITH AGENCIES<\/span>\n          <span class=\"yu-plexi-insert__arrow\" aria-hidden=\"true\">\u2197<\/span>\n        <\/span>\n\n      <\/span>\n    <\/a>\n  <\/div>\n<\/section>\n\n<style>\n#yuWorkWays{\n  --paper:#F4F2EC;\n  --black:#111111;\n  --blue:#405FD7;\n  --orange:#EA6B3A;\n\n  position:relative;\n  width:100vw;\n  max-width:none;\n  margin-left:calc(50% - 50vw);\n  margin-right:calc(50% - 50vw);\n  padding:clamp(110px,12vw,180px) clamp(20px,4.2vw,84px) 52px;\n  overflow:hidden;\n  background:#0E0E0E;\n  color:var(--paper);\n  font-family:\"Inter\",sans-serif;\n  isolation:isolate;\n}\n\n#yuWorkWays *,\n#yuWorkWays *::before,\n#yuWorkWays *::after{\n  box-sizing:border-box;\n}\n\n#yuWorkWays .yu-workways__noise{\n  position:absolute;\n  inset:0;\n  z-index:-2;\n  pointer-events:none;\n  opacity:.34;\n  background:\n    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),\n    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);\n  background-size:12.5vw 12.5vh;\n}\n\n#yuWorkWays::after{\n  content:\"\";\n  position:absolute;\n  z-index:-1;\n  width:46vw;\n  height:46vw;\n  min-width:520px;\n  min-height:520px;\n  right:-23vw;\n  top:-18vw;\n  border-radius:50%;\n  border:1px solid rgba(255,255,255,.08);\n  box-shadow:\n    0 0 0 7vw rgba(255,255,255,.012),\n    0 0 0 14vw rgba(255,255,255,.008);\n  pointer-events:none;\n}\n\n#yuWorkWays .yu-workways__header{\n  display:grid;\n  grid-template-columns:minmax(0,1.55fr) minmax(220px,.45fr);\n  column-gap:clamp(40px,8vw,150px);\n  align-items:end;\n  margin-bottom:clamp(62px,7vw,110px);\n}\n\n#yuWorkWays .yu-workways__micro{\n  grid-column:1\/-1;\n  margin-bottom:18px;\n  font-family:\"Khand\",sans-serif;\n  font-size:14px;\n  line-height:1;\n  font-weight:600;\n  text-transform:uppercase;\n}\n\n#yuWorkWays .yu-workways__header h2{\n  margin:0;\n  font-family:\"Khand\",sans-serif;\n  font-size:clamp(76px,8.4vw,164px);\n  line-height:.76;\n  letter-spacing:-.045em;\n  font-weight:600;\n  text-transform:uppercase;\n}\n\n#yuWorkWays .yu-workways__header h2 span{\n  display:block;\n}\n\n#yuWorkWays .yu-workways__header h2 span:last-child{\n  color:var(--paper);\n  transform:translateX(clamp(22px,3vw,58px));\n}\n\n#yuWorkWays .yu-workways__header p{\n  margin:0 0 5px;\n  max-width:280px;\n  font-size:18px;\n  line-height:1.35;\n  color:rgba(244,242,236,.72);\n}\n\n#yuWorkWays .yu-workways__system{\n  display:flex;\n  width:100%;\n  height:clamp(410px,34vw,570px);\n  border-top:1px solid rgba(255,255,255,.18);\n  border-bottom:1px solid rgba(255,255,255,.18);\n}\n\n#yuWorkWays .yu-workways__item{\n  position:relative;\n  flex:1 1 0;\n  min-width:0;\n  padding:24px clamp(18px,1.8vw,34px) 26px;\n  overflow:hidden;\n  border-right:1px solid rgba(255,255,255,.18);\n  outline:none;\n  cursor:default;\n  transition:flex .65s cubic-bezier(.2,.75,.2,1), background .4s ease;\n}\n\n#yuWorkWays .yu-workways__item:first-child{\n  border-left:1px solid rgba(255,255,255,.18);\n}\n\n#yuWorkWays .yu-workways__item.is-active{\n  flex:1.75 1 0;\n  background:#151515;\n}\n\n#yuWorkWays .yu-workways__stripe{\n  position:absolute;\n  z-index:0;\n  left:-8%;\n  top:48%;\n  width:0;\n  height:clamp(42px,4vw,64px);\n  transform:translateY(-50%) rotate(-2deg);\n  background:var(--orange);\n  opacity:.96;\n  transition:width .7s cubic-bezier(.2,.75,.2,1);\n}\n\n#yuWorkWays .yu-workways__item.is-active .yu-workways__stripe{\n  width:116%;\n}\n\n#yuWorkWays .yu-workways__top,\n#yuWorkWays .yu-workways__body,\n#yuWorkWays .yu-workways__bottom{\n  position:relative;\n  z-index:2;\n}\n\n#yuWorkWays .yu-workways__top{\n  display:grid;\n  grid-template-columns:42px 1fr auto;\n  align-items:start;\n  gap:10px;\n  font-family:\"Khand\",sans-serif;\n  text-transform:uppercase;\n}\n\n#yuWorkWays .yu-workways__number{\n  color:var(--orange);\n  font-size:13px;\n  font-weight:600;\n}\n\n#yuWorkWays .yu-workways__type{\n  font-size:17px;\n  line-height:1;\n  font-weight:600;\n  letter-spacing:.02em;\n}\n\n#yuWorkWays .yu-workways__top b{\n  font-size:22px;\n  line-height:.8;\n  font-weight:500;\n  transform:rotate(0);\n  transition:transform .4s ease,color .4s ease;\n}\n\n#yuWorkWays .yu-workways__item.is-active .yu-workways__top b{\n  color:var(--orange);\n  transform:rotate(45deg);\n}\n\n#yuWorkWays .yu-workways__body{\n  position:absolute;\n  left:clamp(18px,1.8vw,34px);\n  right:clamp(18px,1.8vw,34px);\n  top:50%;\n  transform:translateY(-50%);\n}\n\n#yuWorkWays .yu-workways__body h3{\n  margin:0;\n  max-width:650px;\n  font-family:\"Khand\",sans-serif;\n  font-size:clamp(38px,3.5vw,68px);\n  line-height:.86;\n  letter-spacing:-.035em;\n  font-weight:600;\n  text-transform:uppercase;\n  white-space:nowrap;\n  transition:font-size .55s cubic-bezier(.2,.75,.2,1);\n}\n\n#yuWorkWays .yu-workways__item:not(.is-active) .yu-workways__body h3{\n  font-size:clamp(28px,2.25vw,43px);\n  white-space:normal;\n}\n\n#yuWorkWays .yu-workways__body p{\n  width:min(500px,88%);\n  margin:22px 0 0;\n  font-size:18px;\n  line-height:1.42;\n  color:rgba(244,242,236,.84);\n  opacity:0;\n  transform:translateY(10px);\n  transition:opacity .35s ease .08s,transform .45s ease .08s;\n}\n\n#yuWorkWays .yu-workways__item.is-active .yu-workways__body p{\n  opacity:1;\n  transform:none;\n}\n\n#yuWorkWays .yu-workways__bottom{\n  position:absolute;\n  left:clamp(18px,1.8vw,34px);\n  right:clamp(18px,1.8vw,34px);\n  bottom:24px;\n  display:flex;\n  align-items:center;\n  gap:9px;\n  min-width:0;\n  overflow:hidden;\n  white-space:nowrap;\n  font-size:8px;\n  line-height:1;\n  font-weight:700;\n  letter-spacing:.06em;\n  text-transform:uppercase;\n  color:rgba(244,242,236,.55);\n}\n\n#yuWorkWays .yu-workways__bottom i{\n  flex:0 0 20px;\n  height:1px;\n  background:rgba(244,242,236,.22);\n}\n\n#yuWorkWays .yu-workways__conversion{\n  display:flex;\n  flex-direction:column;\n  align-items:flex-start;\n  gap:13px;\n  margin-top:32px;\n}\n\n#yuWorkWays .yu-workways__cta-small{\n  font-size:9px;\n  line-height:1.2;\n  font-weight:700;\n  letter-spacing:.055em;\n  text-transform:uppercase;\n  color:rgba(244,242,236,.58);\n}\n\n\/* =========================================================\n   YU.DESIGN CTA SYSTEM\n   Same plexi language used across the site\n========================================================= *\/\n\n#yuWorkWays .yu-plexi-insert{\n  display:block;\n  width:100%;\n  max-width:370px;\n  height:78px;\n  color:var(--paper);\n  text-decoration:none !important;\n  -webkit-tap-highlight-color:transparent;\n}\n\n#yuWorkWays .yu-plexi-insert__plate{\n  position:relative;\n  display:block;\n  width:100%;\n  height:100%;\n  overflow:hidden;\n  border:1px solid rgba(255,255,255,.54);\n  border-radius:10px;\n  background:\n    linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.045) 54%,rgba(255,255,255,.11)),\n    rgba(255,255,255,.055);\n  -webkit-backdrop-filter:blur(7px) saturate(120%);\n  backdrop-filter:blur(7px) saturate(120%);\n  box-shadow:\n    0 0 0 1px rgba(255,255,255,.08),\n    0 12px 28px rgba(0,0,0,.18),\n    inset 1px 1px 1px rgba(255,255,255,.32),\n    inset -1px -1px 1px rgba(0,0,0,.08);\n}\n\n#yuWorkWays .yu-plexi-insert__plate::after{\n  content:\"\";\n  position:absolute;\n  inset:7px;\n  z-index:1;\n  border:1px solid rgba(255,255,255,.17);\n  border-radius:10px;\n  pointer-events:none;\n}\n\n#yuWorkWays .yu-plexi-insert__band{\n  position:absolute;\n  z-index:0;\n  left:-18%;\n  top:50%;\n  width:78%;\n  height:42px;\n  transform:translateY(-50%) rotate(-2deg);\n  background:var(--orange);\n  transition:\n    width .55s cubic-bezier(.2,.75,.2,1),\n    transform .55s cubic-bezier(.2,.75,.2,1),\n    background .35s ease;\n}\n\n#yuWorkWays .yu-plexi-insert:hover .yu-plexi-insert__band,\n#yuWorkWays .yu-plexi-insert:focus-visible .yu-plexi-insert__band{\n  width:122%;\n  transform:translate(9%,-50%) rotate(1deg);\n  background:var(--blue);\n}\n\n#yuWorkWays .yu-plexi-insert:active .yu-plexi-insert__band{\n  transform:translate(7%,-50%) scale(.985) rotate(1deg);\n}\n\n#yuWorkWays .yu-plexi-insert__shine{\n  position:absolute;\n  z-index:2;\n  top:-24%;\n  left:-32%;\n  width:26%;\n  height:148%;\n  transform:skewX(-18deg);\n  background:linear-gradient(90deg,transparent,rgba(255,255,255,.24),transparent);\n  opacity:.55;\n  pointer-events:none;\n  transition:transform .75s ease;\n}\n\n#yuWorkWays .yu-plexi-insert:hover .yu-plexi-insert__shine,\n#yuWorkWays .yu-plexi-insert:focus-visible .yu-plexi-insert__shine{\n  transform:translateX(360%) skewX(-18deg);\n}\n\n#yuWorkWays .yu-plexi-insert__content{\n  position:absolute;\n  z-index:5;\n  inset:0;\n  display:grid;\n  grid-template-columns:1fr auto;\n  grid-template-rows:auto auto;\n  align-content:center;\n  column-gap:18px;\n  padding:0 28px 0 30px;\n}\n\n#yuWorkWays .yu-plexi-insert__micro{\n  grid-column:1;\n  grid-row:1;\n  margin-bottom:3px;\n  font-size:8px;\n  line-height:1;\n  font-weight:700;\n  letter-spacing:.065em;\n  text-transform:uppercase;\n  color:rgba(244,242,236,.68);\n}\n\n#yuWorkWays .yu-plexi-insert__label{\n  grid-column:1;\n  grid-row:2;\n  font-family:\"Khand\",Arial,sans-serif;\n  font-size:19px;\n  line-height:1;\n  font-weight:600;\n  letter-spacing:.01em;\n  text-transform:uppercase;\n  white-space:nowrap;\n}\n\n#yuWorkWays .yu-plexi-insert__arrow{\n  grid-column:2;\n  grid-row:1\/3;\n  align-self:center;\n  color:var(--paper);\n  font-size:24px;\n  line-height:1;\n  font-weight:400;\n  transition:transform .25s ease;\n}\n\n#yuWorkWays .yu-plexi-insert:hover .yu-plexi-insert__arrow,\n#yuWorkWays .yu-plexi-insert:focus-visible .yu-plexi-insert__arrow{\n  transform:translate(4px,-4px);\n}\n\n#yuWorkWays .yu-plexi-insert__screw{\n  position:absolute;\n  z-index:10;\n  width:9px;\n  height:9px;\n  border-radius:50%;\n  background:\n    radial-gradient(circle at 30% 26%,#fff 0 7%,#eceeef 12%,#b7bcc0 24%,#747b81 42%,#25292d 63%,#b9bec2 80%,#454a4f 100%);\n  box-shadow:0 1px 3px rgba(0,0,0,.36);\n}\n\n#yuWorkWays .yu-plexi-insert__screw::after{\n  content:\"\";\n  position:absolute;\n  left:2.5px;\n  right:2.5px;\n  top:4px;\n  height:1px;\n  background:rgba(0,0,0,.82);\n  transform:rotate(35deg);\n}\n\n#yuWorkWays .yu-plexi-insert__screw--tl{top:8px;left:8px;}\n#yuWorkWays .yu-plexi-insert__screw--tr{top:8px;right:8px;}\n#yuWorkWays .yu-plexi-insert__screw--bl{bottom:8px;left:8px;}\n#yuWorkWays .yu-plexi-insert__screw--br{bottom:8px;right:8px;}\n\n@media(max-width:1024px){\n  #yuWorkWays{\n    padding-top:110px;\n  }\n\n  #yuWorkWays .yu-workways__header{\n    grid-template-columns:1fr 210px;\n  }\n\n  #yuWorkWays .yu-workways__header h2{\n    font-size:clamp(70px,9vw,100px);\n  }\n\n  #yuWorkWays .yu-workways__system{\n    height:500px;\n  }\n\n  #yuWorkWays .yu-workways__body h3{\n    white-space:normal;\n  }\n}\n\n@media(max-width:767px){\n  #yuWorkWays{\n    width:100%;\n    margin:0;\n    padding:78px 10px 38px;\n  }\n\n  #yuWorkWays::after{\n    min-width:360px;\n    min-height:360px;\n    right:-220px;\n    top:-80px;\n  }\n\n  #yuWorkWays .yu-workways__header{\n    display:block;\n    margin:0 8px 44px;\n  }\n\n  #yuWorkWays .yu-workways__micro{\n    margin-bottom:14px;\n    font-size:12px;\n  }\n\n  #yuWorkWays .yu-workways__header h2{\n    font-size:clamp(56px,17vw,82px);\n    line-height:.79;\n  }\n\n  #yuWorkWays .yu-workways__header h2 span:last-child{\n    transform:none;\n  }\n\n  #yuWorkWays .yu-workways__header p{\n    margin-top:25px;\n    font-size:16px;\n  }\n\n  #yuWorkWays .yu-workways__system{\n    display:block;\n    height:auto;\n    border-bottom:0;\n  }\n\n  #yuWorkWays .yu-workways__item,\n  #yuWorkWays .yu-workways__item.is-active{\n    width:100%;\n    min-height:92px;\n    height:92px;\n    padding:19px 16px;\n    border-left:0;\n    border-right:0;\n    border-bottom:1px solid rgba(255,255,255,.18);\n    transition:height .55s cubic-bezier(.2,.75,.2,1),background .35s ease;\n  }\n\n  #yuWorkWays .yu-workways__item.is-active{\n    height:365px;\n  }\n\n  #yuWorkWays .yu-workways__top{\n    grid-template-columns:34px 1fr auto;\n  }\n\n  #yuWorkWays .yu-workways__type{\n    font-size:16px;\n  }\n\n  #yuWorkWays .yu-workways__stripe{\n    top:53%;\n    height:42px;\n  }\n\n  #yuWorkWays .yu-workways__body{\n    left:16px;\n    right:16px;\n    top:145px;\n    transform:none;\n    opacity:0;\n    pointer-events:none;\n    transition:opacity .2s ease;\n  }\n\n  #yuWorkWays .yu-workways__item.is-active .yu-workways__body{\n    opacity:1;\n  }\n\n  #yuWorkWays .yu-workways__body h3,\n  #yuWorkWays .yu-workways__item:not(.is-active) .yu-workways__body h3{\n    font-size:42px;\n    line-height:.88;\n    white-space:normal;\n  }\n\n  #yuWorkWays .yu-workways__body p{\n    width:100%;\n    margin-top:18px;\n    font-size:16px;\n    line-height:1.35;\n  }\n\n  #yuWorkWays .yu-workways__bottom{\n    left:16px;\n    right:16px;\n    bottom:19px;\n    opacity:0;\n    transition:opacity .25s ease .15s;\n  }\n\n  #yuWorkWays .yu-workways__item.is-active .yu-workways__bottom{\n    opacity:1;\n  }\n\n  #yuWorkWays .yu-workways__conversion{\n    margin:26px 8px 0;\n    width:calc(100% - 16px);\n    gap:11px;\n  }\n\n  #yuWorkWays .yu-plexi-insert{\n    max-width:100%;\n    height:70px;\n  }\n\n  #yuWorkWays .yu-plexi-insert__band{\n    width:82%;\n    height:38px;\n  }\n\n  #yuWorkWays .yu-plexi-insert__content{\n    padding:0 23px 0 25px;\n  }\n\n  #yuWorkWays .yu-plexi-insert__label{\n    font-size:17px;\n  }\n\n  #yuWorkWays .yu-plexi-insert__arrow{\n    font-size:21px;\n  }\n}\n\n@media(max-width:390px){\n  #yuWorkWays .yu-workways__header h2{\n    font-size:54px;\n  }\n\n  #yuWorkWays .yu-workways__item.is-active{\n    height:350px;\n  }\n\n  #yuWorkWays .yu-workways__body h3,\n  #yuWorkWays .yu-workways__item:not(.is-active) .yu-workways__body h3{\n    font-size:37px;\n  }\n}\n\n@media(prefers-reduced-motion:reduce){\n  #yuWorkWays *,\n  #yuWorkWays *::before,\n  #yuWorkWays *::after{\n    scroll-behavior:auto !important;\n    animation:none !important;\n    transition:none !important;\n  }\n}\n<\/style>\n\n<script>\n(() => {\n  const root = document.querySelector('#yuWorkWays');\n  if (!root || root.dataset.yuReady === '1') return;\n  root.dataset.yuReady = '1';\n\n  const items = Array.from(root.querySelectorAll('.yu-workways__item'));\n\n  const activate = item => {\n    items.forEach(el => el.classList.toggle('is-active', el === item));\n  };\n\n  items.forEach(item => {\n    item.addEventListener('mouseenter', () => {\n      if (window.matchMedia('(hover:hover)').matches) activate(item);\n    });\n\n    item.addEventListener('focus', () => activate(item));\n\n    item.addEventListener('click', () => {\n      if (window.matchMedia('(max-width:767px)').matches) activate(item);\n    });\n\n    item.addEventListener('keydown', e => {\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault();\n        activate(item);\n      }\n    });\n  });\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-fc86620 e-con-full e-flex e-con e-parent\" data-id=\"fc86620\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-13c4fdb elementor-widget elementor-widget-html\" data-id=\"13c4fdb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section class=\"yu-home-proof\" id=\"yuHomeProof\">\n\n  <div class=\"yu-home-proof__track\">\n\n    <div class=\"yu-home-proof__stage\">\n\n\n      <!-- =====================================================\n           TOP \/ SECTION IDENTITY\n      ====================================================== -->\n\n      <div class=\"yu-home-proof__top\">\n\n        <div class=\"yu-home-proof__section-name\">\n          PROOF\n        <\/div>\n\n\n        <div class=\"yu-home-proof__meta\">\n\n          <span>\n            [REAL TESTIMONIALS]\n          <\/span>\n\n          <span>\n            03 CLIENTS \/ 03 EXPERIENCES\n          <\/span>\n\n        <\/div>\n\n      <\/div>\n\n\n\n      <!-- =====================================================\n           CONTENT\n      ====================================================== -->\n\n      <div class=\"yu-home-proof__content\">\n\n\n        <!-- =================================================\n             01 \/ ADRIANA\n        ================================================== -->\n\n        <article\n          class=\"yu-home-proof__quote is-active\"\n          data-proof=\"1\"\n        >\n\n          <div class=\"yu-home-proof__big\">\n            SHE REALLY<br>\n            LISTENED.\n          <\/div>\n\n          <span\n            class=\"yu-home-proof__brush yu-home-proof__brush--blue\"\n            aria-hidden=\"true\"\n          ><\/span>\n\n\n          <div class=\"yu-home-proof__person\">\n\n            <img\n              class=\"yu-home-proof__avatar\"\n              src=\"https:\/\/www.yuliyapivnyak.it\/wp-content\/uploads\/2026\/05\/adriana-riccio-do-kap.webp\"\n              alt=\"Adriana Riccio\"\n              loading=\"lazy\"\n              decoding=\"async\"\n            >\n\n            <div class=\"yu-home-proof__person-copy\">\n\n              <strong>\n                ADRIANA RICCIO\n              <\/strong>\n\n              <span>\n                Do-KaP.\n              <\/span>\n\n            <\/div>\n\n          <\/div>\n\n        <\/article>\n\n\n\n        <!-- =================================================\n             02 \/ MARIANO\n        ================================================== -->\n\n        <article\n          class=\"yu-home-proof__quote\"\n          data-proof=\"2\"\n        >\n\n          <div class=\"yu-home-proof__big\">\n            THE RESULT IS<br>\n            EXACTLY WHAT<br>\n            WE WANTED.\n          <\/div>\n\n          <span\n            class=\"yu-home-proof__brush yu-home-proof__brush--orange\"\n            aria-hidden=\"true\"\n          ><\/span>\n\n\n          <div class=\"yu-home-proof__person\">\n\n            <img\n              class=\"yu-home-proof__avatar\"\n              src=\"https:\/\/www.yuliyapivnyak.it\/wp-content\/uploads\/2026\/05\/mariano-pollio.webp\"\n              alt=\"Mariano Pollio\"\n              loading=\"lazy\"\n              decoding=\"async\"\n            >\n\n            <div class=\"yu-home-proof__person-copy\">\n\n              <strong>\n                MARIANO POLLIO\n              <\/strong>\n\n              <span>\n                SIGESTI GROUP\n              <\/span>\n\n            <\/div>\n\n          <\/div>\n\n        <\/article>\n\n\n\n        <!-- =================================================\n             03 \/ ANDREA\n        ================================================== -->\n\n        <article\n          class=\"yu-home-proof__quote\"\n          data-proof=\"3\"\n        >\n\n          <div class=\"yu-home-proof__big\">\n            IT WAS A PLEASURE<br>\n            TO TRUST HER WITH OUR WEBSITE.\n          <\/div>\n\n          <span\n            class=\"yu-home-proof__brush yu-home-proof__brush--blue\"\n            aria-hidden=\"true\"\n          ><\/span>\n\n\n          <div class=\"yu-home-proof__person\">\n\n            <img\n              class=\"yu-home-proof__avatar\"\n              src=\"https:\/\/www.yuliyapivnyak.it\/wp-content\/uploads\/2026\/05\/andrea-daffini.webp\"\n              alt=\"Andrea Daffini\"\n              loading=\"lazy\"\n              decoding=\"async\"\n            >\n\n            <div class=\"yu-home-proof__person-copy\">\n\n              <strong>\n                ANDREA DAFFINI\n              <\/strong>\n\n              <span>\n                SIMI HOSPITALITY\n              <\/span>\n\n            <\/div>\n\n          <\/div>\n\n        <\/article>\n\n      <\/div>\n\n\n\n      <!-- =====================================================\n           FOOTER\n      ====================================================== -->\n\n      <div class=\"yu-home-proof__footer\">\n\n\n        <div class=\"yu-home-proof__counter\">\n\n          <span class=\"yu-home-proof__current\">\n            01\n          <\/span>\n\n          <span>\n            \/ 03\n          <\/span>\n\n        <\/div>\n\n\n\n        <!-- =================================================\n             CTA\n        ================================================== -->\n\n        <a\n          class=\"yu-double-cta\"\n          href=\"\/testimonianze\/\"\n          aria-label=\"Read the testimonials\"\n        >\n\n          <span\n            class=\"yu-double-cta__back\"\n            aria-hidden=\"true\"\n          ><\/span>\n\n          <span\n            class=\"yu-double-cta__tab\"\n            aria-hidden=\"true\"\n          ><\/span>\n\n\n          <span class=\"yu-double-cta__front\">\n\n            <i\n              class=\"yu-double-screw yu-double-screw--tl\"\n              aria-hidden=\"true\"\n            ><\/i>\n\n            <i\n              class=\"yu-double-screw yu-double-screw--br\"\n              aria-hidden=\"true\"\n            ><\/i>\n\n\n            <span\n              class=\"yu-double-cta__reflection\"\n              aria-hidden=\"true\"\n            ><\/span>\n\n\n            <span class=\"yu-double-cta__content\">\n\n              <span class=\"yu-double-cta__micro\">\n                PROOF \/ 03\n              <\/span>\n\n\n              <span class=\"yu-double-cta__row\">\n\n                <span class=\"yu-double-cta__label\">\n                  READ THE TESTIMONIALS\n                <\/span>\n\n                <span\n                  class=\"yu-double-cta__arrow\"\n                  aria-hidden=\"true\"\n                >\n                  \u2197\n                <\/span>\n\n              <\/span>\n\n            <\/span>\n\n          <\/span>\n\n        <\/a>\n\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n\n<style>\n\n\/* =========================================================\n   01 \u2014 ROOT\n========================================================= *\/\n\n.yu-home-proof{\n\n  --yu-bg:#F4F2EC;\n  --yu-text:#111111;\n  --yu-blue:#405FD7;\n  --yu-orange:#EA6B3A;\n\n  position:relative;\n\n  width:100%;\n\n  background:\n    var(--yu-bg);\n\n  color:\n    var(--yu-text);\n\n  font-family:\n    Inter,\n    Arial,\n    sans-serif;\n\n  overflow:clip;\n\n}\n\n\n.yu-home-proof *,\n.yu-home-proof *::before,\n.yu-home-proof *::after{\n\n  box-sizing:border-box;\n\n}\n\n\n\n\/* =========================================================\n   02 \u2014 TRACK\n========================================================= *\/\n\n.yu-home-proof__track{\n\n  position:relative;\n\n  height:160vh;\n\n}\n\n\n\n\/* =========================================================\n   03 \u2014 STAGE\n========================================================= *\/\n\n.yu-home-proof__stage{\n\n  position:sticky;\n\n  top:100px;\n\n  width:100%;\n\n  height:\n    calc(100svh - 100px);\n\n  min-height:600px;\n\n  max-height:840px;\n\n  display:grid;\n\n  grid-template-rows:\n    auto\n    minmax(0,1fr)\n    auto;\n\n  padding:\n    28px\n    clamp(30px,4vw,74px)\n    30px;\n\n  background:\n    var(--yu-bg);\n\n  overflow:hidden;\n\n}\n\n\n\n\/* =========================================================\n   04 \u2014 TOP\n========================================================= *\/\n\n.yu-home-proof__top{\n\n  position:relative;\n\n  z-index:30;\n\n  display:grid;\n\n  grid-template-columns:\n    auto\n    minmax(0,1fr);\n\n  align-items:start;\n\n  gap:\n    clamp(30px,4vw,70px);\n\n}\n\n\n\n\/* =========================================================\n   05 \u2014 SECTION NAME\n========================================================= *\/\n\n.yu-home-proof__section-name{\n\n  position:relative;\n\n  color:\n    var(--yu-text);\n\n  font-family:\n    Khand,\n    Impact,\n    sans-serif;\n\n  font-size:48px;\n\n  line-height:.9;\n\n  font-weight:600;\n\n  letter-spacing:-.02em;\n\n  text-transform:uppercase;\n\n}\n\n\n\/* orange identifier *\/\n\n.yu-home-proof__section-name::after{\n\n  content:\"\";\n\n  display:inline-block;\n\n  width:8px;\n  height:8px;\n\n  margin-left:9px;\n\n  border-radius:50%;\n\n  vertical-align:top;\n\n  background:\n    var(--yu-orange);\n\n}\n\n\n\n\/* =========================================================\n   06 \u2014 META \/ TECH LABEL\n========================================================= *\/\n\n.yu-home-proof__meta{\n\n  position:relative;\n\n  z-index:20;\n\n  display:flex;\n\n  justify-content:space-between;\n\n  align-items:center;\n\n  gap:20px;\n\n  padding-top:4px;\n\n  color:\n    var(--yu-text);\n\n  font-family:\n    Inter,\n    Arial,\n    sans-serif;\n\n  font-size:14px;\n\n  line-height:1;\n\n  font-weight:700;\n\n  letter-spacing:.045em;\n\n  text-transform:uppercase;\n\n}\n\n\n\n\/* =========================================================\n   07 \u2014 CONTENT\n========================================================= *\/\n\n.yu-home-proof__content{\n\n  position:relative;\n\n  width:100%;\n\n  min-height:0;\n\n  display:flex;\n\n  align-items:center;\n\n  justify-content:center;\n\n  transform:\n    translateY(-1.5%);\n\n}\n\n\n\n\/* =========================================================\n   08 \u2014 TESTIMONIAL\n========================================================= *\/\n\n.yu-home-proof__quote{\n\n  position:absolute;\n\n  left:50%;\n  top:50%;\n\n  width:\n    min(1220px,87vw);\n\n  opacity:0;\n\n  transform:\n    translate(\n      -50%,\n      calc(-50% + 24px)\n    )\n    scale(.99);\n\n  pointer-events:none;\n\n  transition:\n    opacity .45s ease,\n    transform .68s\n    cubic-bezier(.22,1,.36,1);\n\n}\n\n\n.yu-home-proof__quote.is-active{\n\n  opacity:1;\n\n  transform:\n    translate(-50%,-50%);\n\n  pointer-events:auto;\n\n}\n\n\n\n\/* =========================================================\n   09 \u2014 DISPLAY QUOTE\n========================================================= *\/\n\n.yu-home-proof__big{\n\n  position:relative;\n\n  z-index:3;\n\n  color:\n    var(--yu-text);\n\n  font-family:\n    Khand,\n    Impact,\n    sans-serif;\n\n  font-size:\n    clamp(68px,7.2vw,136px);\n\n  line-height:.78;\n\n  font-weight:600;\n\n  letter-spacing:-.045em;\n\n  text-transform:uppercase;\n\n  text-align:center;\n\n}\n\n\n\n\/* =========================================================\n   10 \u2014 BRUSH\n========================================================= *\/\n\n.yu-home-proof__brush{\n\n  position:absolute;\n\n  z-index:2;\n\n  left:50%;\n  top:51%;\n\n  width:0;\n\n  height:\n    clamp(23px,2vw,39px);\n\n  transform:\n    translate(-50%,-50%)\n    rotate(-1deg);\n\n  opacity:.96;\n\n  transition:\n    width .82s\n    cubic-bezier(.22,1,.36,1)\n    .12s;\n\n  clip-path:\n    polygon(\n      0 32%,\n      9% 18%,\n      20% 27%,\n      33% 13%,\n      48% 24%,\n      63% 10%,\n      78% 22%,\n      90% 8%,\n      100% 18%,\n      97% 80%,\n      83% 69%,\n      67% 86%,\n      50% 74%,\n      31% 88%,\n      16% 75%,\n      0 84%\n    );\n\n}\n\n\n.yu-home-proof__quote.is-active\n.yu-home-proof__brush{\n\n  width:\n    min(680px,61vw);\n\n}\n\n\n.yu-home-proof__brush--blue{\n  background:var(--yu-blue);\n}\n\n\n.yu-home-proof__brush--orange{\n  background:var(--yu-orange);\n}\n\n\n\n\/* =========================================================\n   11 \u2014 PERSON\n========================================================= *\/\n\n.yu-home-proof__person{\n\n  position:relative;\n\n  z-index:4;\n\n  display:flex;\n\n  justify-content:center;\n\n  align-items:center;\n\n  gap:14px;\n\n  margin-top:\n    clamp(12px,1.4vw,22px);\n\n  opacity:0;\n\n  transform:\n    translateY(9px);\n\n  transition:\n    opacity .4s ease .20s,\n    transform .52s\n    cubic-bezier(.22,1,.36,1)\n    .20s;\n\n}\n\n\n.yu-home-proof__quote.is-active\n.yu-home-proof__person{\n\n  opacity:1;\n\n  transform:none;\n\n}\n\n\n\n\/* =========================================================\n   12 \u2014 AVATAR\n========================================================= *\/\n\n.yu-home-proof__avatar{\n\n  display:block;\n\n  width:\n    clamp(52px,4vw,68px);\n\n  height:\n    clamp(52px,4vw,68px);\n\n  aspect-ratio:1 \/ 1;\n\n  flex:0 0 auto;\n\n  padding:3px;\n\n  border:\n    1px solid\n    rgba(17,17,17,.18);\n\n  border-radius:50% !important;\n\n  background:\n    var(--yu-bg);\n\n  object-fit:cover;\n\n  object-position:center;\n\n  overflow:hidden;\n\n}\n\n\n\n\/* =========================================================\n   13 \u2014 PERSON COPY\n========================================================= *\/\n\n.yu-home-proof__person-copy{\n\n  display:flex;\n\n  flex-direction:column;\n\n  align-items:flex-start;\n\n  gap:5px;\n\n}\n\n\n.yu-home-proof__person-copy strong{\n\n  color:\n    var(--yu-text);\n\n  font-family:\n    Khand,\n    \"Arial Narrow\",\n    Arial,\n    sans-serif;\n\n  font-size:24px;\n\n  line-height:1;\n\n  font-weight:600;\n\n  text-transform:uppercase;\n\n}\n\n\n.yu-home-proof__person-copy span{\n\n  color:\n    var(--yu-text);\n\n  font-family:\n    Inter,\n    Arial,\n    sans-serif;\n\n  font-size:16px;\n\n  line-height:1.2;\n\n  font-weight:400;\n\n  opacity:.62;\n\n}\n\n\n\n\/* =========================================================\n   14 \u2014 FOOTER\n========================================================= *\/\n\n.yu-home-proof__footer{\n\n  position:relative;\n\n  z-index:30;\n\n  width:100%;\n\n  display:flex;\n\n  justify-content:space-between;\n\n  align-items:flex-end;\n\n  gap:\n    clamp(25px,4vw,60px);\n\n}\n\n\n\n\/* =========================================================\n   15 \u2014 COUNTER\n========================================================= *\/\n\n.yu-home-proof__counter{\n\n  display:flex;\n\n  align-items:flex-end;\n\n  gap:7px;\n\n  flex:0 0 auto;\n\n  padding-bottom:4px;\n\n  color:\n    var(--yu-text);\n\n  font-family:\n    Khand,\n    sans-serif;\n\n  font-size:14px;\n\n  line-height:1;\n\n  font-weight:600;\n\n}\n\n\n.yu-home-proof__current{\n\n  color:\n    var(--yu-blue);\n\n  font-size:34px;\n\n  font-weight:600;\n\n}\n\n\n\n\/* =========================================================\n   16 \u2014 CTA ROOT\n   SMALL COMPONENT = RADIUS 10\n========================================================= *\/\n\n.yu-double-cta{\n\n  --yu-blue:#405FD7;\n  --yu-orange:#EA6B3A;\n  --yu-black:#111111;\n\n  position:relative;\n\n  display:block;\n\n  width:100%;\n\n  max-width:370px;\n\n  height:80px;\n\n  flex:\n    0\n    1\n    370px;\n\n  color:\n    var(--yu-black) !important;\n\n  text-decoration:none !important;\n\n  cursor:pointer;\n\n  isolation:isolate;\n\n}\n\n\n\n\/* =========================================================\n   17 \u2014 BACK PLATE\n========================================================= *\/\n\n.yu-double-cta__back{\n\n  position:absolute;\n\n  z-index:0;\n\n  inset:4px;\n\n  border-radius:10px;\n\n  background:\n    linear-gradient(\n      145deg,\n      #4D69DE,\n      #334DBE\n    );\n\n  transform:\n    rotate(2.2deg)\n    translate(3px,3px);\n\n  box-shadow:\n    0 8px 18px\n    rgba(40,55,120,.16);\n\n  transition:\n    transform .32s\n    cubic-bezier(.22,.8,.22,1),\n    box-shadow .3s ease;\n\n}\n\n\n\n\/* =========================================================\n   18 \u2014 ORANGE TAB\n========================================================= *\/\n\n.yu-double-cta__tab{\n\n  position:absolute;\n\n  z-index:1;\n\n  left:24px;\n\n  bottom:-7px;\n\n  width:72px;\n\n  height:17px;\n\n  border-radius:2px;\n\n  background:\n    var(--yu-orange);\n\n  transform:\n    rotate(-3deg)\n    translateY(-3px);\n\n  transition:\n    transform .3s\n    cubic-bezier(.22,.8,.22,1),\n    width .3s ease;\n\n}\n\n\n\n\/* =========================================================\n   19 \u2014 FRONT PLEXI\n========================================================= *\/\n\n.yu-double-cta__front{\n\n  position:absolute;\n\n  z-index:3;\n\n  inset:0;\n\n  display:block;\n\n  overflow:hidden;\n\n  border-radius:10px;\n\n  background:\n    linear-gradient(\n      145deg,\n      rgba(255,255,255,.78),\n      rgba(232,237,245,.57)\n    );\n\n  border:\n    1px solid\n    rgba(255,255,255,.95);\n\n  backdrop-filter:\n    blur(7px)\n    saturate(120%);\n\n  -webkit-backdrop-filter:\n    blur(7px)\n    saturate(120%);\n\n  box-shadow:\n    0 0 0 1px rgba(142,154,175,.22),\n    0 0 0 3px rgba(235,242,252,.22),\n    0 10px 18px rgba(25,31,55,.13),\n    inset 1px 1px 3px rgba(255,255,255,.96),\n    inset -3px -3px 6px rgba(35,45,75,.10);\n\n  transition:\n    transform .32s\n    cubic-bezier(.22,.8,.22,1),\n    box-shadow .3s ease;\n\n}\n\n\n.yu-double-cta__front::before{\n\n  content:\"\";\n\n  position:absolute;\n\n  inset:5px;\n\n  border-radius:7px;\n\n  border:\n    1px solid\n    rgba(255,255,255,.5);\n\n  pointer-events:none;\n\n}\n\n\n.yu-double-cta__front::after{\n\n  content:\"\";\n\n  position:absolute;\n\n  left:10px;\n  right:10px;\n\n  bottom:3px;\n\n  height:4px;\n\n  border-radius:\n    0 0 7px 7px;\n\n  background:\n    linear-gradient(\n      to bottom,\n      rgba(255,255,255,.25),\n      rgba(45,55,80,.12)\n    );\n\n  pointer-events:none;\n\n}\n\n\n\n\/* =========================================================\n   20 \u2014 REFLECTION\n========================================================= *\/\n\n.yu-double-cta__reflection{\n\n  position:absolute;\n\n  z-index:1;\n\n  top:-55%;\n  left:-22%;\n\n  width:40%;\n  height:195%;\n\n  background:\n    linear-gradient(\n      105deg,\n      transparent,\n      rgba(255,255,255,.40),\n      transparent\n    );\n\n  transform:\n    rotate(12deg)\n    translateX(-45%);\n\n  opacity:.4;\n\n  transition:\n    transform .55s\n    cubic-bezier(.22,.8,.22,1);\n\n  pointer-events:none;\n\n}\n\n\n\n\/* =========================================================\n   21 \u2014 CTA CONTENT\n========================================================= *\/\n\n.yu-double-cta__content{\n\n  position:absolute;\n\n  z-index:5;\n\n  inset:0;\n\n  display:flex;\n\n  flex-direction:column;\n\n  justify-content:center;\n\n  padding:\n    11px\n    31px;\n\n}\n\n\n.yu-double-cta__micro{\n\n  display:block;\n\n  margin-bottom:6px;\n\n  color:\n    rgba(17,17,17,.52);\n\n  font-family:\n    Inter,\n    Arial,\n    sans-serif;\n\n  font-size:11px;\n\n  line-height:1;\n\n  font-weight:700;\n\n  letter-spacing:.08em;\n\n  text-transform:uppercase;\n\n  transition:\n    color .25s ease,\n    transform .3s ease;\n\n}\n\n\n.yu-double-cta__row{\n\n  display:flex;\n\n  align-items:center;\n\n  justify-content:space-between;\n\n  gap:18px;\n\n}\n\n\n.yu-double-cta__label{\n\n  font-family:\n    Khand,\n    \"Arial Narrow\",\n    Arial,\n    sans-serif;\n\n  font-size:20px;\n\n  line-height:1;\n\n  font-weight:600;\n\n  letter-spacing:-.01em;\n\n  text-transform:uppercase;\n\n  white-space:nowrap;\n\n  transition:\n    transform .3s\n    cubic-bezier(.22,.8,.22,1),\n    color .25s ease;\n\n}\n\n\n.yu-double-cta__arrow{\n\n  flex:0 0 auto;\n\n  display:flex;\n\n  align-items:center;\n\n  justify-content:center;\n\n  width:27px;\n  height:27px;\n\n  color:\n    var(--yu-blue);\n\n  font-family:\n    Arial,\n    sans-serif;\n\n  font-size:27px;\n\n  line-height:1;\n\n  transition:\n    transform .32s\n    cubic-bezier(.22,.8,.22,1),\n    color .25s ease;\n\n}\n\n\n\n\/* =========================================================\n   22 \u2014 SCREWS\n========================================================= *\/\n\n.yu-double-screw{\n\n  position:absolute;\n\n  z-index:8;\n\n  width:10px;\n  height:10px;\n\n  border-radius:50%;\n\n  background:\n    radial-gradient(\n      circle at 31% 27%,\n      #fff 0 7%,\n      #e4e7e9 14%,\n      #9fa5aa 30%,\n      #5d646a 47%,\n      #292d31 64%,\n      #adb2b7 79%,\n      #454b50 100%\n    );\n\n  box-shadow:\n    0 1px 2px\n    rgba(0,0,0,.4);\n\n}\n\n\n.yu-double-screw::after{\n\n  content:\"\";\n\n  position:absolute;\n\n  left:2px;\n  right:2px;\n\n  top:4.5px;\n\n  height:1px;\n\n  background:\n    rgba(0,0,0,.8);\n\n  transform:\n    rotate(35deg);\n\n}\n\n\n.yu-double-screw--tl{\n  top:9px;\n  left:9px;\n}\n\n\n.yu-double-screw--br{\n  right:9px;\n  bottom:9px;\n}\n\n\n\n\/* =========================================================\n   23 \u2014 HOVER\n========================================================= *\/\n\n@media(hover:hover){\n\n  .yu-double-cta:hover\n  .yu-double-cta__front{\n\n    transform:\n      translate(-4px,-4px)\n      rotate(-.6deg);\n\n  }\n\n\n  .yu-double-cta:hover\n  .yu-double-cta__back{\n\n    transform:\n      rotate(3.2deg)\n      translate(8px,7px);\n\n  }\n\n\n  .yu-double-cta:hover\n  .yu-double-cta__tab{\n\n    width:96px;\n\n    transform:\n      rotate(-4deg)\n      translateY(1px);\n\n  }\n\n\n  .yu-double-cta:hover\n  .yu-double-cta__reflection{\n\n    transform:\n      rotate(12deg)\n      translateX(370%);\n\n  }\n\n\n  .yu-double-cta:hover\n  .yu-double-cta__micro{\n\n    color:\n      var(--yu-orange);\n\n    transform:\n      translateX(2px);\n\n  }\n\n\n  .yu-double-cta:hover\n  .yu-double-cta__label{\n\n    transform:\n      translateX(3px);\n\n  }\n\n\n  .yu-double-cta:hover\n  .yu-double-cta__arrow{\n\n    color:\n      var(--yu-orange);\n\n    transform:\n      translate(5px,-5px)\n      rotate(4deg);\n\n  }\n\n}\n\n\n\n\/* =========================================================\n   24 \u2014 FOCUS\n========================================================= *\/\n\n.yu-double-cta:focus-visible{\n\n  outline:\n    2px solid\n    var(--yu-blue);\n\n  outline-offset:7px;\n\n}\n\n\n\n\/* =========================================================\n   25 \u2014 TABLET\n========================================================= *\/\n\n@media(max-width:1100px) and (min-width:768px){\n\n  .yu-home-proof__track{\n    height:152vh;\n  }\n\n\n  .yu-home-proof__stage{\n\n    top:86px;\n\n    height:\n      calc(100svh - 86px);\n\n    min-height:540px;\n\n    max-height:750px;\n\n    padding:\n      22px\n      clamp(22px,4vw,42px)\n      28px;\n\n  }\n\n\n  .yu-home-proof__top{\n    gap:30px;\n  }\n\n\n  .yu-home-proof__section-name{\n    font-size:40px;\n  }\n\n\n  .yu-home-proof__meta{\n    font-size:13px;\n  }\n\n\n  .yu-home-proof__quote{\n\n    width:\n      min(760px,88vw);\n\n  }\n\n\n  .yu-home-proof__big{\n\n    font-size:\n      clamp(50px,7vw,78px);\n\n    line-height:.79;\n\n  }\n\n\n  .yu-home-proof__quote.is-active\n  .yu-home-proof__brush{\n\n    width:\n      min(490px,60vw);\n\n  }\n\n\n  .yu-home-proof__person{\n    margin-top:10px;\n  }\n\n\n  .yu-home-proof__avatar{\n\n    width:54px;\n    height:54px;\n\n  }\n\n\n  .yu-home-proof__person-copy strong{\n    font-size:22px;\n  }\n\n\n  .yu-home-proof__person-copy span{\n    font-size:16px;\n  }\n\n\n  .yu-double-cta{\n\n    max-width:340px;\n\n    height:72px;\n\n    flex-basis:340px;\n\n  }\n\n\n  .yu-double-cta__label{\n    font-size:20px;\n  }\n\n}\n\n\n\n\/* =========================================================\n   26 \u2014 MOBILE\n========================================================= *\/\n\n@media(max-width:767px){\n\n  .yu-home-proof{\n    overflow:visible;\n  }\n\n\n  .yu-home-proof__track{\n    height:auto;\n  }\n\n\n  .yu-home-proof__stage{\n\n    position:relative;\n\n    top:auto;\n\n    display:block;\n\n    height:auto;\n\n    min-height:0;\n    max-height:none;\n\n    padding:\n      38px\n      0\n      30px;\n\n    overflow:visible;\n\n  }\n\n\n\n  \/* TOP *\/\n\n  .yu-home-proof__top{\n\n    display:block;\n\n    padding:\n      0\n      14px;\n\n  }\n\n\n  .yu-home-proof__section-name{\n\n    margin-bottom:20px;\n\n    font-size:34px;\n\n  }\n\n\n  .yu-home-proof__meta{\n\n    padding:0;\n\n    margin-bottom:16px;\n\n    font-size:12px;\n\n  }\n\n\n  .yu-home-proof__meta span:last-child{\n    display:none;\n  }\n\n\n\n  \/* SCROLLER *\/\n\n  .yu-home-proof__content{\n\n    position:relative;\n\n    display:flex;\n\n    align-items:stretch;\n\n    justify-content:flex-start;\n\n    gap:10px;\n\n    width:100%;\n\n    height:auto;\n\n    min-height:0;\n\n    padding:\n      0\n      14px\n      6px;\n\n    transform:none;\n\n    overflow-x:auto;\n    overflow-y:hidden;\n\n    scroll-snap-type:\n      x mandatory;\n\n    scroll-padding-left:14px;\n\n    -webkit-overflow-scrolling:\n      touch;\n\n    overscroll-behavior-x:\n      contain;\n\n    scrollbar-width:none;\n\n  }\n\n\n  .yu-home-proof__content::-webkit-scrollbar{\n    display:none;\n  }\n\n\n\n  \/* SLIDE *\/\n\n  .yu-home-proof__quote{\n\n    position:relative;\n\n    left:auto;\n    top:auto;\n\n    flex:\n      0\n      0\n      calc(100vw - 96px);\n\n    width:auto;\n\n    min-height:300px;\n\n    margin:0;\n\n    padding:\n      18px\n      17px\n      17px;\n\n    display:flex;\n\n    flex-direction:column;\n\n    justify-content:center;\n\n    opacity:1 !important;\n\n    transform:none !important;\n\n    pointer-events:auto;\n\n    scroll-snap-align:start;\n\n    scroll-snap-stop:always;\n\n  }\n\n\n  .yu-home-proof__quote:last-child{\n    margin-right:14px;\n  }\n\n\n  .yu-home-proof__big{\n\n    font-size:\n      clamp(39px,11.6vw,51px);\n\n    line-height:.77;\n\n    text-align:left;\n\n  }\n\n\n  .yu-home-proof__brush{\n\n    left:17px;\n    top:51%;\n\n    width:75% !important;\n\n    height:17px;\n\n    transform:\n      translateY(-50%)\n      rotate(-1deg);\n\n  }\n\n\n  .yu-home-proof__person{\n\n    justify-content:flex-start;\n\n    margin-top:13px;\n\n    gap:10px;\n\n    opacity:1 !important;\n\n    transform:none !important;\n\n  }\n\n\n  .yu-home-proof__avatar{\n\n    width:47px;\n    height:47px;\n\n    min-width:47px;\n    min-height:47px;\n\n    flex-basis:47px;\n\n  }\n\n\n  .yu-home-proof__person-copy strong{\n    font-size:20px;\n  }\n\n\n  .yu-home-proof__person-copy span{\n    font-size:16px;\n  }\n\n\n\n  \/* FOOTER *\/\n\n  .yu-home-proof__footer{\n\n    display:block;\n\n    padding:\n      12px\n      14px\n      0;\n\n  }\n\n\n  .yu-home-proof__counter{\n    display:none;\n  }\n\n\n\n  \/* CTA *\/\n\n  .yu-double-cta{\n\n    width:100%;\n\n    max-width:none;\n\n    height:68px;\n\n  }\n\n\n  .yu-double-cta__content{\n\n    padding:\n      9px\n      25px;\n\n  }\n\n\n  .yu-double-cta__micro{\n    font-size:11px;\n  }\n\n\n  .yu-double-cta__label{\n\n    font-size:18px;\n\n    white-space:normal;\n\n  }\n\n\n  .yu-double-cta__arrow{\n\n    width:23px;\n    height:23px;\n\n    font-size:23px;\n\n  }\n\n\n  .yu-double-cta__tab{\n\n    left:20px;\n\n    width:62px;\n    height:15px;\n\n  }\n\n}\n\n\n\n\/* =========================================================\n   27 \u2014 SMALL MOBILE\n========================================================= *\/\n\n@media(max-width:390px){\n\n  .yu-home-proof__quote{\n\n    flex-basis:\n      calc(100vw - 82px);\n\n    min-height:285px;\n\n    padding:\n      17px\n      15px\n      15px;\n\n  }\n\n\n  .yu-home-proof__big{\n\n    font-size:\n      clamp(36px,11.3vw,46px);\n\n  }\n\n\n  .yu-home-proof__brush{\n\n    left:15px;\n\n    width:76% !important;\n\n  }\n\n\n  .yu-home-proof__avatar{\n\n    width:44px;\n    height:44px;\n\n    min-width:44px;\n    min-height:44px;\n\n    flex-basis:44px;\n\n  }\n\n}\n\n\n\n\/* =========================================================\n   28 \u2014 REDUCED MOTION\n========================================================= *\/\n\n@media(prefers-reduced-motion:reduce){\n\n  .yu-home-proof__quote,\n  .yu-home-proof__brush,\n  .yu-home-proof__person,\n  .yu-double-cta__front,\n  .yu-double-cta__back,\n  .yu-double-cta__tab,\n  .yu-double-cta__reflection,\n  .yu-double-cta__micro,\n  .yu-double-cta__label,\n  .yu-double-cta__arrow{\n\n    transition:none !important;\n\n  }\n\n}\n\n<\/style>\n\n\n\n<script>\n\n(function(){\n\n  const root =\n    document.querySelector(\n      '#yuHomeProof'\n    );\n\n\n  if(!root){\n    return;\n  }\n\n\n  const track =\n    root.querySelector(\n      '.yu-home-proof__track'\n    );\n\n\n  const content =\n    root.querySelector(\n      '.yu-home-proof__content'\n    );\n\n\n  const quotes =\n    Array.from(\n      root.querySelectorAll(\n        '.yu-home-proof__quote'\n      )\n    );\n\n\n  const counter =\n    root.querySelector(\n      '.yu-home-proof__current'\n    );\n\n\n  if(\n    !track ||\n    !content ||\n    !quotes.length\n  ){\n    return;\n  }\n\n\n\n  function clamp(\n    value,\n    min,\n    max\n  ){\n\n    return Math.max(\n      min,\n      Math.min(\n        max,\n        value\n      )\n    );\n\n  }\n\n\n\n  \/* =======================================================\n     DESKTOP \/ TABLET\n  ======================================================= *\/\n\n  function updateVertical(){\n\n    if(\n      window.innerWidth <= 767\n    ){\n      return;\n    }\n\n\n    const rect =\n      track.getBoundingClientRect();\n\n\n    const stage =\n      root.querySelector(\n        '.yu-home-proof__stage'\n      );\n\n\n    const stageHeight =\n      stage\n        ? stage.offsetHeight\n        : window.innerHeight;\n\n\n    const total =\n      track.offsetHeight -\n      stageHeight;\n\n\n    if(total <= 0){\n      return;\n    }\n\n\n    let progress =\n      (-rect.top + 100) \/\n      total;\n\n\n    progress =\n      clamp(\n        progress,\n        0,\n        1\n      );\n\n\n    let index = 0;\n\n\n    if(progress >= .333){\n      index = 1;\n    }\n\n\n    if(progress >= .666){\n      index = 2;\n    }\n\n\n    quotes.forEach(function(\n      quote,\n      i\n    ){\n\n      quote.classList.toggle(\n        'is-active',\n        i === index\n      );\n\n    });\n\n\n    if(counter){\n\n      counter.textContent =\n        String(\n          index + 1\n        ).padStart(\n          2,\n          '0'\n        );\n\n    }\n\n  }\n\n\n\n  \/* =======================================================\n     MOBILE\n  ======================================================= *\/\n\n  function updateMobile(){\n\n    if(\n      window.innerWidth > 767\n    ){\n      return;\n    }\n\n\n    quotes.forEach(function(quote){\n\n      quote.classList.add(\n        'is-active'\n      );\n\n    });\n\n  }\n\n\n\n  \/* =======================================================\n     RAF UPDATE\n  ======================================================= *\/\n\n  let ticking = false;\n\n\n  function requestUpdate(){\n\n    if(ticking){\n      return;\n    }\n\n\n    ticking = true;\n\n\n    requestAnimationFrame(function(){\n\n      updateVertical();\n\n      updateMobile();\n\n      ticking = false;\n\n    });\n\n  }\n\n\n\n  window.addEventListener(\n    'scroll',\n    requestUpdate,\n    {\n      passive:true\n    }\n  );\n\n\n  window.addEventListener(\n    'resize',\n    requestUpdate,\n    {\n      passive:true\n    }\n  );\n\n\n  updateVertical();\n  updateMobile();\n\n})();\n\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4889550 e-con-full e-flex e-con e-parent\" data-id=\"4889550\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b4efc9c elementor-widget elementor-widget-n-carousel\" data-id=\"b4efc9c\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;carousel_items&quot;:[{&quot;slide_title&quot;:&quot;Slide #1&quot;,&quot;_id&quot;:&quot;0d70130&quot;},{&quot;slide_title&quot;:&quot;Slide #2&quot;,&quot;_id&quot;:&quot;676a2ad&quot;},{&quot;slide_title&quot;:&quot;Slide #3&quot;,&quot;_id&quot;:&quot;dbff6dd&quot;},{&quot;slide_title&quot;:&quot;Slide #3&quot;,&quot;_id&quot;:&quot;bbd937d&quot;},{&quot;slide_title&quot;:&quot;Slide #3&quot;,&quot;_id&quot;:&quot;cb62927&quot;},{&quot;slide_title&quot;:&quot;Slide #3&quot;,&quot;_id&quot;:&quot;28975ce&quot;},{&quot;slide_title&quot;:&quot;Slide #3&quot;,&quot;_id&quot;:&quot;e577956&quot;}],&quot;slides_to_show&quot;:&quot;8&quot;,&quot;slides_to_show_mobile&quot;:&quot;7&quot;,&quot;image_spacing_custom&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:120,&quot;sizes&quot;:[]},&quot;image_spacing_custom_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:15,&quot;sizes&quot;:[]},&quot;slides_to_show_tablet&quot;:&quot;7&quot;,&quot;infinite&quot;:&quot;yes&quot;,&quot;speed&quot;:500,&quot;offset_sides&quot;:&quot;none&quot;,&quot;image_spacing_custom_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}\" data-widget_type=\"nested-carousel.default\">\n\t\t\t\t\t\t\t<div class=\"e-n-carousel swiper\" role=\"region\" aria-roledescription=\"carousel\" aria-label=\"Carosello\" dir=\"ltr\">\n\t\t\t<div class=\"swiper-wrapper\" aria-live=\"polite\">\n\t\t\t\t\t\t\t\t\t\t<div class=\"swiper-slide\" data-slide=\"1\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"1 of 7\">\n\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-df5380f e-flex e-con-boxed e-con e-child\" data-id=\"df5380f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0bda262 elementor-widget__width-initial elementor-widget elementor-widget-image\" data-id=\"0bda262\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/nnlogistic.it\/\" target=\"_blank\">\n\t\t\t\t\t\t\t<img decoding=\"async\" width=\"201\" height=\"68\" src=\"https:\/\/www.yuliyapivnyak.it\/en\/wp-content\/uploads\/sites\/2\/2026\/05\/immagine-259-e1778102396611.png\" class=\"attachment-medium size-medium wp-image-10624\" alt=\"\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"swiper-slide\" data-slide=\"2\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"2 of 7\">\n\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-b3efc0a e-flex e-con-boxed e-con e-child\" data-id=\"b3efc0a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bc7fc3e elementor-widget__width-initial elementor-widget elementor-widget-image\" data-id=\"bc7fc3e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"http:\/\/www.do-kap.it\" target=\"_blank\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"278\" height=\"300\" src=\"https:\/\/www.yuliyapivnyak.it\/en\/wp-content\/uploads\/sites\/2\/2026\/05\/Do-Kap-Logo1.png-removebg-preview-e1777995125602-278x300.png\" class=\"attachment-medium size-medium wp-image-10625\" alt=\"\" srcset=\"https:\/\/www.yuliyapivnyak.it\/en\/wp-content\/uploads\/sites\/2\/2026\/05\/Do-Kap-Logo1.png-removebg-preview-e1777995125602-278x300.png 278w, https:\/\/www.yuliyapivnyak.it\/en\/wp-content\/uploads\/sites\/2\/2026\/05\/Do-Kap-Logo1.png-removebg-preview-e1777995125602.png 336w\" sizes=\"(max-width: 278px) 100vw, 278px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"swiper-slide\" data-slide=\"3\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"3 of 7\">\n\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-2f6b1c4 e-flex e-con-boxed e-con e-child\" data-id=\"2f6b1c4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1fc04d5 elementor-widget__width-initial elementor-widget elementor-widget-image\" data-id=\"1fc04d5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"http:\/\/www.sigesti.com\" target=\"_blank\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"200\" src=\"https:\/\/www.yuliyapivnyak.it\/en\/wp-content\/uploads\/sites\/2\/2026\/09\/Logo-sigesti-nuovo-e1787241938158-300x200.png\" class=\"attachment-medium size-medium wp-image-10981\" alt=\"\" srcset=\"https:\/\/www.yuliyapivnyak.it\/en\/wp-content\/uploads\/sites\/2\/2026\/09\/Logo-sigesti-nuovo-e1787241938158-300x200.png 300w, https:\/\/www.yuliyapivnyak.it\/en\/wp-content\/uploads\/sites\/2\/2026\/09\/Logo-sigesti-nuovo-e1787241938158.png 500w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"swiper-slide\" data-slide=\"4\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"4 of 7\">\n\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-0c49cc9 e-flex e-con-boxed e-con e-child\" data-id=\"0c49cc9\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2645d21 elementor-widget__width-initial elementor-widget elementor-widget-image\" data-id=\"2645d21\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/www.elementicreativi.it\/portfolio-item\/percorsi-nel-gusto\/\" target=\"_blank\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"217\" height=\"132\" src=\"https:\/\/www.yuliyapivnyak.it\/en\/wp-content\/uploads\/sites\/2\/2026\/05\/image-13-e1777995217300.png\" class=\"attachment-medium size-medium wp-image-10627\" alt=\"\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"swiper-slide\" data-slide=\"5\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"5 of 7\">\n\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-8beecc5 e-flex e-con-boxed e-con e-child\" data-id=\"8beecc5\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-55ef83d elementor-widget__width-initial elementor-widget elementor-widget-image\" data-id=\"55ef83d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"http:\/\/www.simihospitality.it\" target=\"_blank\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"223\" height=\"138\" src=\"https:\/\/www.yuliyapivnyak.it\/en\/wp-content\/uploads\/sites\/2\/2026\/05\/immagine-256.png\" class=\"attachment-medium size-medium wp-image-10628\" alt=\"\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"swiper-slide\" data-slide=\"6\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"6 of 7\">\n\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-f9821bb e-flex e-con-boxed e-con e-child\" data-id=\"f9821bb\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cdcd1e6 elementor-widget__width-initial elementor-widget elementor-widget-image\" data-id=\"cdcd1e6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"http:\/\/www.studio-guarino-partners.it\" target=\"_blank\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"213\" height=\"131\" src=\"https:\/\/www.yuliyapivnyak.it\/en\/wp-content\/uploads\/sites\/2\/2026\/05\/immagine_262-removebg-preview.png\" class=\"attachment-medium size-medium wp-image-10629\" alt=\"\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"swiper-slide\" data-slide=\"7\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"7 of 7\">\n\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-2326d33 e-flex e-con-boxed e-con e-child\" data-id=\"2326d33\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5f7f313 elementor-widget__width-initial elementor-widget elementor-widget-image\" data-id=\"5f7f313\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"http:\/\/www.centrovelicopioppi.it\" target=\"_blank\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"140\" height=\"138\" src=\"https:\/\/www.yuliyapivnyak.it\/en\/wp-content\/uploads\/sites\/2\/2026\/05\/immagine-261-e1777994994664.png\" class=\"attachment-medium size-medium wp-image-10630\" alt=\"\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>A WEBSITE &nbsp; IS NOT &nbsp; DESIGN It either makes your value clear \u2014 or it doesn&#8217;t work. I DESIGN WEBSITES THAT MAKE IT CLEAR WHY YOU\u2019RE THE CHOICE. CTA \/ CONTACT TELL ME ABOUT YOUR PROJECT \u2197 (HOW I STEP IN) PROBLEM \u2014 SOLUTION If your website\u2019s value isn\u2019t clear immediately, people are unlikely [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":10943,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-10598","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/www.yuliyapivnyak.it\/en\/wp-json\/wp\/v2\/pages\/10598","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.yuliyapivnyak.it\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.yuliyapivnyak.it\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.yuliyapivnyak.it\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.yuliyapivnyak.it\/en\/wp-json\/wp\/v2\/comments?post=10598"}],"version-history":[{"count":0,"href":"https:\/\/www.yuliyapivnyak.it\/en\/wp-json\/wp\/v2\/pages\/10598\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.yuliyapivnyak.it\/en\/wp-json\/wp\/v2\/media\/10943"}],"wp:attachment":[{"href":"https:\/\/www.yuliyapivnyak.it\/en\/wp-json\/wp\/v2\/media?parent=10598"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}