{"id":39338,"date":"2024-09-27T10:55:17","date_gmt":"2024-09-27T08:55:17","guid":{"rendered":"https:\/\/beyondgreen.it\/green\/"},"modified":"2026-11-05T16:19:57","modified_gmt":"2026-11-05T15:19:57","slug":"green","status":"publish","type":"page","link":"https:\/\/beyondgreen.it\/it\/green\/","title":{"rendered":"Green"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"39338\" class=\"elementor elementor-39338 elementor-36482\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f7b9881 e-con-full e-flex e-con e-parent\" data-id=\"f7b9881\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-384e43f elementor-widget elementor-widget-html\" data-id=\"384e43f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Red+Hat+Display:wght@400;500;600;700;800;900&display=swap');\r\n\r\n.bg-green {\r\n  --green: #6eb744;\r\n  --ink: #151713;\r\n  --gutter: clamp(24px, 6vw, 110px);\r\n  --heading-size: clamp(40px, 5.6vw, 86px);\r\n  --mobile-header-space: 100px;\r\n  width: 100%;\r\n  overflow: hidden;\r\n  background: #f3f3ed;\r\n  color: var(--ink);\r\n  font-family: \"Red Hat Display\", sans-serif;\r\n}\r\n\r\n.bg-green *,\r\n.bg-green *::before,\r\n.bg-green *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n.bg-green h1,\r\n.bg-green h2,\r\n.bg-green p,\r\n.bg-green figure {\r\n  margin: 0;\r\n  padding: 0;\r\n  color: inherit;\r\n  font-family: inherit;\r\n}\r\n\r\n.bg-green img {\r\n  display: block;\r\n  max-width: 100%;\r\n}\r\n\r\n.bg-green a {\r\n  color: inherit;\r\n}\r\n\r\n.bg-green a:focus-visible {\r\n  outline: 3px solid currentColor;\r\n  outline-offset: 6px;\r\n}\r\n\r\n.bg-green .bgreen-inner {\r\n  width: 100%;\r\n  max-width: 1600px;\r\n  margin-inline: auto;\r\n  padding-inline: var(--gutter);\r\n}\r\n\r\n.bg-green .bgreen-eyebrow {\r\n  display: block;\r\n  font-size: 18px;\r\n  font-weight: 800;\r\n  line-height: 1.4;\r\n  letter-spacing: 6px;\r\n  text-transform: uppercase;\r\n}\r\n\r\n\/* PRIMA SEZIONE VERDE *\/\r\n\r\n.bg-green .bgreen-hero {\r\n  position: relative;\r\n  height: 100vh;\r\n  height: 100svh;\r\n  overflow: hidden;\r\n  background: var(--green);\r\n  color: #fff;\r\n}\r\n\r\n.bg-green .bgreen-hero-grid {\r\n  display: grid;\r\n  grid-template-columns: minmax(0,1.12fr) minmax(0,.88fr);\r\n  align-items: center;\r\n  gap: 30px;\r\n  height: 100%;\r\n  padding-top: clamp(90px, 10vh, 130px);\r\n  padding-bottom: clamp(30px, 5vh, 65px);\r\n}\r\n\r\n.bg-green .bgreen-hero-copy {\r\n  position: relative;\r\n  z-index: 2;\r\n  min-width: 0;\r\n}\r\n\r\n\/* Stessa dimensione, peso e spaziatura dei titoli sotto *\/\r\n\r\n.bg-green .bgreen-hero h1,\r\n.bg-green .bgreen-chapter h2 {\r\n  font-size: var(--heading-size);\r\n  font-weight: 900;\r\n  line-height: 1.04;\r\n  letter-spacing: -.02em;\r\n}\r\n\r\n.bg-green .bgreen-hero h1 {\r\n  margin-top: 25px;\r\n  color: #fff;\r\n}\r\n\r\n.bg-green .bgreen-hero-heading-first,\r\n.bg-green .bgreen-hero-heading-second {\r\n  display: block;\r\n  font-size: inherit;\r\n  font-weight: inherit;\r\n  line-height: inherit;\r\n  letter-spacing: inherit;\r\n}\r\n\r\n.bg-green .bgreen-hero-heading-first {\r\n  white-space: nowrap;\r\n}\r\n\r\n.bg-green .bgreen-title-line {\r\n  display: block;\r\n  overflow: hidden;\r\n  padding-bottom: .12em;\r\n  margin-bottom: -.12em;\r\n}\r\n\r\n.bg-green .bgreen-title-line > span {\r\n  display: block;\r\n}\r\n\r\n.bg-green .bgreen-hero-visual {\r\n  position: relative;\r\n  align-self: stretch;\r\n  min-width: 0;\r\n  min-height: 0;\r\n}\r\n\r\n.bg-green .bgreen-hero-art {\r\n  position: absolute;\r\n  inset: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  max-width: 580px;\r\n  max-height: 640px;\r\n  margin: auto;\r\n}\r\n\r\n.bg-green .bgreen-hero-ring {\r\n  position: absolute;\r\n  inset: 0;\r\n  width: 85%;\r\n  aspect-ratio: 1;\r\n  max-height: 90%;\r\n  margin: auto;\r\n  border: 1px solid rgba(255,255,255,.38);\r\n  border-radius: 50%;\r\n}\r\n\r\n.bg-green .bgreen-hero-ring::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  top: 13%;\r\n  right: 13%;\r\n  width: 15px;\r\n  height: 15px;\r\n  border-radius: 50%;\r\n  background: #fff;\r\n}\r\n\r\n.bg-green .bgreen-hero-object {\r\n  position: relative;\r\n  z-index: 1;\r\n  width: 100%;\r\n  height: 100%;\r\n  min-height: 0;\r\n  transform: translateY(var(--shift, 0px));\r\n}\r\n\r\n.bg-green .bgreen-object-reveal {\r\n  display: grid;\r\n  place-items: center;\r\n  width: 100%;\r\n  height: 100%;\r\n  min-height: 0;\r\n}\r\n\r\n.bg-green .bgreen-hero-object img {\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: contain;\r\n  object-position: center;\r\n}\r\n\r\n.bg-green .bgreen-scroll {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 16px;\r\n  min-height: 42px;\r\n  margin-top: 30px;\r\n  color: #fff !important;\r\n  font-size: 12px;\r\n  font-weight: 700;\r\n  line-height: 1.4;\r\n  letter-spacing: 1px;\r\n  text-transform: uppercase;\r\n  text-decoration: none !important;\r\n}\r\n\r\n.bg-green .bgreen-scroll span {\r\n  display: grid;\r\n  place-items: center;\r\n  flex-shrink: 0;\r\n  width: 42px;\r\n  height: 42px;\r\n  border: 1px solid rgba(255,255,255,.65);\r\n  border-radius: 50%;\r\n  font-size: 23px;\r\n  transition: transform .3s ease, background .3s ease;\r\n}\r\n\r\n.bg-green .bgreen-scroll:hover span {\r\n  transform: translateY(5px);\r\n  background: rgba(255,255,255,.15);\r\n}\r\n\r\n\/* SECONDA SEZIONE NERA *\/\r\n\r\n.bg-green .bgreen-intro {\r\n  padding-block: clamp(70px, 9vw, 135px);\r\n  scroll-margin-top: 90px;\r\n  background: #000;\r\n  color: #fff;\r\n}\r\n\r\n.bg-green .bgreen-intro-grid {\r\n  display: grid;\r\n  grid-template-columns: minmax(0,.65fr) minmax(0,1.35fr);\r\n  gap: 50px;\r\n}\r\n\r\n.bg-green .bgreen-intro .bgreen-eyebrow,\r\n.bg-green .bgreen-intro h2,\r\n.bg-green .bgreen-intro p {\r\n  color: #fff;\r\n}\r\n\r\n.bg-green .bgreen-intro h2 {\r\n  font-size: clamp(32px, 4.6vw, 68px);\r\n  font-weight: 900;\r\n  line-height: 1.12;\r\n  letter-spacing: -.02em;\r\n}\r\n\r\n.bg-green .bgreen-intro p {\r\n  max-width: 650px;\r\n  margin-top: 28px;\r\n  font-size: 19px;\r\n  font-weight: 400;\r\n  line-height: 1.65;\r\n}\r\n\r\n\/* SEZIONI CONTENUTO *\/\r\n\r\n.bg-green .bgreen-chapter {\r\n  border-top: 1px solid rgba(21,23,19,.14);\r\n}\r\n\r\n.bg-green .bgreen-chapter--white {\r\n  background: #fff;\r\n  color: var(--ink);\r\n}\r\n\r\n.bg-green .bgreen-chapter--green {\r\n  background: var(--green);\r\n  color: #fff;\r\n}\r\n\r\n.bg-green .bgreen-chapter--dark {\r\n  background: var(--ink);\r\n  color: #fff;\r\n}\r\n\r\n.bg-green .bgreen-chapter--green h2,\r\n.bg-green .bgreen-chapter--green p,\r\n.bg-green .bgreen-chapter--green .bgreen-eyebrow,\r\n.bg-green .bgreen-chapter--dark h2,\r\n.bg-green .bgreen-chapter--dark p,\r\n.bg-green .bgreen-chapter--dark .bgreen-eyebrow {\r\n  color: #fff;\r\n}\r\n\r\n.bg-green .bgreen-chapter-grid {\r\n  display: grid;\r\n  grid-template-columns: minmax(0,1fr) minmax(0,1fr);\r\n  align-items: center;\r\n  gap: clamp(35px, 6vw, 95px);\r\n  min-height: 660px;\r\n  padding-block: 80px;\r\n}\r\n\r\n.bg-green .bgreen-chapter--reverse .bgreen-visual {\r\n  order: 2;\r\n}\r\n\r\n.bg-green .bgreen-chapter--reverse .bgreen-copy {\r\n  order: 1;\r\n}\r\n\r\n.bg-green .bgreen-copy {\r\n  position: relative;\r\n  z-index: 2;\r\n  min-width: 0;\r\n}\r\n\r\n.bg-green .bgreen-chapter-top {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 20px;\r\n  margin-bottom: 30px;\r\n}\r\n\r\n.bg-green .bgreen-number {\r\n  display: grid;\r\n  place-items: center;\r\n  flex-shrink: 0;\r\n  width: 44px;\r\n  height: 44px;\r\n  border: 1px solid currentColor;\r\n  border-radius: 50%;\r\n  font-size: 12px;\r\n  font-weight: 600;\r\n}\r\n\r\n.bg-green .bgreen-chapter h2 {\r\n  overflow-wrap: anywhere;\r\n}\r\n\r\n.bg-green .bgreen-chapter p {\r\n  max-width: 560px;\r\n  margin-top: 28px;\r\n  font-size: clamp(17px, 1.45vw, 21px);\r\n  font-weight: 400;\r\n  line-height: 1.65;\r\n}\r\n\r\n.bg-green .bgreen-visual {\r\n  position: relative;\r\n  display: grid;\r\n  place-items: center;\r\n  min-width: 0;\r\n  min-height: 430px;\r\n}\r\n\r\n.bg-green .bgreen-disc {\r\n  position: absolute;\r\n  width: 82%;\r\n  max-width: 440px;\r\n  aspect-ratio: 1;\r\n  border-radius: 50%;\r\n  background: rgba(110,183,68,.12);\r\n}\r\n\r\n.bg-green .bgreen-chapter--green .bgreen-disc {\r\n  background: rgba(255,255,255,.17);\r\n}\r\n\r\n.bg-green .bgreen-chapter--dark .bgreen-disc {\r\n  border: 1px solid rgba(255,255,255,.2);\r\n  background: transparent;\r\n}\r\n\r\n.bg-green .bgreen-object {\r\n  position: relative;\r\n  z-index: 1;\r\n  width: 95%;\r\n  transform: translateY(var(--shift, 0px));\r\n}\r\n\r\n.bg-green .bgreen-object img {\r\n  width: 100%;\r\n  height: 430px;\r\n  object-fit: contain;\r\n}\r\n\r\n.bg-green .bgreen-object--apple {\r\n  width: 82%;\r\n}\r\n\r\n.bg-green .bgreen-object--car {\r\n  width: 108%;\r\n  max-width: 650px;\r\n}\r\n\r\n.bg-green .bgreen-shadow {\r\n  position: absolute;\r\n  bottom: 15px;\r\n  left: 20%;\r\n  width: 60%;\r\n  height: 28px;\r\n  border-radius: 50%;\r\n  background: rgba(0,0,0,.13);\r\n  filter: blur(16px);\r\n}\r\n\r\n.bg-green .bgreen-recycle {\r\n  position: relative;\r\n  width: 100%;\r\n  height: 460px;\r\n  transform: translateY(var(--shift, 0px));\r\n}\r\n\r\n.bg-green .bgreen-recycle-item {\r\n  position: absolute;\r\n  width: 45%;\r\n  height: 75%;\r\n}\r\n\r\n.bg-green .bgreen-recycle-item img {\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: contain;\r\n}\r\n\r\n.bg-green .bgreen-recycle-glass {\r\n  z-index: 2;\r\n  top: 1%;\r\n  left: 0;\r\n  transform: rotate(-12deg);\r\n}\r\n\r\n.bg-green .bgreen-recycle-paper {\r\n  z-index: 1;\r\n  top: 12%;\r\n  left: 29%;\r\n  transform: rotate(9deg);\r\n}\r\n\r\n.bg-green .bgreen-recycle-can {\r\n  z-index: 3;\r\n  top: 27%;\r\n  right: 0;\r\n  transform: rotate(15deg);\r\n}\r\n\r\n\/* SEZIONE FINALE *\/\r\n\r\n.bg-green .bgreen-final {\r\n  position: relative;\r\n  isolation: isolate;\r\n  overflow: hidden;\r\n  background: #172312;\r\n  color: #fff;\r\n}\r\n\r\n.bg-green .bgreen-final-background {\r\n  position: absolute;\r\n  inset: -6% 0;\r\n  z-index: -3;\r\n  transform: translateY(var(--shift, 0px));\r\n}\r\n\r\n.bg-green .bgreen-final-background img {\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n  object-position: center;\r\n}\r\n\r\n.bg-green .bgreen-final-shade {\r\n  position: absolute;\r\n  inset: 0;\r\n  z-index: -2;\r\n  background: linear-gradient(\r\n    90deg,\r\n    rgba(10,22,8,.86) 0%,\r\n    rgba(10,22,8,.72) 55%,\r\n    rgba(10,22,8,.58) 100%\r\n  );\r\n}\r\n\r\n.bg-green .bgreen-final-orbit {\r\n  position: absolute;\r\n  z-index: -1;\r\n  top: 50%;\r\n  right: -14%;\r\n  width: 68%;\r\n  aspect-ratio: 1;\r\n  border: 1px solid rgba(255,255,255,.22);\r\n  border-radius: 50%;\r\n  transform:\r\n    translateY(calc(-50% + var(--shift, 0px)))\r\n    rotate(-20deg);\r\n  pointer-events: none;\r\n}\r\n\r\n.bg-green .bgreen-final-orbit::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: 12%;\r\n  border: 1px solid rgba(255,255,255,.18);\r\n  border-radius: 50%;\r\n}\r\n\r\n.bg-green .bgreen-final-orbit::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  top: 14%;\r\n  left: 14%;\r\n  width: 22px;\r\n  height: 22px;\r\n  border-radius: 50%;\r\n  background: var(--green);\r\n}\r\n\r\n.bg-green .bgreen-final-grid {\r\n  display: grid;\r\n  grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr);\r\n  align-items: end;\r\n  gap: clamp(40px, 7vw, 110px);\r\n  min-height: 800px;\r\n  padding-block: 120px;\r\n}\r\n\r\n.bg-green .bgreen-final-grid > div {\r\n  min-width: 0;\r\n}\r\n\r\n.bg-green .bgreen-final-title {\r\n  margin-top: 35px;\r\n  color: #fff;\r\n  font-size: clamp(60px, 7vw, 108px);\r\n  font-weight: 900;\r\n  line-height: 1;\r\n  letter-spacing: -.025em;\r\n}\r\n\r\n.bg-green .bgreen-final-question {\r\n  color: #fff;\r\n  font-size: clamp(25px, 2.6vw, 38px);\r\n  font-weight: 700;\r\n  line-height: 1.2;\r\n  letter-spacing: -.01em;\r\n}\r\n\r\n.bg-green .bgreen-final p {\r\n  max-width: 540px;\r\n  margin-top: 24px;\r\n  color: #fff;\r\n  font-size: 18px;\r\n  font-weight: 400;\r\n  line-height: 1.65;\r\n}\r\n\r\n.bg-green a.bgreen-button,\r\n.bg-green a.bgreen-button:visited {\r\n  display: inline-block;\r\n  width: auto;\r\n  margin-top: 30px;\r\n  padding: 11px 19px;\r\n  border: 1px solid var(--green);\r\n  border-radius: 0;\r\n  background: var(--green);\r\n  color: #fff;\r\n  font-family: inherit;\r\n  font-size: 15px;\r\n  font-weight: 600;\r\n  line-height: 1.2;\r\n  letter-spacing: 0;\r\n  text-transform: uppercase;\r\n  text-decoration: none !important;\r\n  box-shadow: none;\r\n  transition:\r\n    background .25s ease,\r\n    border-color .25s ease,\r\n    color .25s ease;\r\n}\r\n\r\n.bg-green a.bgreen-button:hover {\r\n  border-color: #fff;\r\n  background: #fff;\r\n  color: #000;\r\n  text-decoration: none !important;\r\n}\r\n\r\n\/* ANIMAZIONI *\/\r\n\r\n.bg-green.has-motion .bgreen-reveal {\r\n  opacity: 0;\r\n  transform: translateY(28px);\r\n  transition:\r\n    opacity 850ms ease,\r\n    transform 1000ms cubic-bezier(.16,1,.3,1);\r\n  transition-delay: var(--delay, 0ms);\r\n}\r\n\r\n.bg-green.has-motion .bgreen-reveal.is-visible {\r\n  opacity: 1;\r\n  transform: translateY(0);\r\n}\r\n\r\n.bg-green.has-motion\r\n.bgreen-title-reveal .bgreen-title-line > span {\r\n  transform: translateY(115%);\r\n  transition: transform 1150ms cubic-bezier(.16,1,.3,1);\r\n  transition-delay: var(--delay, 0ms);\r\n}\r\n\r\n.bg-green.has-motion\r\n.bgreen-title-reveal.is-visible .bgreen-title-line > span {\r\n  transform: translateY(0);\r\n}\r\n\r\n.bg-green.has-motion .bgreen-object-reveal {\r\n  opacity: 0;\r\n  transform:\r\n    translate3d(var(--from-x, 0px), var(--from-y, 65px), 0)\r\n    rotate(var(--from-rotate, -12deg))\r\n    scale(.78);\r\n  transition:\r\n    opacity 750ms ease,\r\n    transform 1450ms cubic-bezier(.16,1,.3,1);\r\n  transition-delay: var(--delay, 0ms);\r\n}\r\n\r\n.bg-green.has-motion .bgreen-object-reveal.is-visible {\r\n  opacity: 1;\r\n  transform: translate3d(0,0,0) rotate(0deg) scale(1);\r\n}\r\n\r\n\/* TABLET *\/\r\n\r\n@media (max-width: 1024px) {\r\n  .bg-green .bgreen-intro-grid {\r\n    grid-template-columns: 1fr;\r\n    gap: 30px;\r\n  }\r\n\r\n  .bg-green .bgreen-chapter-grid {\r\n    gap: 35px;\r\n    min-height: 560px;\r\n  }\r\n\r\n  .bg-green .bgreen-visual {\r\n    min-height: 340px;\r\n  }\r\n\r\n  .bg-green .bgreen-object img {\r\n    height: 340px;\r\n  }\r\n\r\n  .bg-green .bgreen-recycle {\r\n    height: 360px;\r\n  }\r\n\r\n  .bg-green .bgreen-chapter-top {\r\n    align-items: flex-start;\r\n    gap: 15px;\r\n  }\r\n\r\n  .bg-green .bgreen-final-grid {\r\n    gap: 40px;\r\n    min-height: 720px;\r\n  }\r\n}\r\n\r\n\/* MOBILE *\/\r\n\r\n@media (max-width: 767px) {\r\n  .bg-green {\r\n    --heading-size: clamp(35px, 9vw, 58px);\r\n  }\r\n\r\n  .bg-green .bgreen-hero-grid {\r\n    grid-template-columns: minmax(0,1fr);\r\n    grid-template-rows: auto minmax(0,1fr);\r\n    align-items: start;\r\n    gap: 16px;\r\n    padding-inline: 22px;\r\n    padding-top:\r\n      calc(var(--mobile-header-space) + env(safe-area-inset-top));\r\n    padding-bottom: max(20px, env(safe-area-inset-bottom));\r\n  }\r\n\r\n  .bg-green .bgreen-hero h1 {\r\n    margin-top: 22px;\r\n  }\r\n\r\n  .bg-green .bgreen-hero-heading-first,\r\n  .bg-green .bgreen-hero-heading-second {\r\n    font-size: inherit;\r\n    line-height: inherit;\r\n  }\r\n\r\n  .bg-green .bgreen-scroll {\r\n    gap: 12px;\r\n    min-height: 36px;\r\n    margin-top: 22px;\r\n    font-size: 10px;\r\n  }\r\n\r\n  .bg-green .bgreen-scroll span {\r\n    width: 36px;\r\n    height: 36px;\r\n    font-size: 20px;\r\n  }\r\n\r\n  .bg-green .bgreen-hero-visual {\r\n    width: 100%;\r\n    height: 100%;\r\n    min-height: 0;\r\n    align-self: stretch;\r\n  }\r\n\r\n  .bg-green .bgreen-hero-art {\r\n    width: 82%;\r\n    height: 100%;\r\n    max-width: 300px;\r\n    max-height: 350px;\r\n  }\r\n\r\n  .bg-green .bgreen-hero-ring {\r\n    width: 86%;\r\n    max-height: 85%;\r\n  }\r\n\r\n  .bg-green .bgreen-hero-object .bgreen-object-reveal {\r\n    --from-y: 20px;\r\n  }\r\n\r\n  .bg-green .bgreen-intro h2 {\r\n    font-size: clamp(30px, 8.5vw, 44px);\r\n    font-weight: 900;\r\n    letter-spacing: -.02em;\r\n  }\r\n\r\n  .bg-green .bgreen-intro p {\r\n    font-size: 17px;\r\n  }\r\n\r\n  .bg-green .bgreen-chapter-grid {\r\n    grid-template-columns: minmax(0,1fr);\r\n    gap: 30px;\r\n    min-height: 0;\r\n    padding-block: 55px;\r\n  }\r\n\r\n  .bg-green .bgreen-chapter .bgreen-copy {\r\n    order: 1;\r\n  }\r\n\r\n  .bg-green .bgreen-chapter .bgreen-visual {\r\n    order: 2;\r\n  }\r\n\r\n  .bg-green .bgreen-chapter-top {\r\n    margin-bottom: 25px;\r\n  }\r\n\r\n  .bg-green .bgreen-chapter p {\r\n    margin-top: 22px;\r\n    font-size: 17px;\r\n  }\r\n\r\n  .bg-green .bgreen-visual {\r\n    min-height: 310px;\r\n  }\r\n\r\n  .bg-green .bgreen-object img {\r\n    height: 310px;\r\n  }\r\n\r\n  .bg-green .bgreen-object--car {\r\n    width: 100%;\r\n  }\r\n\r\n  .bg-green .bgreen-recycle {\r\n    height: 330px;\r\n  }\r\n\r\n  .bg-green .bgreen-final-grid {\r\n    grid-template-columns: minmax(0,1fr);\r\n    gap: 45px;\r\n    min-height: 0;\r\n    padding-block: 85px;\r\n  }\r\n\r\n  .bg-green .bgreen-final-title {\r\n    margin-top: 25px;\r\n    font-size: clamp(50px, 12vw, 76px);\r\n    letter-spacing: -.025em;\r\n  }\r\n\r\n  .bg-green .bgreen-final-question {\r\n    font-size: 29px;\r\n  }\r\n\r\n  .bg-green .bgreen-final p {\r\n    font-size: 17px;\r\n  }\r\n\r\n  .bg-green .bgreen-final-orbit {\r\n    top: 35%;\r\n    right: -55%;\r\n    width: 120%;\r\n  }\r\n\r\n  .bg-green .bgreen-final-shade {\r\n    background: rgba(10,22,8,.76);\r\n  }\r\n}\r\n\r\n\/* MOBILE CON ALTEZZA RIDOTTA *\/\r\n\r\n@media (max-width: 767px) and (max-height: 650px) {\r\n  .bg-green .bgreen-hero-grid {\r\n    gap: 10px;\r\n    padding-bottom: 14px;\r\n  }\r\n\r\n  .bg-green .bgreen-hero h1 {\r\n    margin-top: 14px;\r\n  }\r\n\r\n  .bg-green .bgreen-scroll {\r\n    margin-top: 14px;\r\n  }\r\n\r\n  .bg-green .bgreen-hero-art {\r\n    max-width: 240px;\r\n    max-height: 260px;\r\n  }\r\n}\r\n\r\n\/* SCHERMI ORIZZONTALI *\/\r\n\r\n@media (max-width: 1024px) and (max-height: 500px) {\r\n  .bg-green .bgreen-hero-grid {\r\n    grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr);\r\n    grid-template-rows: minmax(0,1fr);\r\n    align-items: center;\r\n    gap: 18px;\r\n    padding-top: calc(85px + env(safe-area-inset-top));\r\n    padding-bottom: 18px;\r\n  }\r\n\r\n  .bg-green .bgreen-hero h1 {\r\n    margin-top: 12px;\r\n  }\r\n\r\n  .bg-green .bgreen-scroll {\r\n    margin-top: 14px;\r\n    font-size: 10px;\r\n  }\r\n\r\n  .bg-green .bgreen-hero-art {\r\n    width: 90%;\r\n    height: 100%;\r\n    max-width: 280px;\r\n    max-height: 290px;\r\n  }\r\n}\r\n\r\n\/* ACCESSIBILIT\u00c0 *\/\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  .bg-green *,\r\n  .bg-green *::before,\r\n  .bg-green *::after {\r\n    animation: none !important;\r\n    transition: none !important;\r\n  }\r\n\r\n  .bg-green.has-motion .bgreen-reveal,\r\n  .bg-green.has-motion .bgreen-object-reveal,\r\n  .bg-green.has-motion\r\n  .bgreen-title-reveal .bgreen-title-line > span {\r\n    opacity: 1 !important;\r\n    transform: none !important;\r\n  }\r\n\r\n  .bg-green [data-parallax] {\r\n    --shift: 0px !important;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<div class=\"bg-green\" lang=\"it\">\r\n\r\n  <!-- PRIMA SEZIONE VERDE -->\r\n\r\n  <section class=\"bgreen-hero\" aria-labelledby=\"bgreen-main-title\">\r\n    <div class=\"bgreen-inner bgreen-hero-grid\">\r\n\r\n      <div class=\"bgreen-hero-copy\">\r\n\r\n        <span class=\"bgreen-eyebrow bgreen-reveal\">\r\n          Beyond Green\r\n        <\/span>\r\n\r\n        <h1 id=\"bgreen-main-title\"\r\n            class=\"bgreen-reveal\"\r\n            style=\"--delay:100ms\">\r\n          <span class=\"bgreen-hero-heading-first\">Perch\u00e9 siamo<\/span>\r\n          <span class=\"bgreen-hero-heading-second\">green.<\/span>\r\n        <\/h1>\r\n\r\n        <a class=\"bgreen-scroll bgreen-reveal\"\r\n           href=\"#bgreen-intro\"\r\n           style=\"--delay:250ms\">\r\n          Ecco come lo facciamo!\r\n          <span aria-hidden=\"true\">\u2193<\/span>\r\n        <\/a>\r\n\r\n      <\/div>\r\n\r\n      <div class=\"bgreen-hero-visual\">\r\n        <div class=\"bgreen-hero-art\">\r\n\r\n          <div class=\"bgreen-hero-ring\" aria-hidden=\"true\"><\/div>\r\n\r\n          <div class=\"bgreen-hero-object\" data-parallax=\"12\">\r\n            <div class=\"bgreen-object-reveal\"\r\n                 style=\"--from-rotate:12deg;--delay:150ms\">\r\n              <img\r\n                src=\"https:\/\/www.beyondgreen.it\/wp-content\/uploads\/2023\/03\/idea_green.png\"\r\n                alt=\"Lampadina verde\"\r\n                fetchpriority=\"high\"\r\n                decoding=\"async\">\r\n            <\/div>\r\n          <\/div>\r\n\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- SECONDA SEZIONE NERA -->\r\n\r\n  <section class=\"bgreen-intro\" id=\"bgreen-intro\">\r\n    <div class=\"bgreen-inner bgreen-intro-grid\">\r\n\r\n      <div class=\"bgreen-reveal\">\r\n        <span class=\"bgreen-eyebrow\">\r\n          Perch\u00e9 siamo green\r\n        <\/span>\r\n      <\/div>\r\n\r\n      <div>\r\n        <h2 class=\"bgreen-reveal\">\r\n          Essere green fa parte di ogni aspetto\r\n          del nostro lavoro, per i nostri clienti\r\n          e per noi.\r\n        <\/h2>\r\n\r\n        <p class=\"bgreen-reveal\" style=\"--delay:120ms\">\r\n          Il nostro obiettivo \u00e8 comprendere e ridurre\r\n          la nostra impronta ecologica.\r\n        <\/p>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- 01 TAZZE IN CERAMICA -->\r\n\r\n  <section class=\"bgreen-chapter bgreen-chapter--white\">\r\n    <div class=\"bgreen-inner bgreen-chapter-grid\">\r\n\r\n      <div class=\"bgreen-visual\">\r\n        <div class=\"bgreen-disc\" aria-hidden=\"true\"><\/div>\r\n        <div class=\"bgreen-shadow\" aria-hidden=\"true\"><\/div>\r\n\r\n        <div class=\"bgreen-object\" data-parallax=\"35\">\r\n          <div class=\"bgreen-object-reveal\"\r\n               style=\"--from-x:-65px;--from-rotate:-22deg\">\r\n            <img\r\n              src=\"https:\/\/www.beyondgreen.it\/wp-content\/uploads\/2023\/03\/Flying-Mug-Mockup.png\"\r\n              alt=\"Tazza in ceramica\"\r\n              loading=\"lazy\"\r\n              decoding=\"async\">\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"bgreen-copy\">\r\n\r\n        <div class=\"bgreen-chapter-top bgreen-reveal\">\r\n          <span class=\"bgreen-number\" aria-hidden=\"true\">01<\/span>\r\n          <span class=\"bgreen-eyebrow\">\r\n            Ecco come lo facciamo!\r\n          <\/span>\r\n        <\/div>\r\n\r\n        <h2 class=\"bgreen-title-reveal\">\r\n          <span class=\"bgreen-title-line\">\r\n            <span>Tazze in<\/span>\r\n          <\/span>\r\n          <span class=\"bgreen-title-line\">\r\n            <span style=\"--delay:120ms\">ceramica<\/span>\r\n          <\/span>\r\n        <\/h2>\r\n\r\n        <p class=\"bgreen-reveal\" style=\"--delay:180ms\">\r\n          In ufficio serviamo il caff\u00e8 in tazze di ceramica\r\n          e l\u2019acqua in bicchieri di vetro. Il riciclo\r\n          e il risparmio energetico fanno parte\r\n          delle nostre abitudini quotidiane.\r\n        <\/p>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- 02 ACQUISTI LOCALI -->\r\n\r\n  <section class=\"bgreen-chapter bgreen-chapter--green bgreen-chapter--reverse\">\r\n    <div class=\"bgreen-inner bgreen-chapter-grid\">\r\n\r\n      <div class=\"bgreen-visual\">\r\n        <div class=\"bgreen-disc\" aria-hidden=\"true\"><\/div>\r\n        <div class=\"bgreen-shadow\" aria-hidden=\"true\"><\/div>\r\n\r\n        <div class=\"bgreen-object bgreen-object--apple\"\r\n             data-parallax=\"40\">\r\n          <div class=\"bgreen-object-reveal\"\r\n               style=\"--from-x:55px;--from-rotate:22deg\">\r\n            <img\r\n              src=\"https:\/\/www.beyondgreen.it\/wp-content\/uploads\/2023\/03\/apple.png\"\r\n              alt=\"Mela del territorio\"\r\n              loading=\"lazy\"\r\n              decoding=\"async\">\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"bgreen-copy\">\r\n\r\n        <div class=\"bgreen-chapter-top bgreen-reveal\">\r\n          <span class=\"bgreen-number\" aria-hidden=\"true\">02<\/span>\r\n          <span class=\"bgreen-eyebrow\">\r\n            Ecco come lo facciamo!\r\n          <\/span>\r\n        <\/div>\r\n\r\n        <h2 class=\"bgreen-title-reveal\">\r\n          <span class=\"bgreen-title-line\">\r\n            <span>Acquisti<\/span>\r\n          <\/span>\r\n          <span class=\"bgreen-title-line\">\r\n            <span style=\"--delay:120ms\">locali<\/span>\r\n          <\/span>\r\n        <\/h2>\r\n\r\n        <p class=\"bgreen-reveal\" style=\"--delay:180ms\">\r\n          L\u201985% dei nostri acquisti \u00e8 locale.\r\n          Quando possibile, scegliamo aziende altoatesine\r\n          per gli acquisti della nostra agenzia,\r\n          perch\u00e9 sostenere il nostro territorio\r\n          ci sta particolarmente a cuore.\r\n        <\/p>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- 03 CARTA ECOLOGICA -->\r\n\r\n  <section class=\"bgreen-chapter bgreen-chapter--white\">\r\n    <div class=\"bgreen-inner bgreen-chapter-grid\">\r\n\r\n      <div class=\"bgreen-visual\">\r\n        <div class=\"bgreen-disc\" aria-hidden=\"true\"><\/div>\r\n        <div class=\"bgreen-shadow\" aria-hidden=\"true\"><\/div>\r\n\r\n        <div class=\"bgreen-object\" data-parallax=\"32\">\r\n          <div class=\"bgreen-object-reveal\"\r\n               style=\"--from-x:-45px;--from-rotate:-16deg\">\r\n            <img\r\n              src=\"https:\/\/www.beyondgreen.it\/wp-content\/uploads\/2023\/03\/papier.png\"\r\n              alt=\"Carta ecologica\"\r\n              loading=\"lazy\"\r\n              decoding=\"async\">\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"bgreen-copy\">\r\n\r\n        <div class=\"bgreen-chapter-top bgreen-reveal\">\r\n          <span class=\"bgreen-number\" aria-hidden=\"true\">03<\/span>\r\n          <span class=\"bgreen-eyebrow\">\r\n            Ecco come lo facciamo!\r\n          <\/span>\r\n        <\/div>\r\n\r\n        <h2 class=\"bgreen-title-reveal\">\r\n          <span class=\"bgreen-title-line\">\r\n            <span>Carta<\/span>\r\n          <\/span>\r\n          <span class=\"bgreen-title-line\">\r\n            <span style=\"--delay:120ms\">ecologica<\/span>\r\n          <\/span>\r\n        <\/h2>\r\n\r\n        <p class=\"bgreen-reveal\" style=\"--delay:180ms\">\r\n          Cerchiamo di orientare i nostri clienti\r\n          verso materiali pi\u00f9 rispettosi dell\u2019ambiente.\r\n          Quando il progetto lo consente, scegliamo\r\n          sempre alternative ecologiche per\r\n          i nostri prodotti stampati.\r\n        <\/p>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- 04 RACCOLTA DIFFERENZIATA -->\r\n\r\n  <section class=\"bgreen-chapter bgreen-chapter--dark bgreen-chapter--reverse\">\r\n    <div class=\"bgreen-inner bgreen-chapter-grid\">\r\n\r\n      <div class=\"bgreen-visual\">\r\n        <div class=\"bgreen-disc\" aria-hidden=\"true\"><\/div>\r\n\r\n        <div class=\"bgreen-recycle\" data-parallax=\"28\">\r\n\r\n          <div class=\"bgreen-recycle-item bgreen-recycle-glass\">\r\n            <div class=\"bgreen-object-reveal\"\r\n                 style=\"--from-x:-45px;--from-rotate:-20deg\">\r\n              <img\r\n                src=\"https:\/\/www.beyondgreen.it\/wp-content\/uploads\/2023\/03\/glass2.png\"\r\n                alt=\"Vetro da riciclare\"\r\n                loading=\"lazy\"\r\n                decoding=\"async\">\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"bgreen-recycle-item bgreen-recycle-paper\">\r\n            <div class=\"bgreen-object-reveal\"\r\n                 style=\"--from-rotate:18deg;--delay:180ms\">\r\n              <img\r\n                src=\"https:\/\/www.beyondgreen.it\/wp-content\/uploads\/2023\/03\/paper.png\"\r\n                alt=\"Carta da riciclare\"\r\n                loading=\"lazy\"\r\n                decoding=\"async\">\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"bgreen-recycle-item bgreen-recycle-can\">\r\n            <div class=\"bgreen-object-reveal\"\r\n                 style=\"--from-x:45px;--from-rotate:25deg;--delay:360ms\">\r\n              <img\r\n                src=\"https:\/\/www.beyondgreen.it\/wp-content\/uploads\/2023\/03\/can2.png\"\r\n                alt=\"Lattina da riciclare\"\r\n                loading=\"lazy\"\r\n                decoding=\"async\">\r\n            <\/div>\r\n          <\/div>\r\n\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"bgreen-copy\">\r\n\r\n        <div class=\"bgreen-chapter-top bgreen-reveal\">\r\n          <span class=\"bgreen-number\" aria-hidden=\"true\">04<\/span>\r\n          <span class=\"bgreen-eyebrow\">\r\n            Ecco come lo facciamo!\r\n          <\/span>\r\n        <\/div>\r\n\r\n        <h2 class=\"bgreen-title-reveal\">\r\n          <span class=\"bgreen-title-line\">\r\n            <span>Raccolta<\/span>\r\n          <\/span>\r\n          <span class=\"bgreen-title-line\">\r\n            <span style=\"--delay:120ms\">differenziata<\/span>\r\n          <\/span>\r\n        <\/h2>\r\n\r\n        <p class=\"bgreen-reveal\" style=\"--delay:180ms\">\r\n          Incoraggiamo tutti i nostri collaboratori\r\n          a utilizzare la raccolta differenziata\r\n          che abbiamo organizzato nel nostro magazzino.\r\n        <\/p>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- 05 RICARICA ELETTRICA -->\r\n\r\n  <section class=\"bgreen-chapter bgreen-chapter--white\">\r\n    <div class=\"bgreen-inner bgreen-chapter-grid\">\r\n\r\n      <div class=\"bgreen-visual\">\r\n        <div class=\"bgreen-disc\" aria-hidden=\"true\"><\/div>\r\n        <div class=\"bgreen-shadow\" aria-hidden=\"true\"><\/div>\r\n\r\n        <div class=\"bgreen-object bgreen-object--car\"\r\n             data-parallax=\"25\">\r\n          <div class=\"bgreen-object-reveal\"\r\n               style=\"--from-x:-110px;--from-rotate:-5deg\">\r\n            <img\r\n              src=\"https:\/\/www.beyondgreen.it\/wp-content\/uploads\/2023\/03\/elektroauto.png\"\r\n              alt=\"Auto elettrica\"\r\n              loading=\"lazy\"\r\n              decoding=\"async\">\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"bgreen-copy\">\r\n\r\n        <div class=\"bgreen-chapter-top bgreen-reveal\">\r\n          <span class=\"bgreen-number\" aria-hidden=\"true\">05<\/span>\r\n          <span class=\"bgreen-eyebrow\">\r\n            Ecco come lo facciamo!\r\n          <\/span>\r\n        <\/div>\r\n\r\n        <h2 class=\"bgreen-title-reveal\">\r\n          <span class=\"bgreen-title-line\">\r\n            <span>Ricarica<\/span>\r\n          <\/span>\r\n          <span class=\"bgreen-title-line\">\r\n            <span style=\"--delay:120ms\">elettrica<\/span>\r\n          <\/span>\r\n        <\/h2>\r\n\r\n        <p class=\"bgreen-reveal\" style=\"--delay:180ms\">\r\n          Offriamo ai nostri collaboratori la possibilit\u00e0\r\n          di ricaricare i propri veicoli elettrici\r\n          nel garage aziendale, promuovendo cos\u00ec\r\n          una mobilit\u00e0 pi\u00f9 rispettosa dell\u2019ambiente.\r\n        <\/p>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- SEZIONE FINALE -->\r\n\r\n  <section class=\"bgreen-final\">\r\n\r\n    <div class=\"bgreen-final-background\"\r\n         data-parallax=\"30\"\r\n         aria-hidden=\"true\">\r\n      <img\r\n        src=\"https:\/\/www.beyondgreen.it\/wp-content\/uploads\/2023\/03\/green_dna.jpg\"\r\n        alt=\"\"\r\n        loading=\"lazy\"\r\n        decoding=\"async\">\r\n    <\/div>\r\n\r\n    <div class=\"bgreen-final-shade\" aria-hidden=\"true\"><\/div>\r\n\r\n    <div class=\"bgreen-final-orbit\"\r\n         data-parallax=\"55\"\r\n         aria-hidden=\"true\"><\/div>\r\n\r\n    <div class=\"bgreen-inner bgreen-final-grid\">\r\n\r\n      <div>\r\n        <span class=\"bgreen-eyebrow bgreen-reveal\">\r\n          Beyond Green\r\n        <\/span>\r\n\r\n        <h2 class=\"bgreen-final-title bgreen-title-reveal\">\r\n          <span class=\"bgreen-title-line\">\r\n            <span>Green \u00e8<\/span>\r\n          <\/span>\r\n          <span class=\"bgreen-title-line\">\r\n            <span style=\"--delay:120ms\">nel nostro<\/span>\r\n          <\/span>\r\n          <span class=\"bgreen-title-line\">\r\n            <span style=\"--delay:240ms\">DNA.<\/span>\r\n          <\/span>\r\n        <\/h2>\r\n      <\/div>\r\n\r\n      <div>\r\n        <h2 class=\"bgreen-final-question bgreen-reveal\">\r\n          Ti riconosci in questi valori?\r\n        <\/h2>\r\n\r\n        <p class=\"bgreen-reveal\" style=\"--delay:100ms\">\r\n          La tua azienda si impegna per la sostenibilit\u00e0\r\n          e contribuisce concretamente alla tutela\r\n          dell\u2019ambiente, ma non riesce a comunicarlo\r\n          all\u2019esterno in modo chiaro ed efficace?\r\n          Allora sei nel posto giusto.\r\n        <\/p>\r\n\r\n        <p class=\"bgreen-reveal\" style=\"--delay:200ms\">\r\n          Ti affianchiamo nella comunicazione e ti aiutiamo\r\n          a rendere la tua azienda il pi\u00f9 sostenibile possibile.\r\n        <\/p>\r\n\r\n        <div class=\"bgreen-reveal\" style=\"--delay:300ms\">\r\n          <a class=\"bgreen-button\"\r\n             href=\"https:\/\/beyondgreen.it\/kontakt\/\">\r\n            Contattaci!\r\n          <\/a>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/section>\r\n\r\n<\/div>\r\n\r\n<script>\r\n(function () {\r\n  \"use strict\";\r\n\r\n  const script = document.currentScript;\r\n  const root = script && script.previousElementSibling;\r\n\r\n  if (\r\n    !root ||\r\n    !root.matches(\".bg-green\") ||\r\n    root.dataset.initialized\r\n  ) return;\r\n\r\n  root.dataset.initialized = \"true\";\r\n\r\n  const reducedMotion = window.matchMedia(\r\n    \"(prefers-reduced-motion: reduce)\"\r\n  );\r\n\r\n  const mobile = window.matchMedia(\"(max-width: 767px)\");\r\n\r\n  const reveals = root.querySelectorAll(\r\n    \".bgreen-reveal, .bgreen-title-reveal, .bgreen-object-reveal\"\r\n  );\r\n\r\n  const parallaxItems = Array.from(\r\n    root.querySelectorAll(\"[data-parallax]\")\r\n  );\r\n\r\n  const hero = root.querySelector(\".bgreen-hero\");\r\n  const scrollLink = root.querySelector(\".bgreen-scroll\");\r\n  const intro = root.querySelector(\".bgreen-intro\");\r\n\r\n  let observer = null;\r\n  let sizeObserver = null;\r\n  let frame = null;\r\n  let destroyed = false;\r\n\r\n  \/*\r\n   * La dimensione dei titoli \u00e8 gestita solo dal CSS.\r\n   * Nessuno script ingrandisce \u201cgreen.\u201d o riduce il titolo.\r\n   *\/\r\n\r\n  if (\r\n    !reducedMotion.matches &&\r\n    \"IntersectionObserver\" in window\r\n  ) {\r\n    observer = new IntersectionObserver(function (entries) {\r\n      entries.forEach(function (entry) {\r\n        if (entry.isIntersecting) {\r\n          entry.target.classList.add(\"is-visible\");\r\n          observer.unobserve(entry.target);\r\n        }\r\n      });\r\n    }, {\r\n      threshold: 0.08\r\n    });\r\n\r\n    root.classList.add(\"has-motion\");\r\n\r\n    reveals.forEach(function (element) {\r\n      observer.observe(element);\r\n    });\r\n  }\r\n\r\n  \/* Movimento leggero delle immagini durante lo scroll *\/\r\n\r\n  function updateParallax() {\r\n    frame = null;\r\n\r\n    if (destroyed) return;\r\n\r\n    if (!root.isConnected) {\r\n      destroy();\r\n      return;\r\n    }\r\n\r\n    const viewportHeight = window.innerHeight;\r\n\r\n    const updates = parallaxItems.map(function (element) {\r\n      const section = element.closest(\"section\");\r\n\r\n      if (\r\n        reducedMotion.matches ||\r\n        (mobile.matches && section === hero)\r\n      ) {\r\n        return {\r\n          element: element,\r\n          shift: 0\r\n        };\r\n      }\r\n\r\n      const rect = section.getBoundingClientRect();\r\n\r\n      if (rect.bottom < 0 || rect.top > viewportHeight) {\r\n        return null;\r\n      }\r\n\r\n      const center = rect.top + rect.height \/ 2;\r\n\r\n      const progress = Math.max(\r\n        -1,\r\n        Math.min(\r\n          1,\r\n          (viewportHeight \/ 2 - center) \/\r\n          ((viewportHeight + rect.height) \/ 2)\r\n        )\r\n      );\r\n\r\n      const strength =\r\n        Number(element.dataset.parallax || 0) *\r\n        (mobile.matches ? 0.4 : 1);\r\n\r\n      return {\r\n        element: element,\r\n        shift: progress * strength\r\n      };\r\n    });\r\n\r\n    updates.forEach(function (update) {\r\n      if (!update) return;\r\n\r\n      update.element.style.setProperty(\r\n        \"--shift\",\r\n        update.shift.toFixed(2) + \"px\"\r\n      );\r\n    });\r\n  }\r\n\r\n  function scheduleParallax() {\r\n    if (destroyed || frame !== null) return;\r\n    frame = window.requestAnimationFrame(updateParallax);\r\n  }\r\n\r\n  function onMotionChange() {\r\n    if (reducedMotion.matches) {\r\n      root.classList.remove(\"has-motion\");\r\n\r\n      if (observer) observer.disconnect();\r\n\r\n      reveals.forEach(function (element) {\r\n        element.classList.add(\"is-visible\");\r\n      });\r\n    }\r\n\r\n    scheduleParallax();\r\n  }\r\n\r\n  function onScrollLink(event) {\r\n    event.preventDefault();\r\n\r\n    intro.scrollIntoView({\r\n      behavior: reducedMotion.matches ? \"auto\" : \"smooth\",\r\n      block: \"start\"\r\n    });\r\n  }\r\n\r\n  function destroy() {\r\n    if (destroyed) return;\r\n    destroyed = true;\r\n\r\n    if (frame !== null) {\r\n      window.cancelAnimationFrame(frame);\r\n    }\r\n\r\n    if (observer) observer.disconnect();\r\n    if (sizeObserver) sizeObserver.disconnect();\r\n\r\n    window.removeEventListener(\"scroll\", scheduleParallax);\r\n    window.removeEventListener(\"resize\", scheduleParallax);\r\n\r\n    reducedMotion.removeEventListener(\"change\", onMotionChange);\r\n\r\n    if (scrollLink) {\r\n      scrollLink.removeEventListener(\"click\", onScrollLink);\r\n    }\r\n  }\r\n\r\n  if (scrollLink && intro) {\r\n    scrollLink.addEventListener(\"click\", onScrollLink);\r\n  }\r\n\r\n  if (\"ResizeObserver\" in window) {\r\n    sizeObserver = new ResizeObserver(scheduleParallax);\r\n    sizeObserver.observe(root);\r\n  }\r\n\r\n  window.addEventListener(\"scroll\", scheduleParallax, {\r\n    passive: true\r\n  });\r\n\r\n  window.addEventListener(\"resize\", scheduleParallax);\r\n\r\n  reducedMotion.addEventListener(\"change\", onMotionChange);\r\n\r\n  root.querySelectorAll(\"img\").forEach(function (img) {\r\n    if (!img.complete) {\r\n      img.addEventListener(\"load\", scheduleParallax, {\r\n        once: true\r\n      });\r\n    }\r\n  });\r\n\r\n  scheduleParallax();\r\n})();\r\n<\/script>\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","protected":false},"excerpt":{"rendered":"<p>Beyond Green Perch\u00e9 siamo green. Ecco come lo facciamo! \u2193 Perch\u00e9 siamo green Essere green fa parte di ogni aspetto del nostro lavoro, per i nostri clienti e per noi. Il nostro obiettivo \u00e8 comprendere e ridurre la nostra impronta ecologica. 01 Ecco come lo facciamo! Tazze in ceramica In ufficio serviamo il caff\u00e8 in [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-39338","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.2 (Yoast SEO v27.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Green - Beyondgreen<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/beyondgreen.it\/it\/green\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Green\" \/>\n<meta property=\"og:description\" content=\"Beyond Green Perch\u00e9 siamo green. Ecco come lo facciamo! \u2193 Perch\u00e9 siamo green Essere green fa parte di ogni aspetto del nostro lavoro, per i nostri clienti e per noi. Il nostro obiettivo \u00e8 comprendere e ridurre la nostra impronta ecologica. 01 Ecco come lo facciamo! Tazze in ceramica In ufficio serviamo il caff\u00e8 in [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/beyondgreen.it\/it\/green\/\" \/>\n<meta property=\"og:site_name\" content=\"Beyondgreen\" \/>\n<meta property=\"article:modified_time\" content=\"2026-11-05T15:19:57+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/beyondgreen.it\/it\/green\/\",\"url\":\"https:\/\/beyondgreen.it\/it\/green\/\",\"name\":\"Green - Beyondgreen\",\"isPartOf\":{\"@id\":\"https:\/\/beyondgreen.it\/it\/#website\"},\"datePublished\":\"2024-09-27T08:55:17+00:00\",\"dateModified\":\"2026-11-05T15:19:57+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/beyondgreen.it\/it\/green\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/beyondgreen.it\/it\/green\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/beyondgreen.it\/it\/green\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/beyondgreen.it\/it\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Green\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/beyondgreen.it\/it\/#website\",\"url\":\"https:\/\/beyondgreen.it\/it\/\",\"name\":\"Beyondgreen\",\"description\":\"Creative Agency\",\"publisher\":{\"@id\":\"https:\/\/beyondgreen.it\/it\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/beyondgreen.it\/it\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/beyondgreen.it\/it\/#organization\",\"name\":\"Beyondgreen\",\"url\":\"https:\/\/beyondgreen.it\/it\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/beyondgreen.it\/it\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/beyondgreen.it\/wp-content\/uploads\/2024\/09\/BG_LOGO_Refresh_2024_LOGO_2024_long.svg\",\"contentUrl\":\"https:\/\/beyondgreen.it\/wp-content\/uploads\/2024\/09\/BG_LOGO_Refresh_2024_LOGO_2024_long.svg\",\"caption\":\"Beyondgreen\"},\"image\":{\"@id\":\"https:\/\/beyondgreen.it\/it\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Green - Beyondgreen","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/beyondgreen.it\/it\/green\/","og_locale":"it_IT","og_type":"article","og_title":"Green","og_description":"Beyond Green Perch\u00e9 siamo green. Ecco come lo facciamo! \u2193 Perch\u00e9 siamo green Essere green fa parte di ogni aspetto del nostro lavoro, per i nostri clienti e per noi. Il nostro obiettivo \u00e8 comprendere e ridurre la nostra impronta ecologica. 01 Ecco come lo facciamo! Tazze in ceramica In ufficio serviamo il caff\u00e8 in [&hellip;]","og_url":"https:\/\/beyondgreen.it\/it\/green\/","og_site_name":"Beyondgreen","article_modified_time":"2026-11-05T15:19:57+00:00","twitter_card":"summary_large_image","twitter_misc":{"Tempo di lettura stimato":"4 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/beyondgreen.it\/it\/green\/","url":"https:\/\/beyondgreen.it\/it\/green\/","name":"Green - Beyondgreen","isPartOf":{"@id":"https:\/\/beyondgreen.it\/it\/#website"},"datePublished":"2024-09-27T08:55:17+00:00","dateModified":"2026-11-05T15:19:57+00:00","breadcrumb":{"@id":"https:\/\/beyondgreen.it\/it\/green\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/beyondgreen.it\/it\/green\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/beyondgreen.it\/it\/green\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/beyondgreen.it\/it\/"},{"@type":"ListItem","position":2,"name":"Green"}]},{"@type":"WebSite","@id":"https:\/\/beyondgreen.it\/it\/#website","url":"https:\/\/beyondgreen.it\/it\/","name":"Beyondgreen","description":"Creative Agency","publisher":{"@id":"https:\/\/beyondgreen.it\/it\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/beyondgreen.it\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/beyondgreen.it\/it\/#organization","name":"Beyondgreen","url":"https:\/\/beyondgreen.it\/it\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/beyondgreen.it\/it\/#\/schema\/logo\/image\/","url":"https:\/\/beyondgreen.it\/wp-content\/uploads\/2024\/09\/BG_LOGO_Refresh_2024_LOGO_2024_long.svg","contentUrl":"https:\/\/beyondgreen.it\/wp-content\/uploads\/2024\/09\/BG_LOGO_Refresh_2024_LOGO_2024_long.svg","caption":"Beyondgreen"},"image":{"@id":"https:\/\/beyondgreen.it\/it\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/beyondgreen.it\/it\/wp-json\/wp\/v2\/pages\/39338","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/beyondgreen.it\/it\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/beyondgreen.it\/it\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/beyondgreen.it\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/beyondgreen.it\/it\/wp-json\/wp\/v2\/comments?post=39338"}],"version-history":[{"count":15,"href":"https:\/\/beyondgreen.it\/it\/wp-json\/wp\/v2\/pages\/39338\/revisions"}],"predecessor-version":[{"id":43321,"href":"https:\/\/beyondgreen.it\/it\/wp-json\/wp\/v2\/pages\/39338\/revisions\/43321"}],"wp:attachment":[{"href":"https:\/\/beyondgreen.it\/it\/wp-json\/wp\/v2\/media?parent=39338"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}