{"id":1675,"date":"2025-10-08T17:53:31","date_gmt":"2025-10-08T15:53:31","guid":{"rendered":"https:\/\/www.yuliyapivnyak.it\/en\/contatti\/"},"modified":"2026-09-10T17:52:36","modified_gmt":"2026-09-10T15:52:36","slug":"contact","status":"publish","type":"page","link":"https:\/\/www.yuliyapivnyak.it\/en\/contact\/","title":{"rendered":"Contact"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1675\" class=\"elementor elementor-1675\" data-elementor-post-type=\"page\">\n\t\t\t\t<main class=\"elementor-element elementor-element-22abc4a2 e-con-full sigesti-hero e-flex e-con e-parent\" data-id=\"22abc4a2\" 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-2620b6ee e-con-full e-flex e-con e-child\" data-id=\"2620b6ee\" 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-2f9f49ef e-con-full e-flex e-con e-child\" data-id=\"2f9f49ef\" 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-64b18581 elementor-widget__width-initial elementor-widget-mobile__width-initial elementor-widget elementor-widget-html\" data-id=\"64b18581\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"yu-contact-identity\">\n\n  <!-- =====================================\n       MAIN PLEXIGLASS CONTACT ID\n  ====================================== -->\n\n  <div class=\"yu-contact-card\">\n\n    <span class=\"yu-contact-screw tl\"><\/span>\n    <span class=\"yu-contact-screw tr\"><\/span>\n    <span class=\"yu-contact-screw bl\"><\/span>\n    <span class=\"yu-contact-screw br\"><\/span>\n\n    <span class=\"yu-contact-reflection\"><\/span>\n\n\n    <!-- TOP -->\n    <div class=\"yu-contact-top\">\n\n      <span class=\"yu-contact-brand\">\n        YU.DESIGN\n      <\/span>\n\n      <small>\n        01 \/ CONTACT IDENTITY\n      <\/small>\n\n    <\/div>\n\n\n    <!-- MAIN PROFILE -->\n    <div class=\"yu-contact-main\">\n\n      <div class=\"yu-contact-photo\">\n\n        <img decoding=\"async\"\n          src=\"https:\/\/www.yuliyapivnyak.it\/wp-content\/uploads\/2026\/05\/yu-arancione-1-e1777842074517.webp\"\n          alt=\"Yuliya Pivnyak\"\n        >\n\n      <\/div>\n\n\n      <div class=\"yu-contact-name\">\n\n        <h3>\n          YULIYA<br>\n          PIVNYAK.\n        <\/h3>\n\n        <p>\n          WEB DESIGNER \/ UX STRATEGIST\n        <\/p>\n\n        <div class=\"yu-contact-stack\">\n          WORDPRESS \u00b7 UX\/UI \u00b7 DYNAMIC SYSTEMS\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n\n\n    <!-- CONTACTS -->\n    <div class=\"yu-contact-primary\">\n\n      <a\n        href=\"tel:+393286218674\"\n        class=\"yu-contact-item\"\n      >\n\n        <span class=\"yu-contact-item__label\">\n          TEL\n        <\/span>\n\n        <strong>\n          (+39) 328 621 8674\n        <\/strong>\n\n        <b>\u2197<\/b>\n\n      <\/a>\n\n\n      <a\n        href=\"mailto:info@yuliyapivnyak.it\"\n        class=\"yu-contact-item\"\n      >\n\n        <span class=\"yu-contact-item__label\">\n          EMAIL\n        <\/span>\n\n        <strong>\n          info@yuliyapivnyak.it\n        <\/strong>\n\n        <b>\u2197<\/b>\n\n      <\/a>\n\n    <\/div>\n\n\n    <!-- SOCIAL -->\n    <div class=\"yu-contact-social\">\n\n      <span class=\"yu-contact-social__label\">\n        SOCIAL\n      <\/span>\n\n      <div class=\"yu-contact-social__links\">\n\n        <a href=\"https:\/\/www.instagram.com\/yu.designwebdesign\/\" target=\"_blank\" rel=\"noopener noreferrer\">\n          INSTAGRAM <b>\u2197<\/b>\n        <\/a>\n\n        <a href=\"https:\/\/www.linkedin.com\/in\/yuliya-pivnyak-377492216\/\" target=\"_blank\" rel=\"noopener noreferrer\">\n          LINKEDIN <b>\u2197<\/b>\n        <\/a>\n\n        <a href=\"https:\/\/www.facebook.com\/yuliyapivnyakwebdesigner\/\" target=\"_blank\" rel=\"noopener noreferrer\">\n          FACEBOOK <b>\u2197<\/b>\n        <\/a>\n\n        <a href=\"https:\/\/it.pinterest.com\/yuliyapivnyak\/\" target=\"_blank\" rel=\"noopener noreferrer\">\n          PINTEREST <b>\u2197<\/b>\n        <\/a>\n\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n\n\n\n  <!-- =====================================\n       BLUE UX TAG\n  ====================================== -->\n\n  <div class=\"yu-contact-tag yu-contact-tag--blue\">\n\n    <span class=\"yu-contact-tag-screw\"><\/span>\n\n    <small>\n      02 \/ UX\n    <\/small>\n\n    <strong>\n      UX \/ UI\n    <\/strong>\n\n    <span>\n      Strategy \u00b7 Interfaces\n    <\/span>\n\n  <\/div>\n\n\n\n  <!-- =====================================\n       ORANGE WORDPRESS TAG\n  ====================================== -->\n\n  <div class=\"yu-contact-tag yu-contact-tag--orange\">\n\n    <span class=\"yu-contact-tag-screw\"><\/span>\n\n    <small>\n      03 \/ BUILD\n    <\/small>\n\n    <strong>\n      WORDPRESS\n    <\/strong>\n\n    <span>\n      Elementor \u00b7 ACF \u00b7 CPT\n    <\/span>\n\n  <\/div>\n\n<\/div>\n\n\n<style>\n\n\/* =====================================================\n   ROOT\n===================================================== *\/\n\n.yu-contact-identity{\n\n  --blue:#405FD7;\n  --orange:#F56A23;\n  --black:#111111;\n\n  position:relative;\n\n  width:100%;\n  max-width:900px;\n\n  height:520px;\n\n  margin:0 auto;\n\n  background:transparent;\n\n  font-family:\n    Inter,\n    Arial,\n    sans-serif;\n}\n\n\n\/* =====================================================\n   MAIN PLEXIGLASS CARD\n===================================================== *\/\n\n.yu-contact-card{\n\n  position:absolute;\n\n  z-index:5;\n\n  left:50%;\n  top:50%;\n\n  width:650px;\n  height:390px;\n\n  box-sizing:border-box;\n\n  padding:\n    34px\n    38px\n    30px;\n\n  transform:\n    translate(-50%,-50%)\n    rotate(-1.6deg);\n\n  border-radius:18px;\n\n  color:#111;\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  \/*\n   * BLUR ORIGINALE\n   * NON MODIFICATO\n   *\/\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 2px\n    rgba(142,154,175,.28),\n\n    0 0 0 6px\n    rgba(235,242,252,.34),\n\n    0 22px 40px\n    rgba(25,31,55,.18),\n\n    inset\n    2px 2px 4px\n    rgba(255,255,255,.96),\n\n    inset\n    -5px -5px 8px\n    rgba(35,45,75,.15),\n\n    inset\n    0 0 0 8px\n    rgba(255,255,255,.13);\n}\n\n\n\/* inner edge *\/\n\n.yu-contact-card::before{\n\n  content:\"\";\n\n  position:absolute;\n\n  inset:9px;\n\n  border-radius:12px;\n\n  border:\n    1px solid\n    rgba(255,255,255,.62);\n\n  box-shadow:\n\n    inset\n    0 1px 2px\n    rgba(255,255,255,.88),\n\n    0 1px 1px\n    rgba(20,25,40,.08);\n\n  pointer-events:none;\n}\n\n\n\/* plexiglass thickness *\/\n\n.yu-contact-card::after{\n\n  content:\"\";\n\n  position:absolute;\n\n  left:14px;\n  right:14px;\n  bottom:5px;\n\n  height:7px;\n\n  border-radius:\n    0 0 12px 12px;\n\n  background:\n    linear-gradient(\n      to bottom,\n      rgba(255,255,255,.3),\n      rgba(55,65,90,.14)\n    );\n\n  pointer-events:none;\n}\n\n\n\/* =====================================================\n   REFLECTION\n===================================================== *\/\n\n.yu-contact-reflection{\n\n  position:absolute;\n\n  top:-4%;\n  left:3%;\n\n  width:50%;\n  height:65%;\n\n  transform:\n    skewX(-15deg);\n\n  background:\n    linear-gradient(\n      112deg,\n      rgba(255,255,255,.36),\n      rgba(255,255,255,.10) 37%,\n      transparent 70%\n    );\n\n  pointer-events:none;\n}\n\n\n\/* =====================================================\n   TOP\n===================================================== *\/\n\n.yu-contact-top{\n\n  position:relative;\n\n  z-index:3;\n\n  display:flex;\n\n  justify-content:space-between;\n\n  align-items:center;\n\n  margin-bottom:32px;\n}\n\n\n.yu-contact-brand{\n\n  font-family:\n    Khand,\n    Impact,\n    sans-serif;\n\n  font-size:27px;\n\n  line-height:1;\n\n  font-weight:600;\n\n  letter-spacing:.04em;\n}\n\n\n.yu-contact-top small{\n\n  font-size:10px;\n\n  line-height:1;\n\n  font-weight:800;\n\n  letter-spacing:.13em;\n}\n\n\n\/* =====================================================\n   PROFILE\n===================================================== *\/\n\n.yu-contact-main{\n\n  position:relative;\n\n  z-index:3;\n\n  display:flex;\n\n  align-items:center;\n\n  gap:30px;\n}\n\n\n.yu-contact-photo{\n\n  flex:0 0 118px;\n\n  width:118px;\n  height:118px;\n\n  padding:5px;\n\n  box-sizing:border-box;\n\n  border-radius:50%;\n\n  background:\n    linear-gradient(\n      145deg,\n      #ffffff,\n      #cfd5dd\n    );\n\n  box-shadow:\n\n    0 0 0 1px\n    rgba(20,25,35,.18),\n\n    0 8px 18px\n    rgba(20,25,40,.16),\n\n    inset\n    1px 1px 2px\n    rgba(255,255,255,1);\n}\n\n\n.yu-contact-photo img{\n\n  display:block;\n\n  width:100%;\n  height:100%;\n\n  object-fit:cover;\n\n  border-radius:50%;\n}\n\n\n.yu-contact-name{\n\n  min-width:0;\n}\n\n\n.yu-contact-name h3{\n\n  margin:0;\n\n  font-family:\n    Khand,\n    Impact,\n    sans-serif;\n\n  font-size:58px;\n\n  line-height:.80;\n\n  font-weight:600;\n\n  letter-spacing:-.045em;\n}\n\n\n.yu-contact-name p{\n\n  margin:\n    15px\n    0\n    0;\n\n  font-family:\n    Khand,\n    sans-serif;\n\n  font-size:21px;\n\n  line-height:1;\n\n  font-weight:600;\n}\n\n\n.yu-contact-stack{\n\n  margin-top:10px;\n\n  font-size:12px;\n\n  line-height:1.35;\n\n  font-weight:800;\n\n  letter-spacing:.055em;\n\n  color:\n    rgba(17,17,17,.62);\n}\n\n\n\/* =====================================================\n   PRIMARY CONTACTS\n===================================================== *\/\n\n.yu-contact-primary{\n\n  position:relative;\n\n  z-index:3;\n\n  display:grid;\n\n  grid-template-columns:\n    .8fr\n    1.2fr;\n\n  gap:26px;\n\n  margin-top:35px;\n}\n\n\n.yu-contact-item{\n\n  display:grid;\n\n  grid-template-columns:\n    48px\n    1fr\n    auto;\n\n  align-items:center;\n\n  gap:12px;\n\n  min-height:58px;\n\n  padding:\n    11px\n    3px\n    9px;\n\n  border-top:\n    1px solid\n    rgba(0,0,0,.22);\n\n  border-bottom:\n    1px solid\n    rgba(0,0,0,.08);\n\n  color:#111;\n\n  text-decoration:none;\n\n  transition:\n    color .2s ease,\n    transform .2s ease;\n}\n\n\n.yu-contact-item:hover{\n\n  color:\n    var(--blue);\n\n  transform:\n    translateX(3px);\n}\n\n\n.yu-contact-item__label{\n\n  font-size:10px;\n\n  line-height:1;\n\n  font-weight:900;\n\n  letter-spacing:.13em;\n}\n\n\n.yu-contact-item strong{\n\n  font-size:20px;\n\n  line-height:1.15;\n\n  font-weight:750;\n\n  white-space:nowrap;\n}\n\n\n.yu-contact-item b{\n\n  font-size:19px;\n\n  line-height:1;\n\n  font-weight:500;\n}\n\n\n\/* =====================================================\n   SOCIAL\n===================================================== *\/\n\n.yu-contact-social{\n\n  position:relative;\n\n  z-index:3;\n\n  display:flex;\n\n  align-items:center;\n\n  justify-content:space-between;\n\n  gap:20px;\n\n  margin-top:14px;\n}\n\n\n.yu-contact-social__label{\n\n  font-size:9px;\n\n  line-height:1;\n\n  font-weight:900;\n\n  letter-spacing:.13em;\n}\n\n\n.yu-contact-social__links{\n\n  display:flex;\n\n  flex-wrap:wrap;\n\n  justify-content:flex-end;\n\n  align-items:center;\n\n  gap:\n    8px\n    18px;\n}\n\n\n.yu-contact-social__links a{\n\n  display:inline-flex;\n\n  align-items:center;\n\n  gap:5px;\n\n  color:#111;\n\n  text-decoration:none;\n\n  font-size:11px;\n\n  line-height:1;\n\n  font-weight:800;\n\n  letter-spacing:.05em;\n\n  white-space:nowrap;\n\n  transition:\n    color .2s ease;\n}\n\n\n.yu-contact-social__links a:hover{\n\n  color:\n    var(--blue);\n}\n\n\n.yu-contact-social__links b{\n\n  color:\n    var(--orange);\n\n  font-size:13px;\n}\n\n\n\/* =====================================================\n   SIDE TAGS\n===================================================== *\/\n\n.yu-contact-tag{\n\n  position:absolute;\n\n  z-index:8;\n\n  width:205px;\n  height:112px;\n\n  padding:\n    19px\n    20px;\n\n  box-sizing:border-box;\n\n  border-radius:13px;\n\n  box-shadow:\n\n    0 0 0 1px\n    rgba(255,255,255,.55),\n\n    0 0 0 3px\n    rgba(230,238,250,.18),\n\n    0 13px 23px\n    rgba(20,25,45,.14),\n\n    inset\n    1px 1px 3px\n    rgba(255,255,255,.38),\n\n    inset\n    -3px -3px 5px\n    rgba(30,40,80,.18);\n}\n\n\n.yu-contact-tag--blue{\n\n  right:5px;\n  top:58px;\n\n  transform:\n    rotate(6deg);\n\n  background:\n    linear-gradient(\n      145deg,\n      #4C6AE0,\n      #3048BD\n    );\n\n  color:white;\n}\n\n\n.yu-contact-tag--orange{\n\n  left:0;\n  bottom:45px;\n\n  transform:\n    rotate(-6deg);\n\n  background:\n    linear-gradient(\n      145deg,\n      #FA7935,\n      #EF5E20\n    );\n\n  color:#111;\n}\n\n\n.yu-contact-tag small{\n\n  display:block;\n\n  margin-bottom:11px;\n\n  font-size:9px;\n\n  font-weight:900;\n\n  letter-spacing:.10em;\n}\n\n\n.yu-contact-tag strong{\n\n  display:block;\n\n  font-family:\n    Khand,\n    Impact,\n    sans-serif;\n\n  font-size:34px;\n\n  line-height:.9;\n\n  font-weight:600;\n}\n\n\n.yu-contact-tag >\nspan:not(.yu-contact-tag-screw){\n\n  display:block;\n\n  margin-top:7px;\n\n  font-size:11px;\n\n  line-height:1.2;\n}\n\n\n\/* =====================================================\n   TAG SCREW\n===================================================== *\/\n\n.yu-contact-tag-screw{\n\n  position:absolute;\n\n  right:10px;\n  top:10px;\n\n  width:12px;\n  height:12px;\n\n  border-radius:50%;\n\n  background:\n    radial-gradient(\n      circle at 32% 26%,\n      #fff 0 7%,\n      #dfe2e4 14%,\n      #92989e 30%,\n      #4f555b 47%,\n      #1f2327 64%,\n      #9fa5aa 78%,\n      #373c41 100%\n    );\n\n  box-shadow:\n    0 1px 2px\n    rgba(0,0,0,.45);\n}\n\n\n\/* =====================================================\n   MAIN SCREWS\n===================================================== *\/\n\n.yu-contact-screw{\n\n  position:absolute;\n\n  z-index:20;\n\n  width:15px;\n  height:15px;\n\n  border-radius:50%;\n\n  background:\n    radial-gradient(\n      circle at 32% 26%,\n      #ffffff 0 7%,\n      #e0e3e5 14%,\n      #949ba1 30%,\n      #50565c 47%,\n      #202428 64%,\n      #a3a8ad 78%,\n      #393e43 100%\n    );\n\n  box-shadow:\n    0 1px 3px\n    rgba(0,0,0,.5);\n}\n\n\n.yu-contact-screw::after{\n\n  content:\"\";\n\n  position:absolute;\n\n  left:3px;\n  right:3px;\n  top:6.5px;\n\n  height:1px;\n\n  background:#111;\n\n  transform:\n    rotate(35deg);\n}\n\n\n.yu-contact-screw.tl{\n  top:11px;\n  left:11px;\n}\n\n.yu-contact-screw.tr{\n  top:11px;\n  right:11px;\n}\n\n.yu-contact-screw.bl{\n  bottom:11px;\n  left:11px;\n}\n\n.yu-contact-screw.br{\n  bottom:11px;\n  right:11px;\n}\n\n\n\/* =====================================================\n   TABLET\n===================================================== *\/\n\n@media(max-width:900px){\n\n  .yu-contact-identity{\n\n    max-width:700px;\n\n    height:470px;\n  }\n\n\n  .yu-contact-card{\n\n    width:560px;\n    height:365px;\n\n    padding:\n      30px\n      32px\n      27px;\n  }\n\n\n  .yu-contact-photo{\n\n    flex:0 0 102px;\n\n    width:102px;\n    height:102px;\n  }\n\n\n  .yu-contact-name h3{\n\n    font-size:50px;\n  }\n\n\n  .yu-contact-name p{\n\n    font-size:19px;\n  }\n\n\n  .yu-contact-stack{\n\n    font-size:10px;\n  }\n\n\n  .yu-contact-item{\n\n    grid-template-columns:\n      44px\n      1fr\n      auto;\n  }\n\n\n  .yu-contact-item__label{\n\n    font-size:9px;\n  }\n\n\n  .yu-contact-item strong{\n\n    font-size:17px;\n  }\n\n\n  .yu-contact-social__links a{\n\n    font-size:10px;\n  }\n\n\n  .yu-contact-tag{\n\n    width:175px;\n    height:100px;\n  }\n\n\n  .yu-contact-tag small{\n\n    font-size:8px;\n  }\n\n\n  .yu-contact-tag strong{\n\n    font-size:29px;\n  }\n\n\n  .yu-contact-tag >\n  span:not(.yu-contact-tag-screw){\n\n    font-size:9px;\n  }\n\n}\n\n\n\/* =====================================================\n   MOBILE\n===================================================== *\/\n\n@media(max-width:620px){\n\n  .yu-contact-identity{\n\n    width:100%;\n    max-width:390px;\n\n    height:540px;\n  }\n\n\n  \/*\n   * STESSA DIMENSIONE BADGE\n   *\/\n\n  .yu-contact-card{\n\n    width:\n      calc(100% - 36px);\n\n    max-width:350px;\n\n    height:420px;\n\n    top:50%;\n\n    padding:\n      24px\n      22px\n      22px;\n\n    transform:\n      translate(-50%,-50%)\n      rotate(-1.4deg);\n  }\n\n\n  \/* ---------- TOP ---------- *\/\n\n  .yu-contact-top{\n\n    margin-bottom:18px;\n  }\n\n\n  .yu-contact-brand{\n\n    font-size:21px;\n  }\n\n\n  .yu-contact-top small{\n\n    font-size:7px;\n  }\n\n\n  \/* ---------- PROFILE ---------- *\/\n\n  .yu-contact-main{\n\n    gap:16px;\n\n    align-items:center;\n  }\n\n\n  .yu-contact-photo{\n\n    flex:0 0 78px;\n\n    width:78px;\n    height:78px;\n  }\n\n\n  .yu-contact-name h3{\n\n    font-size:39px;\n\n    line-height:.80;\n  }\n\n\n  .yu-contact-name p{\n\n    margin-top:9px;\n\n    font-size:14px;\n\n    line-height:1.02;\n  }\n\n\n  .yu-contact-stack{\n\n    margin-top:6px;\n\n    font-size:8.5px;\n\n    line-height:1.3;\n\n    letter-spacing:.045em;\n  }\n\n\n  \/* =================================================\n     CONTACTS\n  ================================================= *\/\n\n  .yu-contact-primary{\n\n    grid-template-columns:1fr;\n\n    gap:0;\n\n    margin-top:20px;\n  }\n\n\n  .yu-contact-item{\n\n    grid-template-columns:\n      48px\n      1fr\n      20px;\n\n    min-height:51px;\n\n    padding:\n      8px\n      2px;\n\n    gap:8px;\n  }\n\n\n  .yu-contact-item__label{\n\n    min-width:0;\n\n    font-size:8px;\n  }\n\n\n  .yu-contact-item strong{\n\n    font-size:15px;\n\n    line-height:1.1;\n\n    white-space:nowrap;\n  }\n\n\n  .yu-contact-item b{\n\n    font-size:16px;\n\n    text-align:right;\n  }\n\n\n  \/* =================================================\n     SOCIAL\n  ================================================= *\/\n\n  .yu-contact-social{\n\n    position:relative;\n\n    z-index:12;\n\n    display:grid;\n\n    grid-template-columns:\n      48px\n      1fr;\n\n    align-items:center;\n\n    gap:8px;\n\n    margin-top:9px;\n  }\n\n\n  .yu-contact-social__label{\n\n    font-size:8px;\n  }\n\n\n  .yu-contact-social__links{\n\n    display:flex;\n\n    justify-content:flex-start;\n\n    align-items:center;\n\n    flex-wrap:wrap;\n\n    gap:\n      6px\n      11px;\n  }\n\n\n  .yu-contact-social__links a{\n\n    font-size:8px;\n\n    line-height:1;\n  }\n\n\n  .yu-contact-social__links b{\n\n    font-size:10px;\n  }\n\n\n  \/* =================================================\n     TAGS\n  ================================================= *\/\n\n  .yu-contact-tag{\n\n    width:142px;\n    height:80px;\n\n    padding:\n      14px\n      15px;\n\n    border-radius:10px;\n  }\n\n\n  .yu-contact-tag--blue{\n\n    right:-1px;\n    top:28px;\n  }\n\n\n  \/*\n   * Pi\u00f9 fuori dalla lastra:\n   * non copre pi\u00f9 SOCIAL.\n   *\/\n\n  .yu-contact-tag--orange{\n\n    left:-5px;\n    bottom:3px;\n\n    transform:\n      rotate(-6deg);\n  }\n\n\n  .yu-contact-tag small{\n\n    margin-bottom:7px;\n\n    font-size:7px;\n  }\n\n\n  .yu-contact-tag strong{\n\n    font-size:23px;\n  }\n\n\n  .yu-contact-tag >\n  span:not(.yu-contact-tag-screw){\n\n    margin-top:4px;\n\n    font-size:8px;\n  }\n\n}\n\n\n\/* =====================================================\n   SMALL MOBILE\n===================================================== *\/\n\n@media(max-width:380px){\n\n  .yu-contact-identity{\n\n    max-width:350px;\n\n    height:520px;\n  }\n\n\n  .yu-contact-card{\n\n    width:\n      calc(100% - 28px);\n\n    height:405px;\n\n    padding:\n      22px\n      19px\n      20px;\n  }\n\n\n  .yu-contact-top{\n\n    margin-bottom:16px;\n  }\n\n\n  .yu-contact-name h3{\n\n    font-size:35px;\n  }\n\n\n  .yu-contact-name p{\n\n    font-size:13px;\n  }\n\n\n  .yu-contact-stack{\n\n    font-size:8px;\n  }\n\n\n  .yu-contact-primary{\n\n    margin-top:17px;\n  }\n\n\n  .yu-contact-item{\n\n    min-height:48px;\n  }\n\n\n  .yu-contact-item strong{\n\n    font-size:14px;\n  }\n\n\n  .yu-contact-social__links{\n\n    gap:\n      5px\n      8px;\n  }\n\n\n  .yu-contact-social__links a{\n\n    font-size:7.5px;\n  }\n\n\n  .yu-contact-tag--orange{\n\n    left:-3px;\n\n    bottom:1px;\n  }\n\n}\n\n\n\/* =====================================================\n   ACCESSIBILITY\n===================================================== *\/\n\n@media(prefers-reduced-motion:reduce){\n\n  .yu-contact-item,\n  .yu-contact-social__links a{\n\n    transition:none;\n  }\n\n}\n\n<\/style>\t\t\t\t<\/div>\n\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-301f8488 e-con-full e-flex e-con e-parent\" data-id=\"301f8488\" 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-21657c95 elementor-widget__width-initial elementor-widget elementor-widget-html\" data-id=\"21657c95\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section class=\"yu-brief\" id=\"yuBrief\">\n\n  <div class=\"yu-brief__panel\">\n\n    <!-- ==================================================\n         BOLTS\n    =================================================== -->\n\n    <i class=\"yu-bolt yu-bolt--tl\"><\/i>\n    <i class=\"yu-bolt yu-bolt--tr\"><\/i>\n    <i class=\"yu-bolt yu-bolt--bl\"><\/i>\n    <i class=\"yu-bolt yu-bolt--br\"><\/i>\n\n\n    <!-- ==================================================\n         DESKTOP CIRCUIT\n    =================================================== -->\n\n    <div class=\"yu-circuit yu-circuit--desktop\" aria-hidden=\"true\">\n\n      <svg viewBox=\"0 0 190 900\" preserveAspectRatio=\"none\">\n\n        <path\n          class=\"yu-circuit__base\"\n          d=\"\n          M108 0\n          V95\n          L75 128\n          V220\n          L112 257\n          V380\n          L78 414\n          V548\n          L110 580\n          V705\n          L62 754\n          V900\n          \"\n        \/>\n\n        <path\n          class=\"yu-circuit__base yu-circuit__base--orange\"\n          d=\"\n          M128 0\n          V110\n          L96 142\n          V235\n          L130 269\n          V397\n          L96 431\n          V562\n          L128 594\n          V718\n          L81 765\n          V900\n          \"\n        \/>\n\n        <path\n          class=\"yu-circuit__energy yu-circuit__energy--blue\"\n          d=\"\n          M108 0\n          V95\n          L75 128\n          V220\n          L112 257\n          V380\n          L78 414\n          V548\n          L110 580\n          V705\n          L62 754\n          V900\n          \"\n        \/>\n\n        <path\n          class=\"yu-circuit__energy yu-circuit__energy--orange\"\n          d=\"\n          M128 0\n          V110\n          L96 142\n          V235\n          L130 269\n          V397\n          L96 431\n          V562\n          L128 594\n          V718\n          L81 765\n          V900\n          \"\n        \/>\n\n      <\/svg>\n\n      <span class=\"yu-node yu-node--1\"><\/span>\n      <span class=\"yu-node yu-node--2\"><\/span>\n      <span class=\"yu-node yu-node--3\"><\/span>\n      <span class=\"yu-node yu-node--4\"><\/span>\n\n    <\/div>\n\n\n    <!-- ==================================================\n         INTRO\n    =================================================== -->\n\n    <div class=\"yu-brief__intro\">\n\n      <div class=\"yu-micro\">\n        [ CONTACT \/ 001 ]\n        <span><\/span>\n      <\/div>\n\n      <h2>\n        DO YOU HAVE A PROJECT<br>\n        THAT NEEDS<br>\n        TO WORK?\n      <\/h2>\n\n      <p>\n        Tell me what you\u2019re building.<br>\n        <strong>Let\u2019s start here.<\/strong>\n      <\/p>\n\n    <\/div>\n\n\n    <!-- ==================================================\n         TABLET \/ MOBILE CIRCUIT\n    =================================================== -->\n\n    <div class=\"yu-circuit-mobile\" aria-hidden=\"true\">\n\n      <span><\/span>\n\n      <i><\/i>\n      <i><\/i>\n      <i><\/i>\n\n    <\/div>\n\n\n    <!-- ==================================================\n         FORM\n    =================================================== -->\n\n    <form\n      class=\"yu-form\"\n      id=\"yuProjectForm\"\n      novalidate\n    >\n\n\n      <!-- ==================================================\n           HONEYPOT ANTISPAM\n      =================================================== -->\n\n      <div\n        class=\"yu-honeypot\"\n        aria-hidden=\"true\"\n      >\n\n        <label>\n          Leave this field empty\n\n          <input\n            type=\"text\"\n            name=\"website\"\n            value=\"\"\n            tabindex=\"-1\"\n            autocomplete=\"off\"\n          >\n\n        <\/label>\n\n      <\/div>\n\n\n      <!-- ==================================================\n           01 + 02\n      =================================================== -->\n\n      <div class=\"yu-form__row\">\n\n        <label class=\"yu-field\">\n\n          <span class=\"yu-field__label\">\n\n            <b>01<\/b>\n\n            <i>\/<\/i>\n\n            NAME\n\n            <em>*<\/em>\n\n          <\/span>\n\n          <input\n            type=\"text\"\n            name=\"name\"\n            placeholder=\"Your name\"\n            autocomplete=\"name\"\n            required\n          >\n\n        <\/label>\n\n\n        <label class=\"yu-field\">\n\n          <span class=\"yu-field__label\">\n\n            <b>02<\/b>\n\n            <i>\/<\/i>\n\n            EMAIL\n\n            <em>*<\/em>\n\n          <\/span>\n\n          <input\n            type=\"email\"\n            name=\"email\"\n            placeholder=\"Your email\"\n            autocomplete=\"email\"\n            required\n          >\n\n        <\/label>\n\n      <\/div>\n\n\n      <!-- ==================================================\n           03 \/ PROJECT\n      =================================================== -->\n\n      <fieldset class=\"yu-project\">\n\n        <legend class=\"yu-field__label\">\n\n          <b>03<\/b>\n\n          <i>\/<\/i>\n\n          WHAT DO YOU NEED?\n\n          <em>*<\/em>\n\n        <\/legend>\n\n\n        <div class=\"yu-project__top\">\n\n          <div class=\"yu-project__helper\">\n            Select the type of project\n          <\/div>\n\n          <div class=\"yu-project__mobile-hint\">\n\n            <span>\n              SWIPE\n            <\/span>\n\n            <b>\n              \u2192\n            <\/b>\n\n          <\/div>\n\n        <\/div>\n\n\n        <div class=\"yu-project__viewport\">\n\n          <div class=\"yu-project__grid\">\n\n\n            <!-- 01 \/ SITE -->\n\n            <label class=\"yu-project-card\">\n\n              <input\n                type=\"radio\"\n                name=\"project_type\"\n                value=\"site\"\n                required\n              >\n\n              <span class=\"yu-project-card__index\">\n                01\n              <\/span>\n\n              <span class=\"yu-project-card__selected\">\n                \u2713\n              <\/span>\n\n              <strong>\n                Website\n              <\/strong>\n\n              <small>\n                New \/ Redesign\n              <\/small>\n\n            <\/label>\n\n\n            <!-- 02 \/ ECOMMERCE -->\n\n            <label class=\"yu-project-card\">\n\n              <input\n                type=\"radio\"\n                name=\"project_type\"\n                value=\"ecommerce\"\n              >\n\n              <span class=\"yu-project-card__index\">\n                02\n              <\/span>\n\n              <span class=\"yu-project-card__selected\">\n                \u2713\n              <\/span>\n\n              <strong>\n                E-commerce\n              <\/strong>\n\n              <small>\n                Online shop\n              <\/small>\n\n            <\/label>\n\n\n            <!-- 03 \/ DYNAMIC -->\n\n            <label class=\"yu-project-card\">\n\n              <input\n                type=\"radio\"\n                name=\"project_type\"\n                value=\"dynamic\"\n              >\n\n              <span class=\"yu-project-card__index\">\n                03\n              <\/span>\n\n              <span class=\"yu-project-card__selected\">\n                \u2713\n              <\/span>\n\n              <strong>\n                Dynamic website\n              <\/strong>\n\n              <small>\n                Custom functionality\n              <\/small>\n\n            <\/label>\n\n\n            <!-- 04 \/ UX -->\n\n            <label class=\"yu-project-card\">\n\n              <input\n                type=\"radio\"\n                name=\"project_type\"\n                value=\"ux\"\n              >\n\n              <span class=\"yu-project-card__index\">\n                04\n              <\/span>\n\n              <span class=\"yu-project-card__selected\">\n                \u2713\n              <\/span>\n\n              <strong>\n                UX \/ Structure\n              <\/strong>\n\n              <small>\n                Analysis and strategy\n              <\/small>\n\n            <\/label>\n\n\n            <!-- 05 \/ AGENCY -->\n\n            <label class=\"yu-project-card\">\n\n              <input\n                type=\"radio\"\n                name=\"project_type\"\n                value=\"agency\"\n              >\n\n              <span class=\"yu-project-card__index\">\n                05\n              <\/span>\n\n              <span class=\"yu-project-card__selected\">\n                \u2713\n              <\/span>\n\n              <strong>\n                Collaboration\n              <\/strong>\n\n              <small>\n                White label \/ Agency\n              <\/small>\n\n            <\/label>\n\n\n            <!-- 06 \/ OTHER -->\n\n            <label class=\"yu-project-card\">\n\n              <input\n                type=\"radio\"\n                name=\"project_type\"\n                value=\"other\"\n              >\n\n              <span class=\"yu-project-card__index\">\n                06\n              <\/span>\n\n              <span class=\"yu-project-card__selected\">\n                \u2713\n              <\/span>\n\n              <strong>\n                Other\n              <\/strong>\n\n              <small>\n                To define together\n              <\/small>\n\n            <\/label>\n\n          <\/div>\n\n        <\/div>\n\n      <\/fieldset>\n\n\n      <!-- ==================================================\n           DYNAMIC DETAILS\n      =================================================== -->\n\n      <div\n        class=\"yu-dynamic\"\n        id=\"yuDynamic\"\n        aria-live=\"polite\"\n      >\n\n\n        <!-- SITE -->\n\n        <div\n          class=\"yu-dynamic__group\"\n          data-group=\"site\"\n        >\n\n          <div class=\"yu-dynamic__head\">\n            [ PROJECT DETAILS \/ SITE ]\n          <\/div>\n\n\n          <div class=\"yu-form__row\">\n\n            <label class=\"yu-mini-field\">\n\n              <span>\n                DO YOU ALREADY HAVE A WEBSITE?\n              <\/span>\n\n              <select name=\"site_existing\">\n\n                <option value=\"\">\n                  Select\n                <\/option>\n\n                <option>\n                  S\u00ec\n                <\/option>\n\n                <option>\n                  No\n                <\/option>\n\n              <\/select>\n\n            <\/label>\n\n\n            <label class=\"yu-mini-field\">\n\n              <span>\n                MAIN GOAL\n              <\/span>\n\n              <select name=\"site_goal\">\n\n                <option value=\"\">\n                  Select\n                <\/option>\n\n                <option>\n                  Present the brand more effectively\n                <\/option>\n\n                <option>\n                  Generate leads\n                <\/option>\n\n                <option>\n                  Sell services\n                <\/option>\n\n                <option>\n                  Automate processes\n                <\/option>\n\n                <option>\n                  Other\n                <\/option>\n\n              <\/select>\n\n            <\/label>\n\n          <\/div>\n\n        <\/div>\n\n\n        <!-- ECOMMERCE -->\n\n        <div\n          class=\"yu-dynamic__group\"\n          data-group=\"ecommerce\"\n        >\n\n          <div class=\"yu-dynamic__head\">\n            [ PROJECT DETAILS \/ E-COMMERCE ]\n          <\/div>\n\n\n          <div class=\"yu-form__row\">\n\n            <label class=\"yu-mini-field\">\n\n              <span>\n                WHAT WILL YOU SELL?\n              <\/span>\n\n              <input\n                type=\"text\"\n                name=\"shop_products\"\n                placeholder=\"Products \/ services...\"\n              >\n\n            <\/label>\n\n\n            <label class=\"yu-mini-field\">\n\n              <span>\n                DO YOU ALREADY HAVE AN ONLINE SHOP?\n              <\/span>\n\n              <select name=\"shop_existing\">\n\n                <option value=\"\">\n                  Select\n                <\/option>\n\n                <option>\n                  No, starting from scratch\n                <\/option>\n\n                <option>\n                  Yes, it needs a redesign\n                <\/option>\n\n                <option>\n                  Yes, it needs improvement\n                <\/option>\n\n              <\/select>\n\n            <\/label>\n\n          <\/div>\n\n        <\/div>\n\n\n        <!-- DYNAMIC -->\n\n        <div\n          class=\"yu-dynamic__group\"\n          data-group=\"dynamic\"\n        >\n\n          <div class=\"yu-dynamic__head\">\n            [ PROJECT DETAILS \/ DYNAMIC SYSTEM ]\n          <\/div>\n\n\n          <label class=\"yu-mini-field\">\n\n            <span>\n              WHAT DOES THE SYSTEM NEED TO DO?\n            <\/span>\n\n            <input\n              type=\"text\"\n              name=\"dynamic_need\"\n              placeholder=\"Database, bookings, members area, catalogue...\"\n            >\n\n          <\/label>\n\n        <\/div>\n\n\n        <!-- UX -->\n\n        <div\n          class=\"yu-dynamic__group\"\n          data-group=\"ux\"\n        >\n\n          <div class=\"yu-dynamic__head\">\n            [ PROJECT DETAILS \/ UX ]\n          <\/div>\n\n\n          <label class=\"yu-mini-field\">\n\n            <span>\n              WHAT IS THE CURRENT PROBLEM?\n            <\/span>\n\n            <input\n              type=\"text\"\n              name=\"ux_problem\"\n              placeholder=\"What isn\u2019t working right now?\"\n            >\n\n          <\/label>\n\n        <\/div>\n\n\n        <!-- AGENCY -->\n\n        <div\n          class=\"yu-dynamic__group\"\n          data-group=\"agency\"\n        >\n\n          <div class=\"yu-dynamic__head\">\n            [ WHITE LABEL \/ AGENCY ]\n          <\/div>\n\n\n          <div class=\"yu-form__row\">\n\n            <label class=\"yu-mini-field\">\n\n              <span>\n                TYPE OF SUPPORT\n              <\/span>\n\n              <select name=\"agency_support\">\n\n                <option value=\"\">\n                  Select\n                <\/option>\n\n                <option>\n                  Build WordPress\n                <\/option>\n\n                <option>\n                  Dynamic \/ ACF\n                <\/option>\n\n                <option>\n                  Overflow\n                <\/option>\n\n                <option>\n                  Rescue\n                <\/option>\n\n                <option>\n                  Ongoing support\n                <\/option>\n\n              <\/select>\n\n            <\/label>\n\n\n            <label class=\"yu-mini-field\">\n\n              <span>\n                WORKING MODEL\n              <\/span>\n\n              <select name=\"agency_mode\">\n\n                <option value=\"\">\n                  Select\n                <\/option>\n\n                <option>\n                  Single project\n                <\/option>\n\n                <option>\n                  Collaboration continuativa\n                <\/option>\n\n                <option>\n                  To be discussed\n                <\/option>\n\n              <\/select>\n\n            <\/label>\n\n          <\/div>\n\n        <\/div>\n\n\n        <!-- OTHER -->\n\n        <div\n          class=\"yu-dynamic__group\"\n          data-group=\"other\"\n        >\n\n          <div class=\"yu-dynamic__head\">\n            [ LET'S FIGURE IT OUT ]\n          <\/div>\n\n          <p>\n            Simply tell me what you want to achieve:\n            we\u2019ll define the right structure together.\n          <\/p>\n\n        <\/div>\n\n      <\/div>\n\n\n      <!-- ==================================================\n           MESSAGE\n      =================================================== -->\n\n      <label class=\"yu-message\">\n\n        <span class=\"yu-field__label\">\n\n          <b>04<\/b>\n\n          <i>\/<\/i>\n\n          TELL ME ABOUT THE PROJECT\n\n          <small>\n            OPTIONAL\n          <\/small>\n\n        <\/span>\n\n\n        <textarea\n          name=\"message\"\n          maxlength=\"1000\"\n          placeholder=\"Tell me about your idea, goals and any references...\"\n        ><\/textarea>\n\n\n        <span class=\"yu-message__count\">\n          <b id=\"yuCharCount\">0<\/b> \/ 1000\n        <\/span>\n\n      <\/label>\n\n\n      <!-- ==================================================\n           PRIVACY\n      =================================================== -->\n\n      <label class=\"yu-privacy\">\n\n        <input\n          type=\"checkbox\"\n          name=\"privacy\"\n          value=\"1\"\n          required\n        >\n\n        <span class=\"yu-privacy__box\"><\/span>\n\n        <span>\n          I have read the Privacy Policy and agree to the processing of my personal data.\n          <strong>*<\/strong>\n        <\/span>\n\n      <\/label>\n\n\n      <!-- ==================================================\n           CTA\n      =================================================== -->\n\n      <div class=\"yu-form__footer\">\n\n        <button\n          type=\"submit\"\n          class=\"yu-submit\"\n        >\n\n          <i class=\"yu-submit__bolt yu-submit__bolt--1\"><\/i>\n          <i class=\"yu-submit__bolt yu-submit__bolt--2\"><\/i>\n          <i class=\"yu-submit__bolt yu-submit__bolt--3\"><\/i>\n          <i class=\"yu-submit__bolt yu-submit__bolt--4\"><\/i>\n\n          <span class=\"yu-submit__label\">\n            START THE PROJECT\n          <\/span>\n\n          <b>\n            \u2192\n          <\/b>\n\n        <\/button>\n\n      <\/div>\n\n\n      <!-- ==================================================\n           STATUS\n      =================================================== -->\n\n      <div\n        class=\"yu-form-status\"\n        id=\"yuFormStatus\"\n        role=\"status\"\n        aria-live=\"polite\"\n      ><\/div>\n\n    <\/form>\n\n\n    <!-- ==================================================\n         SYSTEM BAR\n    =================================================== -->\n\n    <div class=\"yu-system\">\n\n      <span class=\"yu-system__led\"><\/span>\n\n      <strong>\n        SYSTEM CONNECTED\n      <\/strong>\n\n      <div class=\"yu-system__line\"><\/div>\n\n      <div class=\"yu-system__steps\">\n        <i><\/i>\n        <i><\/i>\n        <i><\/i>\n        <i><\/i>\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n\n<style>\n\n\/* =========================================================\n   ROOT\n========================================================= *\/\n\n.yu-brief{\n\n  --blue:#405FD7;\n  --electric:#2877FF;\n  --orange:#F26637;\n  --black:#111111;\n\n  position:relative;\n\n  width:100%;\n\n  padding:\n    20px\n    0\n    70px;\n\n  color:\n    var(--black);\n\n  font-family:\n    Inter,\n    Arial,\n    sans-serif;\n}\n\n\n.yu-brief *,\n.yu-brief *::before,\n.yu-brief *::after{\n\n  box-sizing:border-box;\n}\n\n\n\/* =========================================================\n   HONEYPOT\n========================================================= *\/\n\n.yu-honeypot{\n\n  position:absolute !important;\n\n  left:-9999px !important;\n  top:-9999px !important;\n\n  width:1px !important;\n  height:1px !important;\n\n  overflow:hidden !important;\n\n  opacity:0 !important;\n\n  pointer-events:none !important;\n}\n\n\n\/* =========================================================\n   MAIN PLEXIGLASS PANEL\n========================================================= *\/\n\n.yu-brief__panel{\n\n  container-type:inline-size;\n\n  position:relative;\n\n  width:100%;\n\n  display:grid;\n\n  grid-template-columns:\n    minmax(300px,.72fr)\n    minmax(0,1.55fr);\n\n  grid-template-areas:\n    \"intro form\";\n\n  gap:80px;\n\n  padding:20px;\n\n  border:\n    1px solid\n    rgba(255,255,255,.95);\n\n  border-radius:28px;\n\n  background:\n    linear-gradient(\n      145deg,\n      rgba(255,255,255,.78),\n      rgba(232,237,245,.57)\n    );\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 2px\n    rgba(142,154,175,.28),\n\n    0 0 0 6px\n    rgba(235,242,252,.34),\n\n    0 18px 32px\n    rgba(25,31,55,.16),\n\n    inset\n    2px 2px 4px\n    rgba(255,255,255,.96),\n\n    inset\n    -5px -5px 8px\n    rgba(35,45,75,.15),\n\n    inset\n    0 0 0 8px\n    rgba(255,255,255,.13);\n\n  overflow:visible;\n}\n\n\n.yu-brief__panel::before{\n\n  content:\"\";\n\n  position:absolute;\n\n  inset:8px;\n\n  z-index:0;\n\n  border:\n    1px solid\n    rgba(255,255,255,.62);\n\n  border-radius:20px;\n\n  box-shadow:\n\n    inset\n    0 1px 2px\n    rgba(255,255,255,.88),\n\n    0 1px 1px\n    rgba(20,25,40,.08);\n\n  pointer-events:none;\n}\n\n\n.yu-brief__panel::after{\n\n  content:\"\";\n\n  position:absolute;\n\n  z-index:1;\n\n  left:16px;\n  right:16px;\n  bottom:4px;\n\n  height:7px;\n\n  border-radius:\n    0\n    0\n    18px\n    18px;\n\n  background:\n    linear-gradient(\n      to bottom,\n      rgba(255,255,255,.30),\n      rgba(55,65,90,.14)\n    );\n\n  pointer-events:none;\n}\n\n\n\/* =========================================================\n   BOLTS\n========================================================= *\/\n\n.yu-bolt,\n.yu-submit__bolt{\n\n  position:absolute;\n\n  z-index:20;\n\n  width:18px;\n  height:18px;\n\n  border-radius:50%;\n\n  background:\n    radial-gradient(\n      circle at 32% 25%,\n      #fff 0 8%,\n      #b9bec3 16%,\n      #626970 40%,\n      #24282d 59%,\n      #c9cdd0 74%,\n      #494e53 100%\n    );\n\n  box-shadow:\n    0 1px 3px\n    rgba(0,0,0,.45);\n}\n\n\n.yu-bolt::after,\n.yu-submit__bolt::after{\n\n  content:\"\";\n\n  position:absolute;\n\n  left:4px;\n  right:4px;\n  top:8px;\n\n  height:1.4px;\n\n  background:#111;\n\n  transform:\n    rotate(40deg);\n}\n\n\n.yu-bolt--tl{\n  top:14px;\n  left:14px;\n}\n\n.yu-bolt--tr{\n  top:14px;\n  right:14px;\n}\n\n.yu-bolt--bl{\n  bottom:14px;\n  left:14px;\n}\n\n.yu-bolt--br{\n  bottom:14px;\n  right:14px;\n}\n\n\n\/* =========================================================\n   INTRO\n========================================================= *\/\n\n.yu-brief__intro{\n\n  grid-area:intro;\n\n  position:relative;\n\n  z-index:3;\n\n  align-self:center;\n\n  min-width:0;\n}\n\n\n.yu-micro{\n\n  display:flex;\n\n  align-items:center;\n\n  gap:16px;\n\n  margin-bottom:30px;\n\n  font-family:\n    Khand,\n    \"Arial Narrow\",\n    Arial,\n    sans-serif;\n\n  font-size:13px;\n\n  font-weight:600;\n\n  letter-spacing:.08em;\n}\n\n\n.yu-micro span{\n\n  width:40px;\n\n  height:1px;\n\n  background:#111;\n}\n\n\n.yu-brief__intro h2{\n\n  margin:0;\n\n  font-family:\n    Khand,\n    Impact,\n    sans-serif;\n\n  font-size:\n    clamp(66px,5vw,100px);\n\n  line-height:.80;\n\n  font-weight:600;\n\n  letter-spacing:-.045em;\n}\n\n\n.yu-brief__intro p{\n\n  margin:\n    34px\n    0\n    0;\n\n  font-size:18px;\n\n  line-height:1.55;\n}\n\n\n.yu-brief__intro p strong{\n\n  font-weight:650;\n}\n\n\n\/* =========================================================\n   FORM\n========================================================= *\/\n\n.yu-form{\n\n  grid-area:form;\n\n  position:relative;\n\n  z-index:4;\n\n  min-width:0;\n\n  max-width:100%;\n}\n\n\n.yu-form__row{\n\n  display:grid;\n\n  grid-template-columns:\n    repeat(\n      2,\n      minmax(0,1fr)\n    );\n\n  gap:32px;\n}\n\n\n\/* =========================================================\n   FIELD LABEL\n========================================================= *\/\n\n.yu-field__label{\n\n  display:flex;\n\n  align-items:center;\n\n  gap:8px;\n\n  margin-bottom:13px;\n\n  font-family:\n    Khand,\n    \"Arial Narrow\",\n    Arial,\n    sans-serif;\n\n  font-size:17px;\n\n  line-height:1;\n\n  font-weight:600;\n\n  letter-spacing:.01em;\n}\n\n\n.yu-field__label b{\n\n  color:\n    var(--blue);\n\n  font-family:\n    Khand,\n    Impact,\n    sans-serif;\n\n  font-size:34px;\n\n  line-height:.8;\n\n  font-weight:600;\n}\n\n\n.yu-field__label i{\n\n  color:\n    var(--blue);\n\n  font-style:normal;\n}\n\n\n.yu-field__label em{\n\n  color:\n    var(--orange);\n\n  font-style:normal;\n}\n\n\n.yu-field__label small{\n\n  margin-left:auto;\n\n  color:\n    rgba(17,17,17,.42);\n\n  font-family:\n    Inter,\n    Arial,\n    sans-serif;\n\n  font-size:9px;\n\n  font-weight:700;\n\n  letter-spacing:.06em;\n}\n\n\n\/* =========================================================\n   INPUTS\n========================================================= *\/\n\n.yu-field input,\n.yu-mini-field input,\n.yu-mini-field select{\n\n  width:100%;\n\n  min-height:56px;\n\n  padding:\n    0\n    14px;\n\n  border:\n    1px solid\n    rgba(17,17,17,.22);\n\n  border-radius:6px;\n\n  outline:none;\n\n  background:\n    rgba(255,255,255,.20);\n\n  color:#111;\n\n  font-family:\n    Inter,\n    Arial,\n    sans-serif;\n\n  font-size:17px;\n}\n\n\n.yu-field input::placeholder,\n.yu-mini-field input::placeholder{\n\n  color:\n    rgba(17,17,17,.48);\n}\n\n\n.yu-field input:focus,\n.yu-mini-field input:focus,\n.yu-mini-field select:focus{\n\n  border-color:\n    var(--electric);\n\n  box-shadow:\n    0 0 0 3px\n    rgba(40,119,255,.08);\n}\n\n\n\/* =========================================================\n   PROJECT\n========================================================= *\/\n\n.yu-project{\n\n  margin:\n    42px\n    0\n    0;\n\n  padding:0;\n\n  border:0;\n\n  min-width:0;\n\n  max-width:100%;\n}\n\n\n.yu-project__top{\n\n  display:flex;\n\n  justify-content:space-between;\n\n  align-items:center;\n\n  gap:20px;\n\n  margin-bottom:18px;\n}\n\n\n.yu-project__helper{\n\n  color:\n    rgba(17,17,17,.62);\n\n  font-size:16px;\n\n  line-height:1.4;\n}\n\n\n.yu-project__mobile-hint{\n\n  display:none;\n}\n\n\n.yu-project__viewport{\n\n  min-width:0;\n\n  max-width:100%;\n}\n\n\n.yu-project__grid{\n\n  display:grid;\n\n  grid-template-columns:\n    repeat(\n      6,\n      minmax(0,1fr)\n    );\n\n  gap:12px;\n\n  min-width:0;\n\n  max-width:100%;\n}\n\n\n\/* =========================================================\n   PROJECT CARDS\n========================================================= *\/\n\n.yu-project-card{\n\n  position:relative;\n\n  min-width:0;\n\n  min-height:176px;\n\n  display:flex;\n\n  flex-direction:column;\n\n  justify-content:flex-end;\n\n  gap:7px;\n\n  padding:\n    19px\n    15px;\n\n  border:\n    1px solid\n    rgba(17,17,17,.21);\n\n  border-radius:10px;\n\n  background:\n    rgba(255,255,255,.16);\n\n  cursor:pointer;\n\n  overflow:hidden;\n\n  transition:\n    transform .22s ease,\n    background .22s ease,\n    border-color .22s ease,\n    box-shadow .22s ease;\n}\n\n\n.yu-project-card:hover{\n\n  transform:\n    translateY(-2px);\n\n  border-color:\n    rgba(64,95,215,.58);\n}\n\n\n.yu-project-card input{\n\n  position:absolute;\n\n  opacity:0;\n\n  pointer-events:none;\n}\n\n\n.yu-project-card__index{\n\n  position:absolute;\n\n  left:15px;\n  top:15px;\n\n  color:\n    rgba(17,17,17,.52);\n\n  font-family:\n    Khand,\n    \"Arial Narrow\",\n    Arial,\n    sans-serif;\n\n  font-size:13px;\n\n  line-height:1;\n\n  font-weight:600;\n\n  letter-spacing:.05em;\n}\n\n\n.yu-project-card__selected{\n\n  position:absolute;\n\n  top:13px;\n  right:14px;\n\n  color:\n    var(--blue);\n\n  font-family:\n    Arial,\n    sans-serif;\n\n  font-size:16px;\n\n  line-height:1;\n\n  font-weight:700;\n\n  opacity:0;\n\n  transform:\n    translateY(-3px);\n\n  transition:\n    opacity .2s ease,\n    transform .2s ease;\n}\n\n\n.yu-project-card strong{\n\n  font-family:\n    Inter,\n    Arial,\n    sans-serif;\n\n  font-size:17px;\n\n  line-height:1.22;\n\n  font-weight:700;\n}\n\n\n.yu-project-card small{\n\n  font-family:\n    Inter,\n    Arial,\n    sans-serif;\n\n  font-size:14px;\n\n  line-height:1.35;\n\n  color:\n    rgba(17,17,17,.60);\n}\n\n\n.yu-project-card:has(input:checked){\n\n  border:\n    1.7px solid\n    var(--blue);\n\n  background:\n    rgba(64,95,215,.07);\n\n  box-shadow:\n    inset\n    0 0 0 1px\n    rgba(64,95,215,.08);\n}\n\n\n.yu-project-card:has(input:checked)\n.yu-project-card__index{\n\n  color:\n    var(--blue);\n}\n\n\n.yu-project-card:has(input:checked)\n.yu-project-card__selected{\n\n  opacity:1;\n\n  transform:none;\n}\n\n\n\/* =========================================================\n   DYNAMIC\n========================================================= *\/\n\n.yu-dynamic{\n\n  display:none;\n\n  margin-top:22px;\n\n  min-width:0;\n\n  max-width:100%;\n}\n\n\n.yu-dynamic.is-open{\n\n  display:block;\n}\n\n\n.yu-dynamic__group{\n\n  display:none;\n\n  padding:20px;\n\n  border:\n    1px solid\n    rgba(64,95,215,.30);\n\n  border-radius:10px;\n\n  background:\n    rgba(64,95,215,.045);\n}\n\n\n.yu-dynamic__group.is-active{\n\n  display:block;\n}\n\n\n.yu-dynamic__head{\n\n  margin-bottom:18px;\n\n  color:\n    var(--blue);\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  letter-spacing:.05em;\n}\n\n\n.yu-dynamic__group p{\n\n  margin:0;\n\n  font-size:16px;\n\n  line-height:1.55;\n}\n\n\n.yu-mini-field > span{\n\n  display:block;\n\n  margin-bottom:8px;\n\n  font-family:\n    Khand,\n    \"Arial Narrow\",\n    Arial,\n    sans-serif;\n\n  font-size:14px;\n\n  font-weight:600;\n\n  letter-spacing:.03em;\n}\n\n\n\/* =========================================================\n   MESSAGE\n========================================================= *\/\n\n.yu-message{\n\n  position:relative;\n\n  display:block;\n\n  margin-top:38px;\n\n  min-width:0;\n\n  max-width:100%;\n}\n\n\n.yu-message textarea{\n\n  width:100%;\n\n  max-width:100%;\n\n  min-height:150px;\n\n  padding:\n    16px\n    16px\n    36px;\n\n  resize:vertical;\n\n  border:\n    1px solid\n    rgba(17,17,17,.22);\n\n  border-radius:10px;\n\n  outline:none;\n\n  background:\n    rgba(255,255,255,.18);\n\n  color:#111;\n\n  font-family:\n    Inter,\n    Arial,\n    sans-serif;\n\n  font-size:17px;\n\n  line-height:1.55;\n}\n\n\n.yu-message textarea::placeholder{\n\n  color:\n    rgba(17,17,17,.48);\n}\n\n\n.yu-message textarea:focus{\n\n  border-color:\n    var(--electric);\n}\n\n\n.yu-message__count{\n\n  position:absolute;\n\n  right:14px;\n\n  bottom:12px;\n\n  font-size:11px;\n\n  opacity:.55;\n}\n\n\n\/* =========================================================\n   PRIVACY\n========================================================= *\/\n\n.yu-privacy{\n\n  display:flex;\n\n  align-items:flex-start;\n\n  gap:10px;\n\n  margin-top:18px;\n\n  font-size:14px;\n\n  line-height:1.5;\n\n  cursor:pointer;\n}\n\n\n.yu-privacy input{\n\n  position:absolute;\n\n  opacity:0;\n}\n\n\n.yu-privacy__box{\n\n  position:relative;\n\n  flex:\n    0\n    0\n    auto;\n\n  width:17px;\n\n  height:17px;\n\n  margin-top:2px;\n\n  border:\n    1px solid\n    rgba(17,17,17,.52);\n\n  border-radius:3px;\n}\n\n\n.yu-privacy input:checked +\n.yu-privacy__box{\n\n  background:\n    var(--blue);\n\n  border-color:\n    var(--blue);\n}\n\n\n.yu-privacy input:checked +\n.yu-privacy__box::after{\n\n  content:\"\u2713\";\n\n  position:absolute;\n\n  inset:0;\n\n  display:grid;\n\n  place-items:center;\n\n  color:#fff;\n\n  font-size:11px;\n}\n\n\n.yu-privacy strong{\n\n  color:\n    var(--orange);\n}\n\n\n\/* =========================================================\n   FORM FOOTER\n========================================================= *\/\n\n.yu-form__footer{\n\n  display:block;\n\n  width:100%;\n\n  margin-top:25px;\n}\n\n\n\/* =========================================================\n   CTA\n========================================================= *\/\n\n.yu-submit{\n\n  position:relative;\n\n  width:100%;\n\n  min-height:74px;\n\n  display:flex;\n\n  align-items:center;\n\n  justify-content:space-between;\n\n  gap:20px;\n\n  padding:\n    0\n    35px;\n\n  border:0;\n\n  border-radius:8px;\n\n  background:\n    var(--orange);\n\n  color:#111;\n\n  cursor:pointer;\n\n  box-shadow:\n    0 10px 20px\n    rgba(130,48,15,.14);\n\n  transition:\n    background .27s ease,\n    color .27s ease,\n    transform .27s ease,\n    box-shadow .27s ease,\n    opacity .27s ease;\n}\n\n\n.yu-submit:hover{\n\n  background:\n    var(--blue);\n\n  color:#fff;\n\n  transform:\n    translateY(-2px);\n\n  box-shadow:\n    0 16px 28px\n    rgba(64,95,215,.20);\n}\n\n\n.yu-submit span{\n\n  font-family:\n    Khand,\n    Impact,\n    \"Arial Narrow\",\n    sans-serif;\n\n  font-size:\n    clamp(28px,2vw,34px);\n\n  line-height:.92;\n\n  font-weight:600;\n\n  letter-spacing:-.015em;\n\n  text-transform:uppercase;\n}\n\n\n.yu-submit > b{\n\n  font-family:\n    Arial,\n    sans-serif;\n\n  font-size:30px;\n\n  line-height:1;\n\n  font-weight:400;\n\n  transition:\n    transform .28s\n    cubic-bezier(.22,.8,.22,1);\n}\n\n\n.yu-submit:hover > b{\n\n  transform:\n    translateX(5px);\n}\n\n\n\/* =========================================================\n   CTA \u2014 SENDING STATE\n========================================================= *\/\n\n.yu-submit:disabled{\n\n  cursor:wait;\n\n  opacity:.68;\n\n  transform:none !important;\n\n  background:\n    var(--orange);\n\n  color:#111;\n\n  box-shadow:\n    0 8px 16px\n    rgba(130,48,15,.10);\n}\n\n\n.yu-submit[aria-busy=\"true\"] > b{\n\n  animation:\n    yuSubmitArrow\n    .8s\n    ease-in-out\n    infinite;\n}\n\n\n@keyframes yuSubmitArrow{\n\n  50%{\n    transform:\n      translateX(8px);\n  }\n\n}\n\n\n.yu-submit__bolt{\n\n  width:13px;\n\n  height:13px;\n}\n\n\n.yu-submit__bolt--1{\n  top:8px;\n  left:8px;\n}\n\n.yu-submit__bolt--2{\n  top:8px;\n  right:8px;\n}\n\n.yu-submit__bolt--3{\n  bottom:8px;\n  left:8px;\n}\n\n.yu-submit__bolt--4{\n  bottom:8px;\n  right:8px;\n}\n\n\n\/* =========================================================\n   STATUS\n========================================================= *\/\n\n.yu-form-status{\n\n  display:none;\n\n  width:100%;\n\n  margin-top:15px;\n\n  padding:\n    15px\n    16px;\n\n  border-radius:8px;\n\n  font-family:\n    Khand,\n    \"Arial Narrow\",\n    Arial,\n    sans-serif;\n\n  font-size:14px;\n\n  line-height:1.35;\n\n  font-weight:600;\n\n  letter-spacing:.025em;\n}\n\n\n.yu-form-status.is-error{\n\n  display:block;\n\n  color:#8e2600;\n\n  border:\n    1px solid\n    rgba(242,102,55,.60);\n\n  background:\n    rgba(242,102,55,.07);\n}\n\n\n.yu-form-status.is-success{\n\n  display:block;\n\n  color:#173b34;\n\n  border:\n    1px solid\n    rgba(40,119,255,.48);\n\n  background:\n    rgba(40,119,255,.06);\n}\n\n\n\/* =========================================================\n   DESKTOP CIRCUIT\n========================================================= *\/\n\n.yu-circuit--desktop{\n\n  position:absolute;\n\n  z-index:2;\n\n  left:31.5%;\n\n  top:0;\n  bottom:0;\n\n  width:120px;\n\n  transform:\n    translateX(-50%);\n\n  pointer-events:none;\n}\n\n\n.yu-circuit svg{\n\n  width:100%;\n\n  height:100%;\n}\n\n\n.yu-circuit path{\n\n  fill:none;\n\n  vector-effect:\n    non-scaling-stroke;\n\n  stroke-linecap:round;\n\n  stroke-linejoin:round;\n}\n\n\n.yu-circuit__base{\n\n  stroke:\n    rgba(40,119,255,.48);\n\n  stroke-width:1.4;\n}\n\n\n.yu-circuit__base--orange{\n\n  stroke:\n    rgba(242,102,55,.34);\n\n  stroke-width:1.35;\n}\n\n\n.yu-circuit__energy{\n\n  stroke-dasharray:\n    70 720;\n}\n\n\n.yu-circuit__energy--blue{\n\n  stroke:\n    var(--electric);\n\n  stroke-width:2.4;\n\n  animation:\n    yuBlueCurrent\n    3.8s\n    linear\n    infinite;\n}\n\n\n.yu-circuit__energy--orange{\n\n  stroke:\n    var(--orange);\n\n  stroke-width:1.7;\n\n  animation:\n    yuOrangeCurrent\n    4.8s\n    linear\n    infinite;\n}\n\n\n@keyframes yuBlueCurrent{\n\n  from{\n    stroke-dashoffset:720;\n  }\n\n  to{\n    stroke-dashoffset:-150;\n  }\n\n}\n\n\n@keyframes yuOrangeCurrent{\n\n  from{\n    stroke-dashoffset:720;\n  }\n\n  to{\n    stroke-dashoffset:-260;\n  }\n\n}\n\n\n\/* =========================================================\n   LIVE NODES\n========================================================= *\/\n\n.yu-node{\n\n  position:absolute;\n\n  left:46%;\n\n  width:12px;\n\n  height:12px;\n\n  border:\n    2px solid\n    var(--electric);\n\n  border-radius:50%;\n\n  background:#fff;\n\n  transform:\n    translate(-50%,-50%);\n\n  box-shadow:\n    0 0 13px\n    rgba(40,119,255,.82);\n\n  animation:\n    yuNodeLive\n    2s\n    ease-in-out\n    infinite;\n}\n\n\n.yu-node--1{\n  top:25%;\n}\n\n.yu-node--2{\n  top:41%;\n}\n\n.yu-node--3{\n  top:59%;\n}\n\n.yu-node--4{\n  top:77%;\n}\n\n\n@keyframes yuNodeLive{\n\n  50%{\n\n    transform:\n      translate(-50%,-50%)\n      scale(1.2);\n\n    box-shadow:\n      0 0 20px\n      rgba(40,119,255,1);\n  }\n\n}\n\n\n.yu-node.is-flashing{\n\n  background:\n    var(--orange);\n\n  border-color:#fff;\n}\n\n\n\/* =========================================================\n   TABLET \/ MOBILE CIRCUIT\n========================================================= *\/\n\n.yu-circuit-mobile{\n\n  display:none;\n}\n\n\n\/* =========================================================\n   SYSTEM BAR\n========================================================= *\/\n\n.yu-system{\n\n  position:absolute;\n\n  left:28%;\n\n  bottom:-42px;\n\n  width:64%;\n\n  display:flex;\n\n  align-items:center;\n\n  gap:10px;\n}\n\n\n.yu-system__led{\n\n  width:8px;\n\n  height:8px;\n\n  border-radius:50%;\n\n  background:\n    var(--electric);\n\n  box-shadow:\n    0 0 10px\n    var(--electric);\n\n  animation:\n    yuLedPulse\n    1.7s\n    ease-in-out\n    infinite;\n}\n\n\n@keyframes yuLedPulse{\n\n  50%{\n    transform:scale(1.3);\n  }\n\n}\n\n\n.yu-system strong{\n\n  font-family:\n    Khand,\n    \"Arial Narrow\",\n    Arial,\n    sans-serif;\n\n  font-size:10px;\n\n  font-weight:600;\n\n  letter-spacing:.07em;\n}\n\n\n.yu-system__line{\n\n  flex:1;\n\n  height:1px;\n\n  background:\n    rgba(17,17,17,.34);\n}\n\n\n.yu-system__steps{\n\n  display:flex;\n\n  gap:10px;\n}\n\n\n.yu-system__steps i{\n\n  width:6px;\n\n  height:6px;\n\n  border-radius:50%;\n\n  background:\n    var(--blue);\n\n  animation:\n    yuDot\n    2.2s\n    infinite;\n}\n\n\n.yu-system__steps i:last-child{\n\n  background:\n    var(--orange);\n}\n\n\n@keyframes yuDot{\n\n  50%{\n    opacity:.25;\n  }\n\n}\n\n\n\/* =========================================================\n   ERRORS\n========================================================= *\/\n\n.yu-has-error input{\n\n  border-color:\n    var(--orange) !important;\n}\n\n\n.yu-project.yu-has-error\n.yu-project__viewport{\n\n  outline:\n    1px solid\n    rgba(242,102,55,.62);\n\n  outline-offset:5px;\n\n  border-radius:10px;\n}\n\n\n.yu-privacy.yu-has-error{\n\n  color:#922d0a;\n}\n\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@container (max-width:980px){\n\n  .yu-brief__panel{\n\n    grid-template-columns:1fr;\n\n    grid-template-areas:\n      \"intro\"\n      \"circuit\"\n      \"form\"\n      \"system\";\n\n    gap:28px;\n\n    padding:24px;\n\n    overflow:hidden;\n  }\n\n\n  .yu-brief__intro{\n\n    grid-area:intro;\n\n    width:100%;\n\n    display:grid;\n\n    grid-template-columns:\n      minmax(0,1fr)\n      minmax(0,1fr);\n\n    grid-template-areas:\n      \"micro micro\"\n      \"title text\";\n\n    column-gap:\n      clamp(28px,5vw,70px);\n\n    row-gap:0;\n\n    align-items:start;\n  }\n\n\n  .yu-micro{\n\n    grid-area:micro;\n\n    margin-bottom:26px;\n  }\n\n\n  .yu-brief__intro h2{\n\n    grid-area:title;\n\n    max-width:none;\n\n    font-size:\n      clamp(56px,8cqw,82px);\n\n    line-height:.82;\n  }\n\n\n  .yu-brief__intro p{\n\n    grid-area:text;\n\n    align-self:center;\n\n    margin:0;\n\n    padding-top:2px;\n\n    font-size:\n      clamp(17px,2cqw,20px);\n\n    line-height:1.5;\n  }\n\n\n  .yu-circuit--desktop{\n\n    display:none;\n  }\n\n\n  .yu-circuit-mobile{\n\n    grid-area:circuit;\n\n    position:relative;\n\n    display:block;\n\n    width:100%;\n\n    height:42px;\n\n    overflow:hidden;\n  }\n\n\n  .yu-circuit-mobile > span{\n\n    position:absolute;\n\n    left:0;\n    right:0;\n\n    top:50%;\n\n    height:1.5px;\n\n    background:\n      rgba(64,95,215,.42);\n  }\n\n\n  .yu-circuit-mobile > span::after{\n\n    content:\"\";\n\n    position:absolute;\n\n    top:-1px;\n\n    left:0;\n\n    width:110px;\n\n    height:3px;\n\n    background:\n      linear-gradient(\n        90deg,\n        transparent,\n        var(--electric),\n        var(--orange),\n        transparent\n      );\n\n    box-shadow:\n      0 0 9px\n      rgba(40,119,255,.6);\n\n    animation:\n      yuTabletCurrent\n      3.4s\n      linear\n      infinite;\n  }\n\n\n  @keyframes yuTabletCurrent{\n\n    from{\n      transform:\n        translateX(-110px);\n    }\n\n    to{\n      transform:\n        translateX(\n          calc(100cqw + 110px)\n        );\n    }\n\n  }\n\n\n  .yu-circuit-mobile i{\n\n    position:absolute;\n\n    top:50%;\n\n    width:10px;\n\n    height:10px;\n\n    border:\n      2px solid\n      var(--electric);\n\n    border-radius:50%;\n\n    background:#fff;\n\n    transform:\n      translate(-50%,-50%);\n\n    box-shadow:\n      0 0 10px\n      rgba(40,119,255,.75);\n  }\n\n\n  .yu-circuit-mobile i:nth-of-type(1){\n    left:22%;\n  }\n\n\n  .yu-circuit-mobile i:nth-of-type(2){\n    left:50%;\n  }\n\n\n  .yu-circuit-mobile i:nth-of-type(3){\n    left:78%;\n  }\n\n\n  .yu-form{\n\n    grid-area:form;\n\n    width:100%;\n\n    min-width:0;\n\n    max-width:100%;\n  }\n\n\n  .yu-form__row{\n\n    grid-template-columns:\n      repeat(\n        2,\n        minmax(0,1fr)\n      );\n\n    gap:22px;\n  }\n\n\n  .yu-project__viewport{\n\n    width:100%;\n\n    max-width:100%;\n\n    overflow:visible;\n  }\n\n\n  .yu-project__grid{\n\n    grid-template-columns:\n      repeat(\n        2,\n        minmax(0,1fr)\n      );\n\n    gap:14px;\n\n    width:100%;\n\n    max-width:100%;\n  }\n\n\n  .yu-project-card{\n\n    width:100%;\n\n    min-width:0;\n\n    min-height:155px;\n\n    padding:\n      20px\n      18px;\n  }\n\n\n  .yu-project-card strong{\n\n    font-size:17px;\n  }\n\n\n  .yu-project-card small{\n\n    font-size:14px;\n  }\n\n\n  .yu-project__mobile-hint{\n\n    display:none;\n  }\n\n\n  .yu-dynamic__group{\n\n    padding:20px;\n  }\n\n\n  .yu-submit{\n\n    min-height:72px;\n\n    padding:\n      0\n      30px;\n  }\n\n\n  .yu-submit span{\n\n    font-size:28px;\n  }\n\n\n  .yu-system{\n\n    grid-area:system;\n\n    position:relative;\n\n    left:auto;\n\n    bottom:auto;\n\n    width:100%;\n\n    margin-top:2px;\n  }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@container (max-width:600px){\n\n  .yu-brief__panel{\n\n    gap:22px;\n\n    padding:20px;\n  }\n\n\n  .yu-brief__intro{\n\n    display:block;\n  }\n\n\n  .yu-micro{\n\n    margin-bottom:23px;\n  }\n\n\n  .yu-brief__intro h2{\n\n    font-size:\n      clamp(46px,14cqw,64px);\n\n    line-height:.84;\n  }\n\n\n  .yu-brief__intro p{\n\n    margin-top:22px;\n\n    padding-top:0;\n\n    font-size:16px;\n  }\n\n\n  .yu-form__row{\n\n    grid-template-columns:1fr;\n\n    gap:25px;\n  }\n\n\n  .yu-field__label{\n\n    font-size:16px;\n  }\n\n\n  .yu-field__label b{\n\n    font-size:31px;\n  }\n\n\n  .yu-project{\n\n    width:100%;\n\n    margin-top:38px;\n  }\n\n\n  .yu-project__top{\n\n    align-items:flex-end;\n\n    gap:15px;\n\n    margin-bottom:14px;\n  }\n\n\n  .yu-project__helper{\n\n    max-width:60%;\n\n    font-size:15px;\n  }\n\n\n  .yu-project__mobile-hint{\n\n    display:flex;\n\n    align-items:center;\n\n    gap:7px;\n\n    flex-shrink:0;\n\n    color:\n      var(--blue);\n\n    font-family:\n      Khand,\n      sans-serif;\n\n    font-size:11px;\n\n    font-weight:600;\n\n    letter-spacing:.08em;\n  }\n\n\n  .yu-project__mobile-hint b{\n\n    display:inline-block;\n\n    font-size:19px;\n\n    animation:\n      yuSwipeArrow\n      1.5s\n      ease-in-out\n      infinite;\n  }\n\n\n  @keyframes yuSwipeArrow{\n\n    50%{\n      transform:\n        translateX(6px);\n    }\n\n  }\n\n\n  .yu-project__viewport{\n\n    position:relative;\n\n    width:100%;\n\n    max-width:100%;\n\n    overflow:hidden;\n\n    border-radius:10px;\n  }\n\n\n  .yu-project__viewport::after{\n\n    content:\"\";\n\n    position:absolute;\n\n    z-index:5;\n\n    top:0;\n    right:0;\n    bottom:10px;\n\n    width:34px;\n\n    pointer-events:none;\n\n    background:\n      linear-gradient(\n        90deg,\n        rgba(244,243,239,0),\n        rgba(244,243,239,.74)\n      );\n  }\n\n\n  .yu-project__grid{\n\n    display:flex;\n\n    gap:12px;\n\n    width:100%;\n\n    max-width:100%;\n\n    padding:\n      2px\n      40px\n      14px\n      0;\n\n    overflow-x:auto;\n\n    overflow-y:hidden;\n\n    scroll-snap-type:\n      x mandatory;\n\n    overscroll-behavior-x:\n      contain;\n\n    -webkit-overflow-scrolling:\n      touch;\n\n    scrollbar-width:none;\n  }\n\n\n  .yu-project__grid::-webkit-scrollbar{\n\n    display:none;\n  }\n\n\n  .yu-project-card{\n\n    flex:\n      0\n      0\n      82%;\n\n    width:82%;\n\n    min-width:82%;\n\n    max-width:82%;\n\n    min-height:180px;\n\n    padding:\n      22px\n      18px;\n\n    scroll-snap-align:start;\n\n    scroll-snap-stop:always;\n  }\n\n\n  .yu-project-card strong{\n\n    font-size:18px;\n  }\n\n\n  .yu-project-card small{\n\n    font-size:14px;\n  }\n\n\n  .yu-dynamic__group{\n\n    padding:18px;\n  }\n\n\n  .yu-dynamic__group\n  .yu-form__row{\n\n    grid-template-columns:1fr;\n\n    gap:18px;\n  }\n\n\n  .yu-message{\n\n    margin-top:34px;\n  }\n\n\n  .yu-message textarea{\n\n    min-height:160px;\n\n    font-size:16px;\n  }\n\n\n  .yu-submit{\n\n    width:100%;\n\n    min-height:68px;\n\n    padding:\n      0\n      25px;\n  }\n\n\n  .yu-submit span{\n\n    font-size:27px;\n  }\n\n\n  .yu-submit > b{\n\n    font-size:26px;\n  }\n\n}\n\n\n\/* =========================================================\n   SMALL MOBILE\n========================================================= *\/\n\n@container (max-width:390px){\n\n  .yu-project-card{\n\n    flex-basis:86%;\n\n    width:86%;\n\n    min-width:86%;\n\n    max-width:86%;\n  }\n\n\n  .yu-project__helper{\n\n    max-width:55%;\n  }\n\n\n  .yu-submit span{\n\n    font-size:24px;\n  }\n\n}\n\n\n\/* =========================================================\n   FALLBACK TABLET\n========================================================= *\/\n\n@media(max-width:980px){\n\n  .yu-brief__panel{\n\n    grid-template-columns:1fr;\n\n    grid-template-areas:\n      \"intro\"\n      \"circuit\"\n      \"form\"\n      \"system\";\n  }\n\n\n  .yu-circuit--desktop{\n\n    display:none;\n  }\n\n\n  .yu-circuit-mobile{\n\n    display:block;\n  }\n\n}\n\n\n\/* =========================================================\n   FALLBACK MOBILE\n========================================================= *\/\n\n@media(max-width:600px){\n\n  .yu-brief__intro{\n\n    display:block;\n  }\n\n\n  .yu-form__row{\n\n    grid-template-columns:1fr;\n  }\n\n\n  .yu-project__grid{\n\n    display:flex;\n  }\n\n}\n\n\n\/* =========================================================\n   REDUCED MOTION\n========================================================= *\/\n\n@media(prefers-reduced-motion:reduce){\n\n  .yu-circuit__energy,\n  .yu-node,\n  .yu-system__led,\n  .yu-system__steps i,\n  .yu-circuit-mobile > span::after,\n  .yu-project__mobile-hint b,\n  .yu-submit[aria-busy=\"true\"] > b{\n\n    animation:none !important;\n  }\n\n}\n\n<\/style>\n\n\n\n<script>\n\n(function(){\n\n  function initYuBrief(){\n\n    const root =\n      document.getElementById(\n        \"yuBrief\"\n      );\n\n\n    if(\n      !root ||\n      root.dataset.ready === \"yes\"\n    ){\n      return;\n    }\n\n\n    root.dataset.ready =\n      \"yes\";\n\n\n    const form =\n      root.querySelector(\n        \"#yuProjectForm\"\n      );\n\n\n    if(!form){\n      return;\n    }\n\n\n    const nameInput =\n      form.elements.name;\n\n\n    const emailInput =\n      form.elements.email;\n\n\n    const message =\n      form.elements.message;\n\n\n    const privacy =\n      form.elements.privacy;\n\n\n    const radios =\n      Array.from(\n        form.querySelectorAll(\n          'input[name=\"project_type\"]'\n        )\n      );\n\n\n    const dynamic =\n      root.querySelector(\n        \"#yuDynamic\"\n      );\n\n\n    const groups =\n      Array.from(\n        root.querySelectorAll(\n          \".yu-dynamic__group\"\n        )\n      );\n\n\n    const projectFieldset =\n      root.querySelector(\n        \".yu-project\"\n      );\n\n\n    const privacyLabel =\n      root.querySelector(\n        \".yu-privacy\"\n      );\n\n\n    const count =\n      root.querySelector(\n        \"#yuCharCount\"\n      );\n\n\n    const status =\n      root.querySelector(\n        \"#yuFormStatus\"\n      );\n\n\n    const nodes =\n      Array.from(\n        root.querySelectorAll(\n          \".yu-node\"\n        )\n      );\n\n\n    const submitButton =\n      root.querySelector(\n        \".yu-submit\"\n      );\n\n\n    const submitLabel =\n      root.querySelector(\n        \".yu-submit__label\"\n      );\n\n\n    \/* =====================================================\n       PROJECT VALUE\n    ====================================================== *\/\n\n    function projectValue(){\n\n      const selected =\n        radios.find(\n          function(radio){\n\n            return radio.checked;\n\n          }\n        );\n\n\n      return selected\n        ? selected.value\n        : \"\";\n\n    }\n\n\n    \/* =====================================================\n       EMAIL VALIDATION\n    ====================================================== *\/\n\n    function emailIsValid(value){\n\n      return \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/\n        .test(\n          value.trim()\n        );\n\n    }\n\n\n    \/* =====================================================\n       DYNAMIC GROUPS\n    ====================================================== *\/\n\n    function updateDynamic(){\n\n      const value =\n        projectValue();\n\n\n      groups.forEach(\n        function(group){\n\n          group.classList.toggle(\n            \"is-active\",\n            group.dataset.group === value\n          );\n\n        }\n      );\n\n\n      dynamic.classList.toggle(\n        \"is-open\",\n        Boolean(value)\n      );\n\n    }\n\n\n    \/* =====================================================\n       NODE FEEDBACK\n    ====================================================== *\/\n\n    function flashNode(index){\n\n      const node =\n        nodes[index];\n\n\n      if(!node){\n        return;\n      }\n\n\n      node.classList.add(\n        \"is-flashing\"\n      );\n\n\n      window.setTimeout(\n        function(){\n\n          node.classList.remove(\n            \"is-flashing\"\n          );\n\n        },\n        500\n      );\n\n    }\n\n\n    \/* =====================================================\n       COUNTER\n    ====================================================== *\/\n\n    function updateCounter(){\n\n      if(!count || !message){\n        return;\n      }\n\n\n      count.textContent =\n        message.value.length;\n\n    }\n\n\n    \/* =====================================================\n       RESET ERRORS\n    ====================================================== *\/\n\n    function resetErrors(){\n\n      root\n        .querySelectorAll(\n          \".yu-has-error\"\n        )\n        .forEach(\n          function(element){\n\n            element.classList.remove(\n              \"yu-has-error\"\n            );\n\n          }\n        );\n\n\n      status.className =\n        \"yu-form-status\";\n\n\n      status.textContent =\n        \"\";\n\n    }\n\n\n    \/* =====================================================\n       VALIDATION\n    ====================================================== *\/\n\n    function validate(){\n\n      resetErrors();\n\n\n      let firstError =\n        null;\n\n\n      \/* NAME *\/\n\n      if(\n        nameInput.value\n          .trim()\n          .length < 2\n      ){\n\n        nameInput\n          .closest(\".yu-field\")\n          .classList\n          .add(\"yu-has-error\");\n\n\n        firstError =\n          firstError ||\n          nameInput;\n\n      }\n\n\n      \/* EMAIL *\/\n\n      if(\n        !emailIsValid(\n          emailInput.value\n        )\n      ){\n\n        emailInput\n          .closest(\".yu-field\")\n          .classList\n          .add(\"yu-has-error\");\n\n\n        firstError =\n          firstError ||\n          emailInput;\n\n      }\n\n\n      \/* PROJECT *\/\n\n      if(\n        !projectValue()\n      ){\n\n        projectFieldset\n          .classList\n          .add(\"yu-has-error\");\n\n\n        firstError =\n          firstError ||\n          projectFieldset;\n\n      }\n\n\n      \/* PRIVACY *\/\n\n      if(\n        !privacy.checked\n      ){\n\n        privacyLabel\n          .classList\n          .add(\"yu-has-error\");\n\n\n        firstError =\n          firstError ||\n          privacyLabel;\n\n      }\n\n\n      \/* ERROR FOUND *\/\n\n      if(firstError){\n\n        status.className =\n          \"yu-form-status is-error\";\n\n\n        status.textContent =\n          \"SYSTEM \/ INPUT INCOMPLETE \u2014 check the fields marked with *.\";\n\n\n        const target =\n          firstError.closest\n            ? firstError.closest(\n                \".yu-field, .yu-project, .yu-privacy\"\n              )\n            : firstError;\n\n\n        if(target){\n\n          target.scrollIntoView({\n\n            behavior:\"smooth\",\n\n            block:\"center\"\n\n          });\n\n        }\n\n\n        return false;\n\n      }\n\n\n      return true;\n\n    }\n\n\n    \/* =====================================================\n       FIELD EVENTS\n    ====================================================== *\/\n\n    nameInput.addEventListener(\n      \"change\",\n      function(){\n\n        nameInput\n          .closest(\".yu-field\")\n          .classList\n          .remove(\n            \"yu-has-error\"\n          );\n\n\n        if(\n          nameInput.value\n            .trim()\n            .length >= 2\n        ){\n\n          flashNode(0);\n\n        }\n\n      }\n    );\n\n\n    emailInput.addEventListener(\n      \"change\",\n      function(){\n\n        emailInput\n          .closest(\".yu-field\")\n          .classList\n          .remove(\n            \"yu-has-error\"\n          );\n\n\n        if(\n          emailIsValid(\n            emailInput.value\n          )\n        ){\n\n          flashNode(1);\n\n        }\n\n      }\n    );\n\n\n    radios.forEach(\n      function(radio){\n\n        radio.addEventListener(\n          \"change\",\n          function(){\n\n            projectFieldset\n              .classList\n              .remove(\n                \"yu-has-error\"\n              );\n\n\n            updateDynamic();\n\n\n            flashNode(2);\n\n          }\n        );\n\n      }\n    );\n\n\n    message.addEventListener(\n      \"input\",\n      updateCounter\n    );\n\n\n    message.addEventListener(\n      \"change\",\n      function(){\n\n        if(\n          message.value.trim()\n        ){\n\n          flashNode(3);\n\n        }\n\n      }\n    );\n\n\n    privacy.addEventListener(\n      \"change\",\n      function(){\n\n        privacyLabel\n          .classList\n          .remove(\n            \"yu-has-error\"\n          );\n\n\n        if(\n          privacy.checked\n        ){\n\n          flashNode(3);\n\n        }\n\n      }\n    );\n\n\n    \/* =====================================================\n       REAL WORDPRESS AJAX SUBMIT\n    ====================================================== *\/\n\n    form.addEventListener(\n      \"submit\",\n      async function(event){\n\n        event.preventDefault();\n\n\n        \/* -----------------------------------------------\n           FRONTEND VALIDATION\n        ------------------------------------------------ *\/\n\n        if(\n          !validate()\n        ){\n          return;\n        }\n\n\n        \/* -----------------------------------------------\n           AJAX CONFIG CHECK\n        ------------------------------------------------ *\/\n\n        if(\n          typeof window.yuBriefAjax === \"undefined\" ||\n          !window.yuBriefAjax.ajaxUrl ||\n          !window.yuBriefAjax.nonce\n        ){\n\n          status.className =\n            \"yu-form-status is-error\";\n\n\n          status.textContent =\n            \"SYSTEM \/ CONNECTION ERROR \u2014 unable to initialise sending.\";\n\n\n          console.error(\n            \"YU.DESIGN: yuBriefAjax unavailable.\"\n          );\n\n\n          return;\n        }\n\n\n        \/* -----------------------------------------------\n           LOADING STATE\n        ------------------------------------------------ *\/\n\n        const originalLabel =\n          submitLabel\n            ? submitLabel.textContent\n            : \"START THE PROJECT\";\n\n\n        if(submitButton){\n\n          submitButton.disabled =\n            true;\n\n\n          submitButton.setAttribute(\n            \"aria-busy\",\n            \"true\"\n          );\n\n        }\n\n\n        if(submitLabel){\n\n          submitLabel.textContent =\n            \"SENDING...\";\n\n        }\n\n\n        status.className =\n          \"yu-form-status\";\n\n\n        status.textContent =\n          \"\";\n\n\n        \/* -----------------------------------------------\n           FORM DATA\n        ------------------------------------------------ *\/\n\n        const formData =\n          new FormData(\n            form\n          );\n\n\n        formData.append(\n          \"action\",\n          \"yu_send_brief\"\n        );\n\n\n        formData.append(\n          \"nonce\",\n          window.yuBriefAjax.nonce\n        );\n\n\n        \/* -----------------------------------------------\n           AJAX REQUEST\n        ------------------------------------------------ *\/\n\n        try{\n\n          const response =\n            await fetch(\n              window.yuBriefAjax.ajaxUrl,\n              {\n\n                method:\"POST\",\n\n                body:formData,\n\n                credentials:\"same-origin\",\n\n                headers:{\n                  \"X-Requested-With\":\n                    \"XMLHttpRequest\"\n                }\n\n              }\n            );\n\n\n          \/* ---------------------------------------------\n             SERVER RESPONSE\n          ---------------------------------------------- *\/\n\n          let result;\n\n\n          try{\n\n            result =\n              await response.json();\n\n          }catch(parseError){\n\n            throw new Error(\n              \"Invalid server response.\"\n            );\n\n          }\n\n\n          \/* ---------------------------------------------\n             WORDPRESS ERROR\n          ---------------------------------------------- *\/\n\n          if(\n            !response.ok ||\n            !result.success\n          ){\n\n            const serverMessage =\n              result &&\n              result.data &&\n              result.data.message\n                ? result.data.message\n                : \"Message could not be sent.\";\n\n\n            throw new Error(\n              serverMessage\n            );\n\n          }\n\n\n          \/* ---------------------------------------------\n             SUCCESS\n          ---------------------------------------------- *\/\n\n          status.className =\n            \"yu-form-status is-success\";\n\n\n          status.textContent =\n            \"SYSTEM \/ BRIEF RECEIVED \u2014 message sent successfully.\";\n\n\n          \/* RESET FORM *\/\n\n          form.reset();\n\n\n          updateCounter();\n\n          updateDynamic();\n\n\n          root\n            .querySelectorAll(\n              \".yu-has-error\"\n            )\n            .forEach(\n              function(element){\n\n                element.classList.remove(\n                  \"yu-has-error\"\n                );\n\n              }\n            );\n\n\n          \/* FEEDBACK NODES *\/\n\n          nodes.forEach(\n            function(node,index){\n\n              window.setTimeout(\n                function(){\n\n                  flashNode(index);\n\n                },\n                index * 110\n              );\n\n            }\n          );\n\n\n        }catch(error){\n\n          \/* ---------------------------------------------\n             ERROR\n          ---------------------------------------------- *\/\n\n          console.error(\n            \"YU BRIEF ERROR:\",\n            error\n          );\n\n\n          status.className =\n            \"yu-form-status is-error\";\n\n\n          status.textContent =\n            \"SYSTEM \/ SEND ERROR \u2014 \" +\n            (\n              error &&\n              error.message\n                ? error.message\n                : \"please try again in a moment.\"\n            );\n\n        }finally{\n\n          \/* ---------------------------------------------\n             RESTORE BUTTON\n          ---------------------------------------------- *\/\n\n          if(submitButton){\n\n            submitButton.disabled =\n              false;\n\n\n            submitButton.removeAttribute(\n              \"aria-busy\"\n            );\n\n          }\n\n\n          if(submitLabel){\n\n            submitLabel.textContent =\n              originalLabel;\n\n          }\n\n        }\n\n      }\n    );\n\n\n    \/* =====================================================\n       INITIAL STATE\n    ====================================================== *\/\n\n    updateCounter();\n\n    updateDynamic();\n\n  }\n\n\n  \/* =======================================================\n     INIT\n  ======================================================= *\/\n\n  if(\n    document.readyState ===\n    \"loading\"\n  ){\n\n    document.addEventListener(\n      \"DOMContentLoaded\",\n      initYuBrief,\n      {\n        once:true\n      }\n    );\n\n  }else{\n\n    initYuBrief();\n\n  }\n\n})();\n\n<\/script>\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>YU.DESIGN 01 \/ CONTACT IDENTITY YULIYA PIVNYAK. WEB DESIGNER \/ UX STRATEGIST WORDPRESS \u00b7 UX\/UI \u00b7 DYNAMIC SYSTEMS TEL (+39) 328 621 8674 \u2197 EMAIL info@yuliyapivnyak.it \u2197 SOCIAL INSTAGRAM \u2197 LINKEDIN \u2197 FACEBOOK \u2197 PINTEREST \u2197 02 \/ UX UX \/ UI Strategy \u00b7 Interfaces 03 \/ BUILD WORDPRESS Elementor \u00b7 ACF \u00b7 CPT [ [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-1675","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.yuliyapivnyak.it\/en\/wp-json\/wp\/v2\/pages\/1675","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=1675"}],"version-history":[{"count":0,"href":"https:\/\/www.yuliyapivnyak.it\/en\/wp-json\/wp\/v2\/pages\/1675\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.yuliyapivnyak.it\/en\/wp-json\/wp\/v2\/media?parent=1675"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}