{"id":454,"date":"2026-09-29T09:12:11","date_gmt":"2026-09-29T09:12:11","guid":{"rendered":"https:\/\/farizon.com.sg\/new\/?page_id=454"},"modified":"2026-10-01T07:55:14","modified_gmt":"2026-10-01T07:55:14","slug":"h5e","status":"publish","type":"page","link":"https:\/\/farizon.com.sg\/?page_id=454","title":{"rendered":"H5E"},"content":{"rendered":"\n<div class=\"wp-block-columns alignfull is-layout-flex wp-container-core-columns-is-layout-995f960e wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<style>\n\/* =========================================================\n   FARIZON H5E\n   SECTION 01 \u2014 PREMIUM ANIMATED OPENING\n========================================================= *\/\n\n.h5e-hero,\n.h5e-hero *,\n.h5e-hero *::before,\n.h5e-hero *::after {\n  box-sizing: border-box;\n}\n\n.h5e-hero {\n  --orange: #ff6433;\n  --orange-hover: #e95428;\n\n  --navy: #263648;\n  --navy-soft: #34465b;\n\n  --text: #5d6672;\n  --muted: #89939e;\n\n  --line: #e5e8ec;\n  --white: #ffffff;\n\n  --h5e-x: 0px;\n  --h5e-y: 0px;\n\n  position: relative;\n\n  width: 100vw;\n  max-width: none;\n\n  margin:\n    0\n    0\n    0\n    calc(50% - 50vw) !important;\n\n  overflow: hidden;\n\n  background:\n    radial-gradient(\n      circle at 85% 18%,\n      rgba(255,100,51,.075),\n      transparent 27%\n    ),\n    linear-gradient(\n      135deg,\n      #f7f8f9 0%,\n      #ffffff 55%,\n      #eef1f4 100%\n    );\n\n  font-family:\n    Inter,\n    Arial,\n    sans-serif;\n\n  isolation: isolate;\n}\n\n\n\/* =========================================================\n   BACKGROUND DECORATION\n========================================================= *\/\n\n.h5e-hero::before {\n  content: \"\";\n\n  position: absolute;\n\n  width: 650px;\n  height: 650px;\n\n  right: -295px;\n  top: -300px;\n\n  border-radius: 50%;\n\n  border:\n    1px solid\n    rgba(38,54,72,.055);\n\n  box-shadow:\n    0 0 0 82px rgba(38,54,72,.018),\n    0 0 0 164px rgba(38,54,72,.012);\n\n  pointer-events: none;\n}\n\n\n.h5e-hero::after {\n  content: \"\";\n\n  position: absolute;\n\n  width: 450px;\n  height: 450px;\n\n  left: -260px;\n  bottom: -275px;\n\n  border-radius: 50%;\n\n  background:\n    radial-gradient(\n      circle,\n      rgba(255,100,51,.10),\n      transparent 68%\n    );\n\n  pointer-events: none;\n}\n\n\n\/* =========================================================\n   INNER\n========================================================= *\/\n\n.h5e-hero__inner {\n  position: relative;\n\n  z-index: 2;\n\n  width: 100%;\n  max-width: 1280px;\n\n  min-height: 710px;\n\n  margin: 0 auto;\n\n  padding:\n    68px\n    40px\n    54px;\n\n  display: grid;\n\n  grid-template-columns:\n    minmax(0,.92fr)\n    minmax(0,1.08fr);\n\n  gap: 54px;\n\n  align-items: center;\n}\n\n\n\/* =========================================================\n   COPY\n========================================================= *\/\n\n.h5e-hero__content {\n  position: relative;\n\n  z-index: 6;\n}\n\n\n\/* =========================================================\n   EYEBROW\n========================================================= *\/\n\n.h5e-hero__eyebrow {\n  display: flex;\n\n  align-items: center;\n\n  gap: 11px;\n\n  margin-bottom: 16px;\n\n  color:\n    var(--orange);\n\n  font-size: 10px;\n  font-weight: 700;\n\n  letter-spacing: 1.5px;\n\n  text-transform: uppercase;\n\n  animation:\n    h5eFadeUp\n    .68s\n    cubic-bezier(.2,.7,.3,1)\n    .08s\n    both;\n}\n\n\n.h5e-hero__eyebrow::before {\n  content: \"\";\n\n  width: 31px;\n  height: 2px;\n\n  flex: 0 0 auto;\n\n  background:\n    var(--orange);\n\n  transform-origin:\n    left center;\n\n  animation:\n    h5eLineIn\n    .75s\n    cubic-bezier(.2,.7,.3,1)\n    both;\n}\n\n\n\/* =========================================================\n   TITLE\n========================================================= *\/\n\n.h5e-hero h1 {\n  max-width: 650px;\n\n  margin:\n    0\n    0\n    18px;\n\n  color:\n    var(--navy);\n\n  font-size:\n    clamp(\n      43px,\n      4.6vw,\n      63px\n    );\n\n  font-weight: 700;\n\n  line-height: 1.01;\n\n  letter-spacing: -1.5px;\n}\n\n\n.h5e-hero__title-main,\n.h5e-hero__title-sub {\n  display: block;\n}\n\n\n.h5e-hero__title-main {\n  animation:\n    h5eTitleIn\n    .82s\n    cubic-bezier(.2,.72,.3,1)\n    .18s\n    both;\n}\n\n\n.h5e-hero__title-sub {\n  margin-top: 8px;\n\n  color:\n    var(--orange);\n\n  font-size: .72em;\n\n  line-height: 1.08;\n\n  letter-spacing: -1px;\n\n  animation:\n    h5eTitleIn\n    .82s\n    cubic-bezier(.2,.72,.3,1)\n    .32s\n    both;\n}\n\n\n\/* =========================================================\n   DESCRIPTION\n========================================================= *\/\n\n.h5e-hero__description {\n  max-width: 585px;\n\n  margin:\n    0\n    0\n    21px;\n\n  color:\n    var(--text);\n\n  font-size: 14px;\n\n  line-height: 1.7;\n\n  animation:\n    h5eFadeUp\n    .7s\n    cubic-bezier(.2,.7,.3,1)\n    .45s\n    both;\n}\n\n\n\/* =========================================================\n   USE TAGS\n========================================================= *\/\n\n.h5e-hero__uses {\n  display: flex;\n\n  flex-wrap: wrap;\n\n  gap: 7px;\n\n  margin-bottom: 27px;\n\n  animation:\n    h5eFadeUp\n    .7s\n    cubic-bezier(.2,.7,.3,1)\n    .55s\n    both;\n}\n\n\n.h5e-hero__uses span {\n  padding:\n    7px\n    10px;\n\n  border:\n    1px solid\n    var(--line);\n\n  background:\n    rgba(255,255,255,.72);\n\n  color:\n    var(--navy);\n\n  font-size: 8px;\n  font-weight: 700;\n\n  letter-spacing: .3px;\n\n  text-transform: uppercase;\n}\n\n\n\/* =========================================================\n   BUTTONS\n========================================================= *\/\n\n.h5e-hero__actions {\n  display: flex;\n\n  flex-wrap: wrap;\n\n  gap: 10px;\n\n  animation:\n    h5eFadeUp\n    .7s\n    cubic-bezier(.2,.7,.3,1)\n    .65s\n    both;\n}\n\n\n.h5e-hero__btn {\n  position: relative;\n\n  min-height: 48px;\n\n  padding:\n    0\n    20px;\n\n  display: inline-flex;\n\n  align-items: center;\n  justify-content: center;\n\n  gap: 9px;\n\n  overflow: hidden;\n\n  border-radius: 999px;\n\n  text-decoration: none;\n\n  font-size: 12px;\n  font-weight: 700;\n\n  transition:\n    transform .25s ease,\n    background .25s ease,\n    color .25s ease,\n    box-shadow .25s ease;\n}\n\n\n.h5e-hero__btn::before {\n  content: \"\";\n\n  position: absolute;\n\n  top: -55%;\n  left: -80%;\n\n  width: 45%;\n  height: 210%;\n\n  transform:\n    rotate(20deg);\n\n  pointer-events: none;\n\n  background:\n    linear-gradient(\n      90deg,\n      transparent,\n      rgba(255,255,255,.30),\n      transparent\n    );\n\n  transition:\n    left .55s ease;\n}\n\n\n.h5e-hero__btn:hover::before {\n  left: 140%;\n}\n\n\n.h5e-hero__btn--primary {\n  color: #ffffff;\n\n  background:\n    var(--orange);\n\n  box-shadow:\n    0 12px 26px\n    rgba(255,100,51,.22);\n}\n\n\n.h5e-hero__btn--primary:hover {\n  color: #ffffff;\n\n  background:\n    var(--orange-hover);\n\n  transform:\n    translateY(-2px);\n\n  box-shadow:\n    0 17px 32px\n    rgba(255,100,51,.27);\n}\n\n\n.h5e-hero__btn--secondary {\n  color:\n    var(--navy);\n\n  background:\n    #ffffff;\n\n  border:\n    1px solid\n    var(--line);\n\n  box-shadow:\n    0 8px 20px\n    rgba(38,54,72,.05);\n}\n\n\n.h5e-hero__btn--secondary:hover {\n  color:\n    var(--navy);\n\n  transform:\n    translateY(-2px);\n\n  box-shadow:\n    0 14px 27px\n    rgba(38,54,72,.09);\n}\n\n\n.h5e-hero__btn-icon {\n  display: inline-flex;\n\n  transition:\n    transform .25s ease;\n}\n\n\n.h5e-hero__btn:hover\n.h5e-hero__btn-icon {\n  transform:\n    translateX(3px);\n}\n\n\n\/* =========================================================\n   VISUAL\n========================================================= *\/\n\n.h5e-hero__visual {\n  position: relative;\n\n  min-width: 0;\n\n  height: 500px;\n\n  display: flex;\n\n  align-items: center;\n  justify-content: center;\n\n  transform:\n    translate3d(\n      var(--h5e-x),\n      var(--h5e-y),\n      0\n    );\n\n  transition:\n    transform .75s\n    cubic-bezier(.2,.65,.3,1);\n\n  animation:\n    h5eVisualEntrance\n    .95s\n    cubic-bezier(.2,.7,.3,1)\n    .22s\n    both;\n}\n\n\n\/* =========================================================\n   TECH FRAME\n========================================================= *\/\n\n.h5e-hero__visual-frame {\n  position: absolute;\n\n  inset:\n    25px\n    0\n    27px;\n\n  overflow: hidden;\n\n  border-radius: 30px;\n\n  background:\n    radial-gradient(\n      circle at 55% 45%,\n      #ffffff 0%,\n      #f3f5f7 57%,\n      #e9edf1 100%\n    );\n\n  border:\n    1px solid\n    rgba(38,54,72,.07);\n\n  box-shadow:\n    0 22px 50px\n    rgba(38,54,72,.08);\n}\n\n\n\/* technical grid *\/\n\n.h5e-hero__visual-frame::before {\n  content: \"\";\n\n  position: absolute;\n\n  inset: 0;\n\n  opacity: .50;\n\n  pointer-events: none;\n\n  background-image:\n    linear-gradient(\n      rgba(38,54,72,.035) 1px,\n      transparent 1px\n    ),\n    linear-gradient(\n      90deg,\n      rgba(38,54,72,.035) 1px,\n      transparent 1px\n    );\n\n  background-size:\n    44px\n    44px;\n\n  mask-image:\n    radial-gradient(\n      circle at center,\n      #000 20%,\n      transparent 76%\n    );\n}\n\n\n\/* orange glow *\/\n\n.h5e-hero__visual-frame::after {\n  content: \"\";\n\n  position: absolute;\n\n  width: 390px;\n  height: 390px;\n\n  left: 50%;\n  bottom: -230px;\n\n  transform:\n    translateX(-50%);\n\n  border-radius: 50%;\n\n  background:\n    radial-gradient(\n      circle,\n      rgba(255,100,51,.17),\n      transparent 68%\n    );\n\n  animation:\n    h5eGlow\n    4.6s\n    ease-in-out\n    infinite;\n}\n\n\n\/* =========================================================\n   TECH ORBITS\n========================================================= *\/\n\n.h5e-hero__orbit {\n  position: absolute;\n\n  z-index: 2;\n\n  left: 50%;\n  top: 50%;\n\n  width: 390px;\n  height: 390px;\n\n  transform:\n    translate(-50%,-50%);\n\n  border-radius: 50%;\n\n  border:\n    1px solid\n    rgba(38,54,72,.08);\n\n  pointer-events: none;\n\n  animation:\n    h5eOrbitPulse\n    4s\n    ease-in-out\n    infinite;\n}\n\n\n.h5e-hero__orbit::before {\n  content: \"\";\n\n  position: absolute;\n\n  inset: 58px;\n\n  border-radius: 50%;\n\n  border:\n    1px dashed\n    rgba(255,100,51,.22);\n\n  animation:\n    h5eRotate\n    20s\n    linear\n    infinite;\n}\n\n\n.h5e-hero__orbit::after {\n  content: \"\";\n\n  position: absolute;\n\n  inset: 116px;\n\n  border-radius: 50%;\n\n  border:\n    1px solid\n    rgba(38,54,72,.07);\n}\n\n\n\/* =========================================================\n   IMAGE\n========================================================= *\/\n\n.h5e-hero__image {\n  position: relative;\n\n  z-index: 4;\n\n  width:\n    min(\n      91%,\n      690px\n    );\n\n  height:\n    420px;\n\n  overflow: hidden;\n\n  border-radius: 24px;\n\n  box-shadow:\n    0 22px 35px\n    rgba(28,43,57,.14);\n\n  animation:\n    h5eTruckFloat\n    5.5s\n    ease-in-out\n    1.2s\n    infinite;\n}\n\n\n.h5e-hero__image img {\n  display: block;\n\n  width: 100%;\n  height: 100%;\n\n  object-fit: cover;\n\n  object-position:\n    center center;\n\n  transform:\n    scale(1.012);\n\n  transition:\n    transform .9s\n    cubic-bezier(.2,.7,.3,1);\n}\n\n\n.h5e-hero__visual:hover\n.h5e-hero__image img {\n  transform:\n    scale(1.03);\n}\n\n\n.h5e-hero__image::after {\n  content: \"\";\n\n  position: absolute;\n\n  inset: 0;\n\n  pointer-events: none;\n\n  background:\n    linear-gradient(\n      180deg,\n      transparent 56%,\n      rgba(18,31,43,.22) 100%\n    );\n}\n\n\n\/* =========================================================\n   SCAN RAIL\n========================================================= *\/\n\n.h5e-hero__scan {\n  position: absolute;\n\n  z-index: 7;\n\n  left: 10%;\n  right: 10%;\n  bottom: 42px;\n\n  height: 2px;\n\n  overflow: hidden;\n\n  background:\n    rgba(38,54,72,.10);\n}\n\n\n.h5e-hero__scan::before {\n  content: \"\";\n\n  position: absolute;\n\n  left: -110px;\n\n  width: 110px;\n  height: 100%;\n\n  background:\n    linear-gradient(\n      90deg,\n      transparent,\n      var(--orange),\n      transparent\n    );\n\n  animation:\n    h5eScan\n    2.7s\n    linear\n    infinite;\n}\n\n\n\/* =========================================================\n   TELEMETRY DOTS\n========================================================= *\/\n\n.h5e-hero__node {\n  position: absolute;\n\n  z-index: 8;\n\n  width: 8px;\n  height: 8px;\n\n  border-radius: 50%;\n\n  background:\n    var(--orange);\n\n  box-shadow:\n    0 0 0 8px\n    rgba(255,100,51,.10);\n\n  animation:\n    h5eNodePulse\n    2.3s\n    ease-in-out\n    infinite;\n}\n\n\n.h5e-hero__node--1 {\n  left: 10%;\n  top: 32%;\n}\n\n\n.h5e-hero__node--2 {\n  right: 8%;\n  top: 44%;\n\n  animation-delay: .7s;\n}\n\n\n.h5e-hero__node--3 {\n  right: 19%;\n  bottom: 18%;\n\n  animation-delay: 1.2s;\n}\n\n\n\/* =========================================================\n   LABEL\n========================================================= *\/\n\n.h5e-hero__visual-label {\n  position: absolute;\n\n  z-index: 9;\n\n  top: 52px;\n  left: 24px;\n\n  padding:\n    11px\n    13px;\n\n  background:\n    rgba(38,54,72,.92);\n\n  backdrop-filter:\n    blur(8px);\n\n  -webkit-backdrop-filter:\n    blur(8px);\n}\n\n\n.h5e-hero__visual-label span {\n  display: block;\n\n  margin-bottom: 3px;\n\n  color:\n    var(--orange);\n\n  font-size: 7px;\n  font-weight: 700;\n\n  letter-spacing: 1px;\n\n  text-transform: uppercase;\n}\n\n\n.h5e-hero__visual-label strong {\n  color:\n    #ffffff;\n\n  font-size: 11px;\n  font-weight: 650;\n}\n\n\n\/* =========================================================\n   STATUS\n========================================================= *\/\n\n.h5e-hero__visual-status {\n  position: absolute;\n\n  z-index: 9;\n\n  right: 24px;\n  bottom: 53px;\n\n  padding:\n    9px\n    11px;\n\n  border:\n    1px solid\n    rgba(255,255,255,.25);\n\n  background:\n    rgba(20,33,45,.78);\n\n  color:\n    #ffffff;\n\n  backdrop-filter:\n    blur(8px);\n\n  -webkit-backdrop-filter:\n    blur(8px);\n\n  font-size: 8px;\n  font-weight: 650;\n}\n\n\n\/* =========================================================\n   STATS\n========================================================= *\/\n\n.h5e-hero__stats {\n  grid-column:\n    1 \/ -1;\n\n  display: grid;\n\n  grid-template-columns:\n    repeat(4,1fr);\n\n  margin-top: -8px;\n\n  border:\n    1px solid\n    var(--line);\n\n  background:\n    rgba(255,255,255,.94);\n\n  box-shadow:\n    0 15px 35px\n    rgba(38,54,72,.055);\n\n  animation:\n    h5eStatsEntrance\n    .75s\n    ease\n    .72s\n    both;\n}\n\n\n.h5e-hero__stat {\n  position: relative;\n\n  min-height: 89px;\n\n  padding:\n    18px\n    22px;\n\n  display: flex;\n\n  flex-direction: column;\n\n  justify-content: center;\n\n  overflow: hidden;\n\n  border-right:\n    1px solid\n    var(--line);\n}\n\n\n.h5e-hero__stat:last-child {\n  border-right: 0;\n}\n\n\n.h5e-hero__stat::before {\n  content: \"\";\n\n  position: absolute;\n\n  left: 0;\n  bottom: 0;\n\n  width: 0;\n  height: 2px;\n\n  background:\n    var(--orange);\n\n  transition:\n    width .45s ease;\n}\n\n\n.h5e-hero__stat:hover::before,\n.h5e-hero__stat.is-counted::before {\n  width: 100%;\n}\n\n\n.h5e-hero__stat strong {\n  display: block;\n\n  margin-bottom: 5px;\n\n  color:\n    var(--navy);\n\n  font-size: 23px;\n  font-weight: 700;\n\n  line-height: 1;\n}\n\n\n.h5e-hero__stat-number {\n  color:\n    var(--orange);\n}\n\n\n.h5e-hero__stat small {\n  display: block;\n\n  color:\n    var(--text);\n\n  font-size: 9px;\n  font-weight: 600;\n\n  line-height: 1.4;\n}\n\n\n\/* =========================================================\n   ANIMATIONS\n========================================================= *\/\n\n@keyframes h5eTitleIn {\n\n  from {\n    opacity: 0;\n\n    transform:\n      translateY(27px);\n  }\n\n  to {\n    opacity: 1;\n\n    transform:\n      translateY(0);\n  }\n\n}\n\n\n@keyframes h5eFadeUp {\n\n  from {\n    opacity: 0;\n\n    transform:\n      translateY(16px);\n  }\n\n  to {\n    opacity: 1;\n\n    transform:\n      translateY(0);\n  }\n\n}\n\n\n@keyframes h5eLineIn {\n\n  from {\n    transform:\n      scaleX(0);\n  }\n\n  to {\n    transform:\n      scaleX(1);\n  }\n\n}\n\n\n@keyframes h5eVisualEntrance {\n\n  from {\n    opacity: 0;\n\n    transform:\n      translate3d(\n        34px,\n        0,\n        0\n      );\n  }\n\n  to {\n    opacity: 1;\n\n    transform:\n      translate3d(\n        var(--h5e-x),\n        var(--h5e-y),\n        0\n      );\n  }\n\n}\n\n\n@keyframes h5eTruckFloat {\n\n  0%,\n  100% {\n    transform:\n      translateY(0);\n  }\n\n  50% {\n    transform:\n      translateY(-4px);\n  }\n\n}\n\n\n@keyframes h5eGlow {\n\n  0%,\n  100% {\n    opacity: .60;\n\n    transform:\n      translateX(-50%)\n      scale(.94);\n  }\n\n  50% {\n    opacity: 1;\n\n    transform:\n      translateX(-50%)\n      scale(1.06);\n  }\n\n}\n\n\n@keyframes h5eOrbitPulse {\n\n  0%,\n  100% {\n    opacity: .55;\n\n    transform:\n      translate(-50%,-50%)\n      scale(.97);\n  }\n\n  50% {\n    opacity: .95;\n\n    transform:\n      translate(-50%,-50%)\n      scale(1.025);\n  }\n\n}\n\n\n@keyframes h5eRotate {\n\n  from {\n    transform:\n      rotate(0deg);\n  }\n\n  to {\n    transform:\n      rotate(360deg);\n  }\n\n}\n\n\n@keyframes h5eScan {\n\n  from {\n    left: -110px;\n  }\n\n  to {\n    left: 110%;\n  }\n\n}\n\n\n@keyframes h5eNodePulse {\n\n  0%,\n  100% {\n    opacity: .35;\n\n    transform:\n      scale(.82);\n\n    box-shadow:\n      0 0 0 4px\n      rgba(255,100,51,.06);\n  }\n\n  50% {\n    opacity: 1;\n\n    transform:\n      scale(1);\n\n    box-shadow:\n      0 0 0 9px\n      rgba(255,100,51,.10);\n  }\n\n}\n\n\n@keyframes h5eStatsEntrance {\n\n  from {\n    opacity: 0;\n\n    transform:\n      translateY(18px);\n  }\n\n  to {\n    opacity: 1;\n\n    transform:\n      translateY(0);\n  }\n\n}\n\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width: 1024px) {\n\n  .h5e-hero__inner {\n    min-height: 680px;\n\n    padding:\n      58px\n      28px\n      48px;\n\n    gap: 36px;\n  }\n\n\n  .h5e-hero h1 {\n    font-size: 48px;\n  }\n\n\n  .h5e-hero__visual {\n    height: 450px;\n  }\n\n\n  .h5e-hero__image {\n    height: 375px;\n  }\n\n\n  .h5e-hero__orbit {\n    width: 340px;\n    height: 340px;\n  }\n\n\n  .h5e-hero__stat {\n    padding:\n      17px\n      16px;\n  }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width: 767px) {\n\n  .h5e-hero__inner {\n    min-height: 0;\n\n    padding:\n      42px\n      16px\n      32px;\n\n    display: flex;\n\n    flex-direction: column;\n\n    gap: 0;\n\n    align-items: stretch;\n  }\n\n\n  \/* COPY *\/\n\n  .h5e-hero__content {\n    order: 1;\n  }\n\n\n  .h5e-hero__eyebrow {\n    margin-bottom: 10px;\n\n    font-size: 8px;\n\n    letter-spacing: 1.2px;\n  }\n\n\n  .h5e-hero__eyebrow::before {\n    width: 24px;\n  }\n\n\n  .h5e-hero h1 {\n    max-width: 360px;\n\n    margin-bottom: 12px;\n\n    font-size: 35px;\n\n    line-height: 1.03;\n\n    letter-spacing: -.9px;\n  }\n\n\n  .h5e-hero__title-sub {\n    margin-top: 6px;\n\n    font-size: .70em;\n  }\n\n\n  .h5e-hero__description {\n    max-width: 360px;\n\n    margin-bottom: 14px;\n\n    font-size: 12px;\n\n    line-height: 1.58;\n  }\n\n\n  .h5e-hero__uses {\n    margin-bottom: 18px;\n\n    gap: 5px;\n  }\n\n\n  .h5e-hero__uses span {\n    padding:\n      6px\n      8px;\n\n    font-size: 7px;\n  }\n\n\n  \/* BUTTONS *\/\n\n  .h5e-hero__actions {\n    display: grid;\n\n    grid-template-columns:\n      1fr\n      1fr;\n\n    gap: 7px;\n\n    margin-bottom: 24px;\n  }\n\n\n  .h5e-hero__btn {\n    min-height: 43px;\n\n    padding:\n      0\n      9px;\n\n    font-size: 10px;\n  }\n\n\n  \/* VISUAL *\/\n\n  .h5e-hero__visual {\n    order: 2;\n\n    height: 315px;\n\n    margin-bottom: 13px;\n\n    transform:\n      none !important;\n  }\n\n\n  .h5e-hero__visual-frame {\n    inset: 0;\n\n    border-radius: 20px;\n  }\n\n\n  .h5e-hero__orbit {\n    width: 255px;\n    height: 255px;\n  }\n\n\n  .h5e-hero__orbit::before {\n    inset: 42px;\n  }\n\n\n  .h5e-hero__orbit::after {\n    inset: 80px;\n  }\n\n\n  .h5e-hero__image {\n    width:\n      calc(100% - 20px);\n\n    height: 295px;\n\n    border-radius: 15px;\n\n    animation:\n      none;\n  }\n\n\n  .h5e-hero__image img {\n    object-position:\n      center center;\n  }\n\n\n  .h5e-hero__visual-label {\n    top: 13px;\n    left: 13px;\n\n    padding:\n      9px\n      10px;\n  }\n\n\n  .h5e-hero__visual-label strong {\n    font-size: 9px;\n  }\n\n\n  .h5e-hero__visual-status {\n    right: 13px;\n    bottom: 14px;\n\n    font-size: 7px;\n  }\n\n\n  .h5e-hero__node {\n    display: none;\n  }\n\n\n  .h5e-hero__scan {\n    left: 8%;\n    right: 8%;\n\n    bottom: 16px;\n  }\n\n\n  \/* STATS *\/\n\n  .h5e-hero__stats {\n    order: 3;\n\n    width: 100%;\n\n    grid-template-columns:\n      1fr\n      1fr;\n\n    margin-top: 0;\n\n    box-shadow: none;\n  }\n\n\n  .h5e-hero__stat {\n    min-height: 78px;\n\n    padding:\n      14px;\n\n    border-bottom:\n      1px solid\n      var(--line);\n  }\n\n\n  .h5e-hero__stat:nth-child(2) {\n    border-right: 0;\n  }\n\n\n  .h5e-hero__stat:nth-child(3),\n  .h5e-hero__stat:nth-child(4) {\n    border-bottom: 0;\n  }\n\n\n  .h5e-hero__stat strong {\n    font-size: 20px;\n  }\n\n\n  .h5e-hero__stat small {\n    font-size: 8px;\n  }\n\n}\n\n\n\/* =========================================================\n   SMALL MOBILE\n========================================================= *\/\n\n@media (max-width: 380px) {\n\n  .h5e-hero h1 {\n    font-size: 32px;\n  }\n\n\n  .h5e-hero__visual {\n    height: 285px;\n  }\n\n\n  .h5e-hero__image {\n    height: 265px;\n  }\n\n\n  .h5e-hero__actions {\n    display: flex;\n\n    flex-direction: column;\n  }\n\n\n  .h5e-hero__btn {\n    width: 100%;\n  }\n\n}\n\n\n\/* =========================================================\n   REDUCED MOTION\n========================================================= *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n  .h5e-hero *,\n  .h5e-hero *::before,\n  .h5e-hero *::after {\n    animation: none !important;\n\n    transition: none !important;\n  }\n\n\n  .h5e-hero__visual {\n    transform:\n      none !important;\n  }\n\n}\n<\/style>\n\n\n<section\n  class=\"h5e-hero\"\n  id=\"h5e\">\n\n\n  <div class=\"h5e-hero__inner\">\n\n\n    <!-- =====================================================\n         CONTENT\n    ====================================================== -->\n\n    <div class=\"h5e-hero__content\">\n\n\n      <div class=\"h5e-hero__eyebrow\">\n        Farizon H5E Singapore\n      <\/div>\n\n\n\n      <h1>\n\n\n        <span class=\"h5e-hero__title-main\">\n          Farizon H5E 14ft\n          Electric Truck Singapore\n        <\/span>\n\n\n        <span class=\"h5e-hero__title-sub\">\n          Built for Serious Commercial Work.\n        <\/span>\n\n\n      <\/h1>\n\n\n\n      <p class=\"h5e-hero__description\">\n        A mid-duty electric cab-chassis truck built for\n        logistics, distribution and fleet operations,\n        combining practical payload capability, electric\n        range and business-ready usability for Singapore.\n      <\/p>\n\n\n\n      <div class=\"h5e-hero__uses\">\n\n\n        <span>\n          Logistics\n        <\/span>\n\n\n        <span>\n          Distribution\n        <\/span>\n\n\n        <span>\n          Fleet\n        <\/span>\n\n\n        <span>\n          Commercial Transport\n        <\/span>\n\n\n      <\/div>\n\n\n\n      <div class=\"h5e-hero__actions\">\n\n\n        <a\n          class=\"h5e-hero__btn h5e-hero__btn--primary\"\n          href=\"#h5e-enquiry\">\n\n          Book a Test Drive\n\n          <span class=\"h5e-hero__btn-icon\">\n            \u2192\n          <\/span>\n\n        <\/a>\n\n\n\n        <a\n          class=\"h5e-hero__btn h5e-hero__btn--secondary\"\n          href=\"#h5e-platform\"\n          id=\"h5e-explore\">\n\n          Explore the H5E\n\n          <span class=\"h5e-hero__btn-icon\">\n            \u2193\n          <\/span>\n\n        <\/a>\n\n\n      <\/div>\n\n\n    <\/div>\n\n\n\n    <!-- =====================================================\n         VISUAL\n    ====================================================== -->\n\n    <div\n      class=\"h5e-hero__visual\"\n      id=\"h5e-hero-visual\">\n\n\n      <div class=\"h5e-hero__visual-frame\"><\/div>\n\n\n      <div\n        class=\"h5e-hero__orbit\"\n        aria-hidden=\"true\">\n      <\/div>\n\n\n      <span\n        class=\"h5e-hero__node h5e-hero__node--1\"\n        aria-hidden=\"true\">\n      <\/span>\n\n\n      <span\n        class=\"h5e-hero__node h5e-hero__node--2\"\n        aria-hidden=\"true\">\n      <\/span>\n\n\n      <span\n        class=\"h5e-hero__node h5e-hero__node--3\"\n        aria-hidden=\"true\">\n      <\/span>\n\n\n\n      <div class=\"h5e-hero__image\">\n\n\n        <img\n          src=\"https:\/\/farizon.com.sg\/wp-content\/uploads\/2026\/02\/20260126_073204662_iOS-scaled.jpg\"\n          alt=\"Farizon H5E 14ft electric truck Singapore\"\n          fetchpriority=\"high\"\n          decoding=\"async\">\n\n\n      <\/div>\n\n\n\n      <div class=\"h5e-hero__visual-label\">\n\n\n        <span>\n          Commercial Platform\n        <\/span>\n\n\n        <strong>\n          14ft Electric Truck\n        <\/strong>\n\n\n      <\/div>\n\n\n\n      <div class=\"h5e-hero__visual-status\">\n        Built for Singapore Business\n      <\/div>\n\n\n\n      <div\n        class=\"h5e-hero__scan\"\n        aria-hidden=\"true\">\n      <\/div>\n\n\n    <\/div>\n\n\n\n    <!-- =====================================================\n         STATS\n    ====================================================== -->\n\n    <div\n      class=\"h5e-hero__stats\"\n      id=\"h5e-stats\">\n\n\n      <div class=\"h5e-hero__stat\">\n\n\n        <strong>\n\n          <span\n            class=\"h5e-hero__stat-number\"\n            data-h5e-count=\"344\"\n            data-decimals=\"0\">\n\n            344\n\n          <\/span>km\n\n        <\/strong>\n\n\n        <small>\n          WLTC Range\n        <\/small>\n\n\n      <\/div>\n\n\n\n      <div class=\"h5e-hero__stat\">\n\n\n        <strong>\n\n          <span\n            class=\"h5e-hero__stat-number\"\n            data-h5e-count=\"2300\"\n            data-decimals=\"0\"\n            data-comma=\"true\">\n\n            2,300\n\n          <\/span>kg\n\n        <\/strong>\n\n\n        <small>\n          Payload\n        <\/small>\n\n\n      <\/div>\n\n\n\n      <div class=\"h5e-hero__stat\">\n\n\n        <strong>\n\n          <span\n            class=\"h5e-hero__stat-number\"\n            data-h5e-count=\"100.46\"\n            data-decimals=\"2\">\n\n            100.46\n\n          <\/span>kWh\n\n        <\/strong>\n\n\n        <small>\n          Battery\n        <\/small>\n\n\n      <\/div>\n\n\n\n      <div class=\"h5e-hero__stat\">\n\n\n        <strong>\n          No VPC\n        <\/strong>\n\n\n        <small>\n          Required\n        <\/small>\n\n\n      <\/div>\n\n\n    <\/div>\n\n\n  <\/div>\n\n\n<\/section>\n\n\n<script>\n(function () {\n\n  const hero =\n    document.getElementById(\n      \"h5e\"\n    );\n\n\n  if (!hero) {\n    return;\n  }\n\n\n  const reducedMotion =\n    window.matchMedia(\n      \"(prefers-reduced-motion: reduce)\"\n    ).matches;\n\n\n\n  \/* =========================================================\n     SMOOTH SCROLL\n  ========================================================= *\/\n\n  const explore =\n    document.getElementById(\n      \"h5e-explore\"\n    );\n\n\n  if (explore) {\n\n    explore.addEventListener(\n      \"click\",\n      function (event) {\n\n\n        const target =\n          document.getElementById(\n            \"h5e-platform\"\n          );\n\n\n        if (!target) {\n          return;\n        }\n\n\n        event.preventDefault();\n\n\n        target.scrollIntoView({\n          behavior:\n            reducedMotion\n              ? \"auto\"\n              : \"smooth\",\n\n          block:\n            \"start\"\n        });\n\n\n      }\n    );\n\n  }\n\n\n\n  \/* =========================================================\n     COUNT-UP STATS\n     Safe:\n     Final values are already in HTML.\n     Animation only starts once JS is running.\n  ========================================================= *\/\n\n  const stats =\n    document.getElementById(\n      \"h5e-stats\"\n    );\n\n\n  let counted =\n    false;\n\n\n  function animateNumber(\n    element\n  ) {\n\n\n    const target =\n      parseFloat(\n        element.getAttribute(\n          \"data-h5e-count\"\n        )\n      );\n\n\n    const decimals =\n      parseInt(\n        element.getAttribute(\n          \"data-decimals\"\n        ) || \"0\",\n        10\n      );\n\n\n    const comma =\n      element.getAttribute(\n        \"data-comma\"\n      ) === \"true\";\n\n\n    if (\n      !Number.isFinite(\n        target\n      )\n    ) {\n      return;\n    }\n\n\n    const duration =\n      1250;\n\n\n    let startTime =\n      null;\n\n\n    \/*\n       Reset only once animation is definitely running.\n    *\/\n\n    element.textContent =\n      decimals > 0\n        ? \"0.00\"\n        : \"0\";\n\n\n    function frame(\n      timestamp\n    ) {\n\n\n      if (!startTime) {\n        startTime =\n          timestamp;\n      }\n\n\n      const progress =\n        Math.min(\n          (\n            timestamp -\n            startTime\n          ) \/\n          duration,\n          1\n        );\n\n\n      \/*\n         Ease-out cubic\n      *\/\n\n      const eased =\n        1 -\n        Math.pow(\n          1 - progress,\n          3\n        );\n\n\n      const current =\n        target *\n        eased;\n\n\n      let output =\n        current.toFixed(\n          decimals\n        );\n\n\n      if (\n        comma &&\n        decimals === 0\n      ) {\n\n\n        output =\n          Math.round(\n            current\n          ).toLocaleString(\n            \"en-SG\"\n          );\n\n\n      }\n\n\n      element.textContent =\n        output;\n\n\n      if (\n        progress < 1\n      ) {\n\n\n        window.requestAnimationFrame(\n          frame\n        );\n\n\n      } else {\n\n\n        if (\n          comma &#038;&#038;\n          decimals === 0\n        ) {\n\n          element.textContent =\n            Math.round(\n              target\n            ).toLocaleString(\n              \"en-SG\"\n            );\n\n        } else {\n\n          element.textContent =\n            target.toFixed(\n              decimals\n            );\n\n        }\n\n\n      }\n\n\n    }\n\n\n    window.requestAnimationFrame(\n      frame\n    );\n\n\n  }\n\n\n\n  function runCounters() {\n\n\n    if (\n      counted ||\n      reducedMotion\n    ) {\n      return;\n    }\n\n\n    counted =\n      true;\n\n\n    const numbers =\n      hero.querySelectorAll(\n        \"[data-h5e-count]\"\n      );\n\n\n    numbers.forEach(\n      function (\n        number,\n        index\n      ) {\n\n\n        window.setTimeout(\n          function () {\n\n\n            animateNumber(\n              number\n            );\n\n\n            const card =\n              number.closest(\n                \".h5e-hero__stat\"\n              );\n\n\n            if (card) {\n\n              card.classList.add(\n                \"is-counted\"\n              );\n\n            }\n\n\n          },\n          index * 120\n        );\n\n\n      }\n    );\n\n\n  }\n\n\n\n  if (\n    stats &#038;&#038;\n    \"IntersectionObserver\"\n    in window &#038;&#038;\n    !reducedMotion\n  ) {\n\n\n    const counterObserver =\n      new IntersectionObserver(\n        function (entries) {\n\n\n          entries.forEach(\n            function (entry) {\n\n\n              if (\n                entry.isIntersecting\n              ) {\n\n\n                runCounters();\n\n\n                counterObserver\n                  .disconnect();\n\n\n              }\n\n\n            }\n          );\n\n\n        },\n        {\n          threshold: .35\n        }\n      );\n\n\n    counterObserver.observe(\n      stats\n    );\n\n\n  }\n\n\n\n  \/* =========================================================\n     DESKTOP MICRO PARALLAX\n  ========================================================= *\/\n\n  const visual =\n    document.getElementById(\n      \"h5e-hero-visual\"\n    );\n\n\n  const canParallax =\n    window.matchMedia(\n      \"(min-width:768px) and (pointer:fine)\"\n    ).matches;\n\n\n  if (\n    visual &#038;&#038;\n    canParallax &#038;&#038;\n    !reducedMotion\n  ) {\n\n\n    hero.addEventListener(\n      \"pointermove\",\n      function (event) {\n\n\n        const box =\n          hero.getBoundingClientRect();\n\n\n        const x =\n          (\n            event.clientX -\n            box.left\n          ) \/\n          box.width;\n\n\n        const y =\n          (\n            event.clientY -\n            box.top\n          ) \/\n          box.height;\n\n\n        const moveX =\n          (\n            x -\n            .5\n          ) *\n          -7;\n\n\n        const moveY =\n          (\n            y -\n            .5\n          ) *\n          -4;\n\n\n        hero.style.setProperty(\n          \"--h5e-x\",\n          moveX + \"px\"\n        );\n\n\n        hero.style.setProperty(\n          \"--h5e-y\",\n          moveY + \"px\"\n        );\n\n\n      }\n    );\n\n\n    hero.addEventListener(\n      \"pointerleave\",\n      function () {\n\n\n        hero.style.setProperty(\n          \"--h5e-x\",\n          \"0px\"\n        );\n\n\n        hero.style.setProperty(\n          \"--h5e-y\",\n          \"0px\"\n        );\n\n\n      }\n    );\n\n\n  }\n\n\n})();\n<\/script>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns alignfull is-layout-flex wp-container-core-columns-is-layout-995f960e wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<style>\n\/* =========================================================\n   FARIZON H5E\n   SECTION 02 \u2014 14FT COMMERCIAL PLATFORM\n   UPDATED WITH 3 REAL PRODUCT VISUALS\n========================================================= *\/\n\n.h5e-platform,\n.h5e-platform *,\n.h5e-platform *::before,\n.h5e-platform *::after {\n  box-sizing: border-box;\n}\n\n.h5e-platform {\n  --orange: #ff6433;\n  --orange-hover: #e95428;\n\n  --navy: #263648;\n  --deep: #172636;\n\n  --text: #5d6672;\n  --muted: #89939e;\n\n  --line: #e4e8ec;\n  --white: #ffffff;\n\n  position: relative;\n\n  width: 100vw;\n  max-width: none;\n\n  margin:\n    0\n    0\n    0\n    calc(50% - 50vw) !important;\n\n  padding:\n    60px\n    24px;\n\n  overflow: hidden;\n\n  background:\n    linear-gradient(\n      180deg,\n      #ffffff 0%,\n      #f5f6f8 100%\n    );\n\n  font-family:\n    Inter,\n    Arial,\n    sans-serif;\n\n  scroll-margin-top: 90px;\n}\n\n\n\/* =========================================================\n   BACKGROUND DETAIL\n========================================================= *\/\n\n.h5e-platform::before {\n  content: \"\";\n\n  position: absolute;\n\n  width: 450px;\n  height: 450px;\n\n  right: -230px;\n  bottom: -230px;\n\n  border-radius: 50%;\n\n  background:\n    radial-gradient(\n      circle,\n      rgba(255,100,51,.08),\n      transparent 68%\n    );\n\n  pointer-events: none;\n}\n\n\n.h5e-platform__inner {\n  position: relative;\n\n  z-index: 2;\n\n  width: 100%;\n  max-width: 1280px;\n\n  margin: 0 auto;\n}\n\n\n\/* =========================================================\n   INTRO\n========================================================= *\/\n\n.h5e-platform__top {\n  display: grid;\n\n  grid-template-columns:\n    minmax(0,1fr)\n    minmax(340px,.72fr);\n\n  gap: 60px;\n\n  align-items: end;\n\n  margin-bottom: 30px;\n}\n\n\n.h5e-platform__eyebrow {\n  display: flex;\n\n  align-items: center;\n\n  gap: 10px;\n\n  margin-bottom: 12px;\n\n  color:\n    var(--orange);\n\n  font-size: 9px;\n  font-weight: 700;\n\n  letter-spacing: 1.4px;\n\n  text-transform: uppercase;\n}\n\n\n.h5e-platform__eyebrow::before {\n  content: \"\";\n\n  width: 28px;\n  height: 2px;\n\n  background:\n    var(--orange);\n}\n\n\n.h5e-platform h2 {\n  max-width: 740px;\n\n  margin: 0;\n\n  color:\n    var(--navy);\n\n  font-size:\n    clamp(\n      39px,\n      4.1vw,\n      53px\n    );\n\n  font-weight: 700;\n\n  line-height: 1.04;\n\n  letter-spacing: -1.3px;\n}\n\n\n.h5e-platform h2 span {\n  display: block;\n\n  color:\n    var(--orange);\n}\n\n\n.h5e-platform__intro {\n  max-width: 470px;\n\n  margin:\n    0\n    0\n    3px;\n\n  color:\n    var(--text);\n\n  font-size: 13px;\n\n  line-height: 1.7;\n}\n\n\n\/* =========================================================\n   EXPERIENCE\n========================================================= *\/\n\n.h5e-platform__experience {\n  min-height: 545px;\n\n  display: grid;\n\n  grid-template-columns:\n    minmax(0,1.26fr)\n    minmax(340px,.74fr);\n\n  overflow: hidden;\n\n  border:\n    1px solid\n    var(--line);\n\n  background:\n    #ffffff;\n\n  box-shadow:\n    0 20px 50px\n    rgba(38,54,72,.065);\n}\n\n\n\/* =========================================================\n   VISUAL\n========================================================= *\/\n\n.h5e-platform__visual {\n  position: relative;\n\n  min-width: 0;\n\n  overflow: hidden;\n\n  background:\n    radial-gradient(\n      circle at 50% 44%,\n      #ffffff 0%,\n      #f1f4f6 57%,\n      #e7ebef 100%\n    );\n}\n\n\n.h5e-platform__visual::before {\n  content: \"\";\n\n  position: absolute;\n\n  inset: 0;\n\n  opacity: .40;\n\n  pointer-events: none;\n\n  background-image:\n    linear-gradient(\n      rgba(38,54,72,.04) 1px,\n      transparent 1px\n    ),\n    linear-gradient(\n      90deg,\n      rgba(38,54,72,.04) 1px,\n      transparent 1px\n    );\n\n  background-size:\n    46px\n    46px;\n\n  mask-image:\n    radial-gradient(\n      circle at center,\n      #000 15%,\n      transparent 78%\n    );\n}\n\n\n.h5e-platform__visual::after {\n  content: \"\";\n\n  position: absolute;\n\n  width: 380px;\n  height: 380px;\n\n  left: 50%;\n  bottom: -210px;\n\n  transform:\n    translateX(-50%);\n\n  border-radius: 50%;\n\n  background:\n    radial-gradient(\n      circle,\n      rgba(255,100,51,.14),\n      transparent 69%\n    );\n\n  animation:\n    h5ePlatformGlow\n    4.8s\n    ease-in-out\n    infinite;\n}\n\n\n\/* =========================================================\n   IMAGE STAGE\n========================================================= *\/\n\n.h5e-platform__image-wrap {\n  position: absolute;\n\n  z-index: 3;\n\n  inset:\n    36px\n    38px\n    94px;\n\n  overflow: hidden;\n\n  border-radius: 24px;\n\n  background:\n    #edf1f4;\n\n  border:\n    1px solid\n    rgba(38,54,72,.07);\n}\n\n\n.h5e-platform__image-wrap::after {\n  content: \"\";\n\n  position: absolute;\n\n  inset: 0;\n\n  pointer-events: none;\n\n  background:\n    linear-gradient(\n      180deg,\n      transparent 58%,\n      rgba(18,31,43,.17) 100%\n    );\n}\n\n\n.h5e-platform__image-wrap img {\n  display: block;\n\n  width: 100%;\n  height: 100%;\n\n  object-fit: cover;\n\n  object-position: center;\n\n  opacity: 1;\n\n  transform:\n    scale(1);\n\n  transition:\n    opacity .28s ease,\n    transform .55s\n    cubic-bezier(.2,.7,.3,1);\n}\n\n\n.h5e-platform__experience.is-changing\n.h5e-platform__image-wrap img {\n  opacity: .18;\n\n  transform:\n    scale(1.035);\n}\n\n\n.h5e-platform__experience.image-loaded\n.h5e-platform__image-wrap img {\n  animation:\n    h5eImageIn\n    .48s\n    cubic-bezier(.2,.7,.3,1)\n    both;\n}\n\n\n\/* =========================================================\n   14FT MEASUREMENT\n========================================================= *\/\n\n.h5e-platform__measure {\n  position: absolute;\n\n  z-index: 7;\n\n  left: 12%;\n  right: 12%;\n  bottom: 48px;\n\n  height: 37px;\n\n  opacity: 1;\n\n  transition:\n    opacity .25s ease;\n}\n\n\n.h5e-platform__measure.is-hidden {\n  opacity: .18;\n}\n\n\n.h5e-platform__measure-line {\n  position: absolute;\n\n  left: 0;\n  right: 0;\n  top: 18px;\n\n  height: 1px;\n\n  background:\n    rgba(38,54,72,.18);\n}\n\n\n.h5e-platform__measure-line::before,\n.h5e-platform__measure-line::after {\n  content: \"\";\n\n  position: absolute;\n\n  top: -5px;\n\n  width: 1px;\n  height: 11px;\n\n  background:\n    var(--orange);\n}\n\n\n.h5e-platform__measure-line::before {\n  left: 0;\n}\n\n\n.h5e-platform__measure-line::after {\n  right: 0;\n}\n\n\n.h5e-platform__measure-flow {\n  position: absolute;\n\n  top: 17px;\n\n  width: 90px;\n  height: 3px;\n\n  left: -90px;\n\n  background:\n    linear-gradient(\n      90deg,\n      transparent,\n      var(--orange),\n      transparent\n    );\n\n  animation:\n    h5eMeasureFlow\n    2.7s\n    linear\n    infinite;\n}\n\n\n.h5e-platform__measure-label {\n  position: absolute;\n\n  left: 50%;\n  top: 0;\n\n  transform:\n    translateX(-50%);\n\n  padding:\n    5px\n    9px;\n\n  background:\n    var(--navy);\n\n  color:\n    #ffffff;\n\n  font-size: 8px;\n  font-weight: 700;\n\n  letter-spacing: 1px;\n\n  text-transform: uppercase;\n\n  white-space: nowrap;\n}\n\n\n\/* =========================================================\n   VISUAL LABEL\n========================================================= *\/\n\n.h5e-platform__visual-label {\n  position: absolute;\n\n  z-index: 8;\n\n  top: 51px;\n  left: 53px;\n\n  padding:\n    10px\n    12px;\n\n  background:\n    rgba(38,54,72,.92);\n\n  backdrop-filter:\n    blur(8px);\n\n  -webkit-backdrop-filter:\n    blur(8px);\n}\n\n\n.h5e-platform__visual-label span {\n  display: block;\n\n  margin-bottom: 3px;\n\n  color:\n    var(--orange);\n\n  font-size: 7px;\n  font-weight: 700;\n\n  letter-spacing: 1px;\n\n  text-transform: uppercase;\n}\n\n\n.h5e-platform__visual-label strong {\n  display: block;\n\n  color:\n    #ffffff;\n\n  font-size: 10px;\n  font-weight: 650;\n}\n\n\n\/* =========================================================\n   RIGHT PANEL\n========================================================= *\/\n\n.h5e-platform__panel {\n  padding:\n    40px\n    34px;\n\n  display: flex;\n\n  flex-direction: column;\n\n  justify-content: center;\n\n  background:\n    linear-gradient(\n      145deg,\n      #263648 0%,\n      #182938 100%\n    );\n\n  color:\n    #ffffff;\n}\n\n\n\/* =========================================================\n   TABS\n========================================================= *\/\n\n.h5e-platform__tabs {\n  display: flex;\n\n  flex-direction: column;\n\n  margin-bottom: 28px;\n\n  border-top:\n    1px solid\n    rgba(255,255,255,.11);\n}\n\n\n.h5e-platform__tab {\n  min-height: 58px;\n\n  padding: 0;\n\n  display: grid;\n\n  grid-template-columns:\n    28px\n    1fr\n    auto;\n\n  gap: 10px;\n\n  align-items: center;\n\n  border: 0;\n\n  border-bottom:\n    1px solid\n    rgba(255,255,255,.11);\n\n  background:\n    transparent;\n\n  color:\n    rgba(255,255,255,.54);\n\n  font-family: inherit;\n\n  cursor: pointer;\n\n  transition:\n    color .22s ease,\n    background .22s ease;\n}\n\n\n.h5e-platform__tab:hover,\n.h5e-platform__tab.is-active {\n  color:\n    #ffffff;\n\n  background:\n    rgba(255,255,255,.035);\n}\n\n\n.h5e-platform__tab-num {\n  color:\n    var(--orange);\n\n  font-size: 8px;\n  font-weight: 700;\n}\n\n\n.h5e-platform__tab strong {\n  color: inherit;\n\n  font-size: 10px;\n  font-weight: 650;\n\n  text-align: left;\n}\n\n\n.h5e-platform__tab-dot {\n  width: 7px;\n  height: 7px;\n\n  border-radius: 50%;\n\n  background:\n    rgba(255,255,255,.20);\n\n  transition:\n    background .22s ease,\n    box-shadow .22s ease;\n}\n\n\n.h5e-platform__tab.is-active\n.h5e-platform__tab-dot {\n  background:\n    var(--orange);\n\n  box-shadow:\n    0 0 0 7px\n    rgba(255,100,51,.09);\n}\n\n\n\/* =========================================================\n   CONTENT\n========================================================= *\/\n\n.h5e-platform__content {\n  min-height: 225px;\n}\n\n\n.h5e-platform__content.is-changing {\n  animation:\n    h5ePlatformContentIn\n    .36s\n    ease\n    both;\n}\n\n\n.h5e-platform__mode {\n  margin-bottom: 10px;\n\n  color:\n    var(--orange);\n\n  font-size: 8px;\n  font-weight: 700;\n\n  letter-spacing: 1.2px;\n\n  text-transform: uppercase;\n}\n\n\n.h5e-platform__content h3 {\n  max-width: 420px;\n\n  margin:\n    0\n    0\n    12px;\n\n  color:\n    #ffffff;\n\n  font-size:\n    clamp(\n      28px,\n      3vw,\n      37px\n    );\n\n  font-weight: 700;\n\n  line-height: 1.08;\n\n  letter-spacing: -.7px;\n}\n\n\n.h5e-platform__content p {\n  max-width: 440px;\n\n  margin:\n    0\n    0\n    20px;\n\n  color:\n    rgba(255,255,255,.62);\n\n  font-size: 11px;\n\n  line-height: 1.72;\n}\n\n\n\/* =========================================================\n   CHIPS\n========================================================= *\/\n\n.h5e-platform__chips {\n  display: flex;\n\n  flex-wrap: wrap;\n\n  gap: 7px;\n}\n\n\n.h5e-platform__chips span {\n  padding:\n    8px\n    10px;\n\n  border:\n    1px solid\n    rgba(255,255,255,.13);\n\n  background:\n    rgba(255,255,255,.035);\n\n  color:\n    rgba(255,255,255,.76);\n\n  font-size: 8px;\n  font-weight: 600;\n}\n\n\n\/* =========================================================\n   DATA\n========================================================= *\/\n\n.h5e-platform__data {\n  margin-top: 27px;\n\n  display: grid;\n\n  grid-template-columns:\n    1fr\n    1fr;\n\n  border-top:\n    1px solid\n    rgba(255,255,255,.11);\n\n  border-bottom:\n    1px solid\n    rgba(255,255,255,.11);\n}\n\n\n.h5e-platform__data-item {\n  padding:\n    16px\n    0;\n}\n\n\n.h5e-platform__data-item:first-child {\n  padding-right: 15px;\n\n  border-right:\n    1px solid\n    rgba(255,255,255,.11);\n}\n\n\n.h5e-platform__data-item:last-child {\n  padding-left: 15px;\n}\n\n\n.h5e-platform__data-item span {\n  display: block;\n\n  margin-bottom: 5px;\n\n  color:\n    rgba(255,255,255,.31);\n\n  font-size: 7px;\n  font-weight: 700;\n\n  letter-spacing: .9px;\n\n  text-transform: uppercase;\n}\n\n\n.h5e-platform__data-item strong {\n  display: block;\n\n  color:\n    #ffffff;\n\n  font-size: 17px;\n  font-weight: 700;\n}\n\n\n\/* =========================================================\n   NOTE\n========================================================= *\/\n\n.h5e-platform__note {\n  margin-top: 18px;\n\n  color:\n    rgba(255,255,255,.32);\n\n  font-size: 7px;\n\n  line-height: 1.6;\n}\n\n\n\/* =========================================================\n   ANIMATION\n========================================================= *\/\n\n@keyframes h5eMeasureFlow {\n\n  from {\n    left: -90px;\n  }\n\n  to {\n    left: 110%;\n  }\n\n}\n\n\n@keyframes h5ePlatformGlow {\n\n  0%,\n  100% {\n    opacity: .60;\n\n    transform:\n      translateX(-50%)\n      scale(.95);\n  }\n\n  50% {\n    opacity: 1;\n\n    transform:\n      translateX(-50%)\n      scale(1.05);\n  }\n\n}\n\n\n@keyframes h5ePlatformContentIn {\n\n  from {\n    opacity: .2;\n\n    transform:\n      translateY(8px);\n  }\n\n  to {\n    opacity: 1;\n\n    transform:\n      translateY(0);\n  }\n\n}\n\n\n@keyframes h5eImageIn {\n\n  from {\n    opacity: .3;\n\n    transform:\n      scale(1.035);\n  }\n\n  to {\n    opacity: 1;\n\n    transform:\n      scale(1);\n  }\n\n}\n\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width: 1024px) {\n\n  .h5e-platform {\n    padding:\n      52px\n      22px;\n  }\n\n\n  .h5e-platform__top {\n    gap: 38px;\n  }\n\n\n  .h5e-platform__experience {\n    grid-template-columns:\n      minmax(0,1.12fr)\n      minmax(320px,.88fr);\n  }\n\n\n  .h5e-platform__panel {\n    padding:\n      36px\n      28px;\n  }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width: 767px) {\n\n  .h5e-platform {\n    padding:\n      44px\n      16px;\n  }\n\n\n  .h5e-platform__top {\n    display: block;\n\n    margin-bottom: 22px;\n  }\n\n\n  .h5e-platform__eyebrow {\n    margin-bottom: 9px;\n\n    font-size: 8px;\n  }\n\n\n  .h5e-platform h2 {\n    max-width: 360px;\n\n    margin-bottom: 12px;\n\n    font-size: 34px;\n\n    line-height: 1.05;\n\n    letter-spacing: -.8px;\n  }\n\n\n  .h5e-platform__intro {\n    max-width: 360px;\n\n    font-size: 12px;\n\n    line-height: 1.6;\n  }\n\n\n  .h5e-platform__experience {\n    display: flex;\n\n    flex-direction: column;\n\n    min-height: 0;\n  }\n\n\n  \/* VISUAL *\/\n\n  .h5e-platform__visual {\n    height: 340px;\n  }\n\n\n  .h5e-platform__image-wrap {\n    inset:\n      14px\n      14px\n      73px;\n\n    border-radius: 17px;\n  }\n\n\n  .h5e-platform__visual-label {\n    top: 25px;\n    left: 25px;\n\n    padding:\n      8px\n      9px;\n  }\n\n\n  .h5e-platform__visual-label strong {\n    font-size: 9px;\n  }\n\n\n  .h5e-platform__measure {\n    left: 8%;\n    right: 8%;\n\n    bottom: 26px;\n  }\n\n\n  .h5e-platform__measure-label {\n    font-size: 7px;\n\n    padding:\n      4px\n      7px;\n  }\n\n\n  \/* PANEL *\/\n\n  .h5e-platform__panel {\n    padding:\n      28px\n      20px\n      30px;\n  }\n\n\n  .h5e-platform__tabs {\n    display: grid;\n\n    grid-template-columns:\n      repeat(3,1fr);\n\n    margin-bottom: 24px;\n\n    border:\n      1px solid\n      rgba(255,255,255,.11);\n  }\n\n\n  .h5e-platform__tab {\n    min-height: 64px;\n\n    display: flex;\n\n    flex-direction: column;\n\n    justify-content: center;\n    align-items: flex-start;\n\n    gap: 3px;\n\n    padding:\n      0\n      9px;\n\n    border-bottom: 0;\n\n    border-right:\n      1px solid\n      rgba(255,255,255,.11);\n  }\n\n\n  .h5e-platform__tab:last-child {\n    border-right: 0;\n  }\n\n\n  .h5e-platform__tab-dot {\n    display: none;\n  }\n\n\n  .h5e-platform__tab strong {\n    font-size: 8px;\n\n    line-height: 1.3;\n  }\n\n\n  .h5e-platform__content {\n    min-height: 210px;\n  }\n\n\n  .h5e-platform__content h3 {\n    font-size: 27px;\n  }\n\n}\n\n\n\/* =========================================================\n   SMALL MOBILE\n========================================================= *\/\n\n@media (max-width: 380px) {\n\n  .h5e-platform h2 {\n    font-size: 31px;\n  }\n\n\n  .h5e-platform__visual {\n    height: 315px;\n  }\n\n\n  .h5e-platform__tab {\n    padding:\n      0\n      7px;\n  }\n\n}\n\n\n\/* =========================================================\n   ACCESSIBILITY \/ REDUCED MOTION\n========================================================= *\/\n\n.h5e-platform button:focus-visible {\n  outline:\n    2px solid\n    var(--orange);\n\n  outline-offset: -3px;\n}\n\n\n@media (prefers-reduced-motion: reduce) {\n\n  .h5e-platform *,\n  .h5e-platform *::before,\n  .h5e-platform *::after {\n    animation: none !important;\n\n    transition: none !important;\n  }\n\n}\n<\/style>\n\n\n<section\n  class=\"h5e-platform\"\n  id=\"h5e-platform\">\n\n\n  <div class=\"h5e-platform__inner\">\n\n\n    <!-- =====================================================\n         INTRO\n    ====================================================== -->\n\n    <div class=\"h5e-platform__top\">\n\n\n      <div>\n\n\n        <div class=\"h5e-platform__eyebrow\">\n          14ft Commercial Platform\n        <\/div>\n\n\n        <h2>\n          Built Around the Job.\n          <span>Configured Around the Business.<\/span>\n        <\/h2>\n\n\n      <\/div>\n\n\n\n      <p class=\"h5e-platform__intro\">\n        The Farizon H5E combines a 14ft commercial working\n        format with a reinforced cab-chassis platform designed\n        for everyday logistics, delivery and fleet applications.\n      <\/p>\n\n\n    <\/div>\n\n\n\n    <!-- =====================================================\n         EXPERIENCE\n    ====================================================== -->\n\n    <div\n      class=\"h5e-platform__experience\"\n      id=\"h5e-platform-experience\">\n\n\n      <!-- ===================================================\n           VISUAL\n      ==================================================== -->\n\n      <div class=\"h5e-platform__visual\">\n\n\n        <div class=\"h5e-platform__image-wrap\">\n\n\n          <img\n            id=\"h5e-platform-image\"\n            src=\"https:\/\/farizon.com.sg\/wp-content\/uploads\/2026\/10\/IMG_20260126_154252-scaled.png\"\n            alt=\"Farizon H5E 14ft electric truck side view\"\n            loading=\"lazy\"\n            decoding=\"async\">\n\n\n        <\/div>\n\n\n\n        <div class=\"h5e-platform__visual-label\">\n\n\n          <span>\n            Selected View\n          <\/span>\n\n\n          <strong id=\"h5e-platform-visual-label\">\n            14ft Commercial Platform\n          <\/strong>\n\n\n        <\/div>\n\n\n\n        <div\n          class=\"h5e-platform__measure\"\n          id=\"h5e-platform-measure\">\n\n\n          <div\n            class=\"h5e-platform__measure-label\"\n            id=\"h5e-platform-measure-label\">\n\n            14FT COMMERCIAL FORMAT\n\n          <\/div>\n\n\n          <div class=\"h5e-platform__measure-line\"><\/div>\n\n\n          <div class=\"h5e-platform__measure-flow\"><\/div>\n\n\n        <\/div>\n\n\n      <\/div>\n\n\n\n      <!-- ===================================================\n           RIGHT PANEL\n      ==================================================== -->\n\n      <div class=\"h5e-platform__panel\">\n\n\n        <!-- TABS -->\n\n        <div class=\"h5e-platform__tabs\">\n\n\n          <button\n            class=\"h5e-platform__tab is-active\"\n            type=\"button\"\n            data-h5e-platform=\"body\">\n\n            <span class=\"h5e-platform__tab-num\">\n              01\n            <\/span>\n\n            <strong>\n              14ft Platform\n            <\/strong>\n\n            <span class=\"h5e-platform__tab-dot\"><\/span>\n\n          <\/button>\n\n\n\n          <button\n            class=\"h5e-platform__tab\"\n            type=\"button\"\n            data-h5e-platform=\"chassis\">\n\n            <span class=\"h5e-platform__tab-num\">\n              02\n            <\/span>\n\n            <strong>\n              Commercial Chassis\n            <\/strong>\n\n            <span class=\"h5e-platform__tab-dot\"><\/span>\n\n          <\/button>\n\n\n\n          <button\n            class=\"h5e-platform__tab\"\n            type=\"button\"\n            data-h5e-platform=\"control\">\n\n            <span class=\"h5e-platform__tab-num\">\n              03\n            <\/span>\n\n            <strong>\n              Road Control\n            <\/strong>\n\n            <span class=\"h5e-platform__tab-dot\"><\/span>\n\n          <\/button>\n\n\n        <\/div>\n\n\n\n        <!-- CONTENT -->\n\n        <div\n          class=\"h5e-platform__content\"\n          id=\"h5e-platform-content\">\n\n\n          <div\n            class=\"h5e-platform__mode\"\n            id=\"h5e-platform-mode\">\n\n            Commercial Body Flexibility\n\n          <\/div>\n\n\n          <h3 id=\"h5e-platform-title\">\n            A 14ft Platform Ready for Different Jobs.\n          <\/h3>\n\n\n          <p id=\"h5e-platform-description\">\n            The H5E cab-chassis platform supports commercial\n            body applications including box bodies, freezer\n            configurations, tailgate setups and other\n            business-specific body requirements.\n          <\/p>\n\n\n          <div\n            class=\"h5e-platform__chips\"\n            id=\"h5e-platform-chips\">\n\n            <span>Box Body<\/span>\n\n            <span>Freezer<\/span>\n\n            <span>Tailgate<\/span>\n\n            <span>Commercial Body<\/span>\n\n          <\/div>\n\n\n        <\/div>\n\n\n\n        <!-- DATA -->\n\n        <div class=\"h5e-platform__data\">\n\n\n          <div class=\"h5e-platform__data-item\">\n\n\n            <span id=\"h5e-platform-data1-label\">\n              Gross Vehicle Weight\n            <\/span>\n\n\n            <strong id=\"h5e-platform-data1\">\n              5,000kg\n            <\/strong>\n\n\n          <\/div>\n\n\n\n          <div class=\"h5e-platform__data-item\">\n\n\n            <span id=\"h5e-platform-data2-label\">\n              Curb Weight\n            <\/span>\n\n\n            <strong id=\"h5e-platform-data2\">\n              2,700kg\n            <\/strong>\n\n\n          <\/div>\n\n\n        <\/div>\n\n\n\n        <div class=\"h5e-platform__note\">\n          Body configuration availability may vary according\n          to final commercial requirements and vehicle setup.\n        <\/div>\n\n\n      <\/div>\n\n\n    <\/div>\n\n\n  <\/div>\n\n\n<\/section>\n\n\n<script>\n(function () {\n\n  const section =\n    document.getElementById(\n      \"h5e-platform\"\n    );\n\n\n  if (!section) {\n    return;\n  }\n\n\n  const tabs =\n    section.querySelectorAll(\n      \"[data-h5e-platform]\"\n    );\n\n\n  const experience =\n    document.getElementById(\n      \"h5e-platform-experience\"\n    );\n\n\n  const image =\n    document.getElementById(\n      \"h5e-platform-image\"\n    );\n\n\n  const content =\n    document.getElementById(\n      \"h5e-platform-content\"\n    );\n\n\n  const visualLabel =\n    document.getElementById(\n      \"h5e-platform-visual-label\"\n    );\n\n\n  const measure =\n    document.getElementById(\n      \"h5e-platform-measure\"\n    );\n\n\n  const measureLabel =\n    document.getElementById(\n      \"h5e-platform-measure-label\"\n    );\n\n\n  const mode =\n    document.getElementById(\n      \"h5e-platform-mode\"\n    );\n\n\n  const title =\n    document.getElementById(\n      \"h5e-platform-title\"\n    );\n\n\n  const description =\n    document.getElementById(\n      \"h5e-platform-description\"\n    );\n\n\n  const chips =\n    document.getElementById(\n      \"h5e-platform-chips\"\n    );\n\n\n  const data1Label =\n    document.getElementById(\n      \"h5e-platform-data1-label\"\n    );\n\n\n  const data1 =\n    document.getElementById(\n      \"h5e-platform-data1\"\n    );\n\n\n  const data2Label =\n    document.getElementById(\n      \"h5e-platform-data2-label\"\n    );\n\n\n  const data2 =\n    document.getElementById(\n      \"h5e-platform-data2\"\n    );\n\n\n  \/* =========================================================\n     DATA\n  ========================================================= *\/\n\n  const data = {\n\n\n    body: {\n\n      image:\n        \"https:\/\/farizon.com.sg\/wp-content\/uploads\/2026\/10\/IMG_20260126_154252-scaled.png\",\n\n      alt:\n        \"Farizon H5E 14ft electric truck side view\",\n\n      visualLabel:\n        \"14ft Commercial Platform\",\n\n      measure:\n        \"14FT COMMERCIAL FORMAT\",\n\n      mode:\n        \"Commercial Body Flexibility\",\n\n      title:\n        \"A 14ft Platform Ready for Different Jobs.\",\n\n      description:\n        \"The H5E cab-chassis platform supports commercial body applications including box bodies, freezer configurations, tailgate setups and other business-specific body requirements.\",\n\n      chips:\n        [\n          \"Box Body\",\n          \"Freezer\",\n          \"Tailgate\",\n          \"Commercial Body\"\n        ],\n\n      data1Label:\n        \"Gross Vehicle Weight\",\n\n      data1:\n        \"5,000kg\",\n\n      data2Label:\n        \"Curb Weight\",\n\n      data2:\n        \"2,700kg\"\n\n    },\n\n\n    chassis: {\n\n      image:\n        \"https:\/\/farizon.com.sg\/wp-content\/uploads\/2026\/10\/IMG_20260126_153414-scaled.png\",\n\n      alt:\n        \"Farizon H5E commercial cab chassis\",\n\n      visualLabel:\n        \"Reinforced Commercial Chassis\",\n\n      measure:\n        \"COMMERCIAL CAB-CHASSIS\",\n\n      mode:\n        \"Commercial-Duty Platform\",\n\n      title:\n        \"Built Around Commercial Operating Requirements.\",\n\n      description:\n        \"A reinforced chassis structure provides the foundation for daily business operations and supports the H5E's role as a mid-duty commercial electric truck.\",\n\n      chips:\n        [\n          \"Reinforced Platform\",\n          \"Commercial Duty\",\n          \"Cab-Chassis\",\n          \"14ft Format\"\n        ],\n\n      data1Label:\n        \"Gross Vehicle Weight\",\n\n      data1:\n        \"5,000kg\",\n\n      data2Label:\n        \"Platform\",\n\n      data2:\n        \"Cab-Chassis\"\n\n    },\n\n\n    control: {\n\n      image:\n        \"https:\/\/farizon.com.sg\/wp-content\/uploads\/2026\/10\/IMG_20260126_153053-scaled.png\",\n\n      alt:\n        \"Farizon H5E electric truck road control platform\",\n\n      visualLabel:\n        \"Commercial Road Control\",\n\n      measure:\n        \"LOAD & ROAD SUPPORT\",\n\n      mode:\n        \"Stability & Load Support\",\n\n      title:\n        \"Designed for Stable Commercial Operation.\",\n\n      description:\n        \"Rear-wheel drive and reinforced leaf-spring suspension support commercial driving, cargo movement and day-to-day operating demands across different working environments.\",\n\n      chips:\n        [\n          \"Rear-Wheel Drive\",\n          \"Leaf-Spring Suspension\",\n          \"Load Support\",\n          \"Commercial Stability\"\n        ],\n\n      data1Label:\n        \"Drive Layout\",\n\n      data1:\n        \"Rear-Wheel\",\n\n      data2Label:\n        \"Suspension\",\n\n      data2:\n        \"Leaf-Spring\"\n\n    }\n\n  };\n\n\n  \/* =========================================================\n     PRELOAD THE 3 IMAGES\n  ========================================================= *\/\n\n  Object.keys(data).forEach(\n    function (key) {\n\n      const preload =\n        new Image();\n\n      preload.src =\n        data[key].image;\n\n    }\n  );\n\n\n  \/* =========================================================\n     CHIPS\n  ========================================================= *\/\n\n  function renderChips(\n    items\n  ) {\n\n    chips.innerHTML =\n      \"\";\n\n\n    items.forEach(\n      function (item) {\n\n        const span =\n          document.createElement(\n            \"span\"\n          );\n\n\n        span.textContent =\n          item;\n\n\n        chips.appendChild(\n          span\n        );\n\n      }\n    );\n\n  }\n\n\n  \/* =========================================================\n     TAB INTERACTION\n  ========================================================= *\/\n\n  tabs.forEach(\n    function (tab) {\n\n\n      tab.addEventListener(\n        \"click\",\n        function () {\n\n\n          const key =\n            tab.getAttribute(\n              \"data-h5e-platform\"\n            );\n\n\n          const selected =\n            data[key];\n\n\n          if (!selected) {\n            return;\n          }\n\n\n          tabs.forEach(\n            function (item) {\n\n              item.classList.remove(\n                \"is-active\"\n              );\n\n            }\n          );\n\n\n          tab.classList.add(\n            \"is-active\"\n          );\n\n\n          experience.classList.add(\n            \"is-changing\"\n          );\n\n\n          measure.classList.add(\n            \"is-hidden\"\n          );\n\n\n          \/*\n             Change content after short fade\n          *\/\n\n          window.setTimeout(\n            function () {\n\n\n              image.src =\n                selected.image;\n\n\n              image.alt =\n                selected.alt;\n\n\n              visualLabel.textContent =\n                selected.visualLabel;\n\n\n              measureLabel.textContent =\n                selected.measure;\n\n\n              mode.textContent =\n                selected.mode;\n\n\n              title.textContent =\n                selected.title;\n\n\n              description.textContent =\n                selected.description;\n\n\n              renderChips(\n                selected.chips\n              );\n\n\n              data1Label.textContent =\n                selected.data1Label;\n\n\n              data1.textContent =\n                selected.data1;\n\n\n              data2Label.textContent =\n                selected.data2Label;\n\n\n              data2.textContent =\n                selected.data2;\n\n\n              \/*\n                 Reset content animation\n              *\/\n\n              content.classList.remove(\n                \"is-changing\"\n              );\n\n\n              void content.offsetWidth;\n\n\n              content.classList.add(\n                \"is-changing\"\n              );\n\n\n            },\n            150\n          );\n\n\n          \/*\n             Wait for image to load before showing cleanly\n          *\/\n\n          image.onload =\n            function () {\n\n\n              experience.classList.remove(\n                \"is-changing\"\n              );\n\n\n              experience.classList.remove(\n                \"image-loaded\"\n              );\n\n\n              void experience.offsetWidth;\n\n\n              experience.classList.add(\n                \"image-loaded\"\n              );\n\n\n              measure.classList.remove(\n                \"is-hidden\"\n              );\n\n\n            };\n\n\n          \/*\n             Safety fallback\n          *\/\n\n          window.setTimeout(\n            function () {\n\n\n              experience.classList.remove(\n                \"is-changing\"\n              );\n\n\n              measure.classList.remove(\n                \"is-hidden\"\n              );\n\n\n            },\n            900\n          );\n\n\n        }\n      );\n\n\n    }\n  );\n\n\n})();\n<\/script>\n<\/div>\n<\/div>\n\n\n\n<style>\n\/* =========================================================\n   H5E SECTION 2 \u2014 AUTO TAB PROGRESS\n========================================================= *\/\n\n#h5e-platform .h5e-platform__tab {\n  position: relative;\n  overflow: hidden;\n}\n\n#h5e-platform .h5e-platform__tab::after {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  bottom: 0;\n\n  width: 0;\n  height: 2px;\n\n  background: #ff6433;\n\n  opacity: 0;\n}\n\n#h5e-platform.h5e-platform-autoplay\n.h5e-platform__tab.is-active::after {\n  opacity: 1;\n\n  animation:\n    h5ePlatformTabProgress\n    4.8s\n    linear\n    forwards;\n}\n\n@keyframes h5ePlatformTabProgress {\n  from {\n    width: 0;\n  }\n\n  to {\n    width: 100%;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  #h5e-platform .h5e-platform__tab::after {\n    display: none !important;\n  }\n}\n<\/style>\n\n<script>\n(function () {\n\n  const section =\n    document.getElementById(\"h5e-platform\");\n\n  if (!section) return;\n\n\n  const tabs =\n    Array.from(\n      section.querySelectorAll(\n        \"[data-h5e-platform]\"\n      )\n    );\n\n  if (tabs.length < 2) return;\n\n\n  const reduceMotion =\n    window.matchMedia(\n      \"(prefers-reduced-motion: reduce)\"\n    ).matches;\n\n\n  if (reduceMotion) return;\n\n\n  const duration = 4800;\n\n  let timer = null;\n  let sectionVisible = false;\n  let userInteracting = false;\n\n\n  function getActiveIndex() {\n\n    const index =\n      tabs.findIndex(function (tab) {\n        return tab.classList.contains(\n          \"is-active\"\n        );\n      });\n\n    return index >= 0 ? index : 0;\n\n  }\n\n\n  function restartProgress() {\n\n    section.classList.remove(\n      \"h5e-platform-autoplay\"\n    );\n\n    void section.offsetWidth;\n\n    section.classList.add(\n      \"h5e-platform-autoplay\"\n    );\n\n  }\n\n\n  function stopAuto() {\n\n    if (timer) {\n      clearInterval(timer);\n      timer = null;\n    }\n\n    section.classList.remove(\n      \"h5e-platform-autoplay\"\n    );\n\n  }\n\n\n  function nextTab() {\n\n    if (\n      !sectionVisible ||\n      userInteracting\n    ) {\n      return;\n    }\n\n\n    const current =\n      getActiveIndex();\n\n\n    const next =\n      (current + 1) %\n      tabs.length;\n\n\n    tabs[next].click();\n\n    restartProgress();\n\n  }\n\n\n  function startAuto() {\n\n    stopAuto();\n\n    if (\n      !sectionVisible ||\n      userInteracting\n    ) {\n      return;\n    }\n\n    restartProgress();\n\n    timer =\n      setInterval(\n        nextTab,\n        duration\n      );\n\n  }\n\n\n  \/* =======================================================\n     VIEWPORT\n  ======================================================= *\/\n\n  if (\n    \"IntersectionObserver\"\n    in window\n  ) {\n\n    const observer =\n      new IntersectionObserver(\n        function (entries) {\n\n          entries.forEach(\n            function (entry) {\n\n              sectionVisible =\n                entry.isIntersecting;\n\n              if (sectionVisible) {\n                startAuto();\n              } else {\n                stopAuto();\n              }\n\n            }\n          );\n\n        },\n        {\n          threshold: .30\n        }\n      );\n\n    observer.observe(section);\n\n  } else {\n\n    sectionVisible = true;\n\n    startAuto();\n\n  }\n\n\n  \/* =======================================================\n     MANUAL CLICK\n  ======================================================= *\/\n\n  tabs.forEach(\n    function (tab) {\n\n      tab.addEventListener(\n        \"click\",\n        function () {\n\n          if (!sectionVisible) return;\n\n          window.setTimeout(\n            startAuto,\n            80\n          );\n\n        }\n      );\n\n    }\n  );\n\n\n  \/* =======================================================\n     DESKTOP HOVER\n  ======================================================= *\/\n\n  section.addEventListener(\n    \"mouseenter\",\n    function () {\n\n      userInteracting = true;\n\n      stopAuto();\n\n    }\n  );\n\n\n  section.addEventListener(\n    \"mouseleave\",\n    function () {\n\n      userInteracting = false;\n\n      startAuto();\n\n    }\n  );\n\n\n  \/* =======================================================\n     KEYBOARD\n  ======================================================= *\/\n\n  section.addEventListener(\n    \"focusin\",\n    function () {\n\n      userInteracting = true;\n\n      stopAuto();\n\n    }\n  );\n\n\n  section.addEventListener(\n    \"focusout\",\n    function () {\n\n      userInteracting = false;\n\n      startAuto();\n\n    }\n  );\n\n\n  \/* =======================================================\n     MOBILE TOUCH\n  ======================================================= *\/\n\n  section.addEventListener(\n    \"touchstart\",\n    function () {\n\n      userInteracting = true;\n\n      stopAuto();\n\n    },\n    {\n      passive: true\n    }\n  );\n\n\n  section.addEventListener(\n    \"touchend\",\n    function () {\n\n      window.setTimeout(\n        function () {\n\n          userInteracting = false;\n\n          startAuto();\n\n        },\n        1200\n      );\n\n    },\n    {\n      passive: true\n    }\n  );\n\n\n})();\n<\/script>\n\n\n\n<div class=\"wp-block-columns alignfull is-layout-flex wp-container-core-columns-is-layout-995f960e wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<style>\n\/* =========================================================\n   FARIZON H5E \u2014 SECTION 03\n   ELECTRIC PERFORMANCE \/ CHARGING\n   PORTRAIT IMAGE OPTIMISED\n========================================================= *\/\n\n.h5e-energy-v2,\n.h5e-energy-v2 *,\n.h5e-energy-v2 *::before,\n.h5e-energy-v2 *::after {\n  box-sizing: border-box;\n}\n\n.h5e-energy-v2 {\n  --orange: #ff6433;\n  --orange-dark: #ef5726;\n  --navy: #263648;\n  --navy-deep: #182634;\n  --navy-soft: #31465d;\n  --text: #5e6672;\n  --muted: #8c95a0;\n  --line: #e3e7eb;\n  --white: #ffffff;\n  --soft: #f6f7f9;\n\n  position: relative;\n\n  width: 100vw;\n  max-width: none;\n\n  margin:\n    0\n    0\n    0\n    calc(50% - 50vw) !important;\n\n  padding:\n    68px\n    24px;\n\n  overflow: hidden;\n\n  background:\n    radial-gradient(\n      circle at 12% 10%,\n      rgba(255,100,51,.06),\n      transparent 20%\n    ),\n    linear-gradient(\n      180deg,\n      #f7f8fa 0%,\n      #ffffff 100%\n    );\n\n  font-family:\n    Inter,\n    Arial,\n    sans-serif;\n\n  scroll-margin-top: 90px;\n}\n\n\n\/* =========================================================\n   BACKGROUND\n========================================================= *\/\n\n.h5e-energy-v2::before {\n  content: \"\";\n\n  position: absolute;\n\n  right: -220px;\n  top: -220px;\n\n  width: 520px;\n  height: 520px;\n\n  border-radius: 50%;\n\n  background:\n    radial-gradient(\n      circle,\n      rgba(38,54,72,.05),\n      transparent 70%\n    );\n\n  pointer-events: none;\n}\n\n\n.h5e-energy-v2__inner {\n  position: relative;\n\n  z-index: 2;\n\n  width: 100%;\n  max-width: 1280px;\n\n  margin: 0 auto;\n}\n\n\n\/* =========================================================\n   TOP\n========================================================= *\/\n\n.h5e-energy-v2__top {\n  display: grid;\n\n  grid-template-columns:\n    minmax(0,1fr)\n    minmax(320px,.78fr);\n\n  gap: 56px;\n\n  align-items: end;\n\n  margin-bottom: 30px;\n}\n\n\n.h5e-energy-v2__eyebrow {\n  display: flex;\n\n  align-items: center;\n\n  gap: 10px;\n\n  margin-bottom: 12px;\n\n  color:\n    var(--orange);\n\n  font-size: 11px;\n  font-weight: 700;\n\n  letter-spacing: 1.5px;\n\n  text-transform: uppercase;\n}\n\n\n.h5e-energy-v2__eyebrow::before {\n  content: \"\";\n\n  width: 34px;\n  height: 2px;\n\n  background:\n    var(--orange);\n}\n\n\n.h5e-energy-v2 h2 {\n  margin: 0;\n\n  max-width: 760px;\n\n  color:\n    var(--navy);\n\n  font-size:\n    clamp(\n      40px,\n      4vw,\n      56px\n    );\n\n  line-height: 1.03;\n\n  font-weight: 700;\n\n  letter-spacing: -1.3px;\n}\n\n\n.h5e-energy-v2 h2 span {\n  display: block;\n\n  color:\n    var(--orange);\n}\n\n\n.h5e-energy-v2__intro {\n  margin: 0;\n\n  max-width: 470px;\n\n  color:\n    var(--text);\n\n  font-size: 14px;\n\n  line-height: 1.8;\n}\n\n\n\/* =========================================================\n   MAIN EXPERIENCE\n========================================================= *\/\n\n.h5e-energy-v2__experience {\n  display: grid;\n\n  grid-template-columns:\n    minmax(0,1.05fr)\n    minmax(380px,.95fr);\n\n  overflow: hidden;\n\n  border:\n    1px solid\n    var(--line);\n\n  background:\n    #ffffff;\n\n  box-shadow:\n    0 22px 60px\n    rgba(38,54,72,.07);\n}\n\n\n\/* =========================================================\n   VISUAL SIDE\n========================================================= *\/\n\n.h5e-energy-v2__visual {\n  position: relative;\n\n  min-height: 690px;\n\n  overflow: hidden;\n\n  background:\n    linear-gradient(\n      180deg,\n      #eef2f5 0%,\n      #e9edf1 100%\n    );\n}\n\n\n.h5e-energy-v2__visual-grid {\n  position: absolute;\n\n  inset: 0;\n\n  background-image:\n    linear-gradient(\n      rgba(38,54,72,.045) 1px,\n      transparent 1px\n    ),\n    linear-gradient(\n      90deg,\n      rgba(38,54,72,.045) 1px,\n      transparent 1px\n    );\n\n  background-size:\n    42px\n    42px;\n\n  mask-image:\n    radial-gradient(\n      circle at center,\n      #000 12%,\n      transparent 88%\n    );\n\n  opacity: .45;\n\n  pointer-events: none;\n}\n\n\n.h5e-energy-v2__glow {\n  position: absolute;\n\n  width: 440px;\n  height: 440px;\n\n  border-radius: 50%;\n\n  left: 50%;\n  bottom: -240px;\n\n  transform:\n    translateX(-50%);\n\n  background:\n    radial-gradient(\n      circle,\n      rgba(255,100,51,.18),\n      transparent 70%\n    );\n\n  animation:\n    h5eV2Glow\n    4.8s\n    ease-in-out\n    infinite;\n\n  pointer-events: none;\n}\n\n\n\/* =========================================================\n   ORBIT\n========================================================= *\/\n\n.h5e-energy-v2__orbit,\n.h5e-energy-v2__orbit::before,\n.h5e-energy-v2__orbit::after {\n  position: absolute;\n\n  border-radius: 50%;\n\n  pointer-events: none;\n}\n\n\n.h5e-energy-v2__orbit {\n  left: 50%;\n  top: 50%;\n\n  width: 500px;\n  height: 500px;\n\n  transform:\n    translate(-50%,-50%);\n\n  border:\n    1px solid\n    rgba(255,100,51,.11);\n\n  animation:\n    h5eV2Spin\n    16s\n    linear\n    infinite;\n}\n\n\n.h5e-energy-v2__orbit::before {\n  content: \"\";\n\n  inset: 38px;\n\n  border:\n    1px dashed\n    rgba(38,54,72,.08);\n}\n\n\n.h5e-energy-v2__orbit::after {\n  content: \"\";\n\n  top: 50%;\n  left: -5px;\n\n  width: 11px;\n  height: 11px;\n\n  background:\n    var(--orange);\n\n  box-shadow:\n    0 0 0 8px\n    rgba(255,100,51,.12);\n}\n\n\n\/* =========================================================\n   VISUAL INNER\n========================================================= *\/\n\n.h5e-energy-v2__visual-inner {\n  position: relative;\n\n  z-index: 2;\n\n  display: flex;\n\n  justify-content: center;\n  align-items: center;\n\n  min-height: 690px;\n\n  padding:\n    40px\n    24px\n    124px;\n}\n\n\n.h5e-energy-v2__portrait-wrap {\n  position: relative;\n\n  width:\n    min(\n      100%,\n      450px\n    );\n\n  max-width:\n    450px;\n}\n\n\n\/* =========================================================\n   PORTRAIT FRAME\n========================================================= *\/\n\n.h5e-energy-v2__portrait-frame {\n  position: relative;\n\n  aspect-ratio:\n    5 \/ 6.5;\n\n  width: 100%;\n\n  overflow: hidden;\n\n  border-radius: 34px;\n\n  border:\n    1px solid\n    rgba(38,54,72,.10);\n\n  background:\n    linear-gradient(\n      180deg,\n      rgba(255,255,255,.9) 0%,\n      rgba(243,246,248,.95) 100%\n    );\n\n  box-shadow:\n    0 14px 36px\n    rgba(38,54,72,.10),\n    inset 0 1px 0\n    rgba(255,255,255,.8);\n\n  transition:\n    transform .45s ease,\n    box-shadow .45s ease;\n}\n\n\n.h5e-energy-v2__experience:hover\n.h5e-energy-v2__portrait-frame {\n  transform:\n    translateY(-4px);\n\n  box-shadow:\n    0 24px 44px\n    rgba(38,54,72,.12),\n    inset 0 1px 0\n    rgba(255,255,255,.8);\n}\n\n\n.h5e-energy-v2__portrait-frame::before {\n  content: \"\";\n\n  position: absolute;\n\n  inset: 14px;\n\n  border-radius: 24px;\n\n  border:\n    1px solid\n    rgba(38,54,72,.06);\n\n  pointer-events: none;\n}\n\n\n.h5e-energy-v2__portrait-media {\n  position: absolute;\n\n  inset: 18px;\n\n  overflow: hidden;\n\n  border-radius: 24px;\n\n  display: flex;\n\n  align-items: center;\n  justify-content: center;\n\n  background:\n    radial-gradient(\n      circle at 50% 25%,\n      rgba(255,255,255,.8),\n      rgba(236,241,244,.92)\n    );\n}\n\n\n.h5e-energy-v2__portrait-media img {\n  display: block;\n\n  width: 100%;\n  height: 100%;\n\n  object-fit: contain;\n\n  object-position:\n    center center;\n\n  transition:\n    transform .55s ease,\n    opacity .32s ease;\n}\n\n\n.h5e-energy-v2__experience.is-switching\n.h5e-energy-v2__portrait-media img {\n  opacity: .18;\n\n  transform:\n    scale(1.03);\n}\n\n\n\/* =========================================================\n   FLOATING INFO\n========================================================= *\/\n\n.h5e-energy-v2__float {\n  position: absolute;\n\n  z-index: 4;\n\n  min-width: 136px;\n  max-width: 190px;\n\n  padding:\n    14px\n    15px;\n\n  border-radius: 18px;\n\n  background:\n    rgba(38,54,72,.92);\n\n  color:\n    #ffffff;\n\n  box-shadow:\n    0 18px 30px\n    rgba(24,38,52,.16);\n\n  backdrop-filter:\n    blur(8px);\n\n  -webkit-backdrop-filter:\n    blur(8px);\n\n  transition:\n    all .3s ease;\n}\n\n\n.h5e-energy-v2__float span {\n  display: block;\n\n  margin-bottom: 4px;\n\n  color:\n    rgba(255,255,255,.42);\n\n  font-size: 9px;\n  font-weight: 700;\n\n  letter-spacing: .9px;\n\n  text-transform: uppercase;\n}\n\n\n.h5e-energy-v2__float strong {\n  display: block;\n\n  color:\n    #ffffff;\n\n  font-size: 15px;\n  font-weight: 700;\n\n  line-height: 1.25;\n}\n\n\n.h5e-energy-v2__float--left {\n  left: -44px;\n  top: 88px;\n\n  animation:\n    h5eV2FloatY\n    4.2s\n    ease-in-out\n    infinite;\n}\n\n\n.h5e-energy-v2__float--right {\n  right: -42px;\n  bottom: 92px;\n\n  animation:\n    h5eV2FloatY\n    4.7s\n    ease-in-out\n    infinite;\n}\n\n\n\/* =========================================================\n   VISUAL TAG\n========================================================= *\/\n\n.h5e-energy-v2__visual-tag {\n  position: absolute;\n\n  z-index: 4;\n\n  left: 26px;\n  top: 26px;\n\n  padding:\n    14px\n    16px;\n\n  background:\n    rgba(38,54,72,.94);\n\n  color:\n    #ffffff;\n\n  border-radius: 16px;\n\n  box-shadow:\n    0 16px 28px\n    rgba(24,38,52,.14);\n}\n\n\n.h5e-energy-v2__visual-tag span {\n  display: block;\n\n  margin-bottom: 4px;\n\n  color:\n    var(--orange);\n\n  font-size: 8px;\n  font-weight: 700;\n\n  letter-spacing: 1px;\n\n  text-transform: uppercase;\n}\n\n\n.h5e-energy-v2__visual-tag strong {\n  display: block;\n\n  font-size: 14px;\n\n  line-height: 1.3;\n\n  font-weight: 700;\n}\n\n\n\/* =========================================================\n   CHARGE BAR\n========================================================= *\/\n\n.h5e-energy-v2__charge {\n  position: absolute;\n\n  z-index: 4;\n\n  left: 28px;\n  right: 28px;\n  bottom: 30px;\n\n  padding:\n    16px\n    18px;\n\n  border-radius: 18px;\n\n  background:\n    rgba(255,255,255,.74);\n\n  border:\n    1px solid\n    rgba(38,54,72,.07);\n\n  box-shadow:\n    0 10px 22px\n    rgba(38,54,72,.08);\n\n  backdrop-filter:\n    blur(6px);\n\n  -webkit-backdrop-filter:\n    blur(6px);\n}\n\n\n.h5e-energy-v2__charge-top {\n  display: flex;\n\n  justify-content: space-between;\n\n  gap: 10px;\n\n  margin-bottom: 10px;\n\n  color:\n    var(--navy);\n\n  font-size: 10px;\n  font-weight: 700;\n\n  letter-spacing: .8px;\n\n  text-transform: uppercase;\n}\n\n\n.h5e-energy-v2__charge-track {\n  position: relative;\n\n  height: 10px;\n\n  border-radius: 999px;\n\n  background:\n    rgba(38,54,72,.10);\n\n  overflow: hidden;\n}\n\n\n.h5e-energy-v2__charge-fill {\n  position: absolute;\n\n  left: 0;\n  top: 0;\n  bottom: 0;\n\n  width: 68%;\n\n  border-radius: 999px;\n\n  background:\n    linear-gradient(\n      90deg,\n      var(--orange),\n      #ff885f\n    );\n\n  box-shadow:\n    0 0 16px\n    rgba(255,100,51,.18);\n\n  transition:\n    width .45s ease;\n}\n\n\n.h5e-energy-v2__charge-track::after {\n  content: \"\";\n\n  position: absolute;\n\n  top: 0;\n  bottom: 0;\n\n  width: 70px;\n\n  left: -70px;\n\n  background:\n    linear-gradient(\n      90deg,\n      transparent,\n      rgba(255,255,255,.4),\n      transparent\n    );\n\n  animation:\n    h5eV2Scan\n    2.6s\n    linear\n    infinite;\n}\n\n\n\/* =========================================================\n   STATUS\n========================================================= *\/\n\n.h5e-energy-v2__status {\n  position: absolute;\n\n  right: 28px;\n  bottom: 82px;\n\n  z-index: 4;\n\n  padding:\n    10px\n    14px;\n\n  border-radius: 999px;\n\n  background:\n    rgba(38,54,72,.92);\n\n  color:\n    #ffffff;\n\n  font-size: 11px;\n  font-weight: 650;\n\n  box-shadow:\n    0 10px 18px\n    rgba(24,38,52,.12);\n}\n\n\n\/* =========================================================\n   RIGHT PANEL\n========================================================= *\/\n\n.h5e-energy-v2__panel {\n  padding:\n    40px\n    34px;\n\n  display: flex;\n\n  flex-direction: column;\n\n  justify-content: center;\n\n  background:\n    linear-gradient(\n      145deg,\n      #263648 0%,\n      #182938 100%\n    );\n\n  color:\n    #ffffff;\n}\n\n\n\/* =========================================================\n   TABS\n========================================================= *\/\n\n.h5e-energy-v2__tabs {\n  display: flex;\n\n  flex-direction: column;\n\n  margin-bottom: 28px;\n\n  border-top:\n    1px solid\n    rgba(255,255,255,.11);\n}\n\n\n.h5e-energy-v2__tab {\n  min-height: 58px;\n\n  padding: 0;\n\n  border: 0;\n\n  border-bottom:\n    1px solid\n    rgba(255,255,255,.11);\n\n  background:\n    transparent;\n\n  color:\n    rgba(255,255,255,.56);\n\n  font-family:\n    inherit;\n\n  display: grid;\n\n  grid-template-columns:\n    28px\n    1fr\n    auto;\n\n  gap: 10px;\n\n  align-items: center;\n\n  cursor: pointer;\n\n  transition:\n    .22s ease;\n}\n\n\n.h5e-energy-v2__tab:hover,\n.h5e-energy-v2__tab.is-active {\n  color:\n    #ffffff;\n\n  background:\n    rgba(255,255,255,.035);\n}\n\n\n.h5e-energy-v2__tab-num {\n  color:\n    var(--orange);\n\n  font-size: 8px;\n\n  font-weight: 700;\n}\n\n\n.h5e-energy-v2__tab strong {\n  color: inherit;\n\n  font-size: 10px;\n\n  font-weight: 650;\n\n  text-align: left;\n}\n\n\n.h5e-energy-v2__tab-dot {\n  width: 7px;\n  height: 7px;\n\n  border-radius: 50%;\n\n  background:\n    rgba(255,255,255,.18);\n\n  transition:\n    .22s ease;\n}\n\n\n.h5e-energy-v2__tab.is-active\n.h5e-energy-v2__tab-dot {\n  background:\n    var(--orange);\n\n  box-shadow:\n    0 0 0 7px\n    rgba(255,100,51,.10);\n}\n\n\n\/* =========================================================\n   CONTENT\n========================================================= *\/\n\n.h5e-energy-v2__mode {\n  margin-bottom: 10px;\n\n  color:\n    var(--orange);\n\n  font-size: 9px;\n\n  font-weight: 700;\n\n  letter-spacing: 1.3px;\n\n  text-transform: uppercase;\n}\n\n\n.h5e-energy-v2__content h3 {\n  margin:\n    0\n    0\n    12px;\n\n  color:\n    #ffffff;\n\n  font-size:\n    clamp(\n      30px,\n      3vw,\n      38px\n    );\n\n  font-weight: 700;\n\n  line-height: 1.08;\n\n  letter-spacing: -.8px;\n\n  max-width: 430px;\n}\n\n\n.h5e-energy-v2__content p {\n  margin:\n    0\n    0\n    20px;\n\n  color:\n    rgba(255,255,255,.66);\n\n  font-size: 11px;\n\n  line-height: 1.72;\n\n  max-width: 450px;\n}\n\n\n.h5e-energy-v2__content.is-animating {\n  animation:\n    h5eV2ContentIn\n    .35s\n    ease\n    both;\n}\n\n\n\/* =========================================================\n   CHIPS\n========================================================= *\/\n\n.h5e-energy-v2__chips {\n  display: flex;\n\n  flex-wrap: wrap;\n\n  gap: 8px;\n}\n\n\n.h5e-energy-v2__chips span {\n  padding:\n    9px\n    11px;\n\n  border:\n    1px solid\n    rgba(255,255,255,.14);\n\n  background:\n    rgba(255,255,255,.035);\n\n  color:\n    rgba(255,255,255,.76);\n\n  font-size: 8px;\n\n  font-weight: 600;\n\n  border-radius: 999px;\n}\n\n\n\/* =========================================================\n   DATA\n========================================================= *\/\n\n.h5e-energy-v2__data {\n  display: grid;\n\n  grid-template-columns:\n    1fr\n    1fr;\n\n  margin-top: 26px;\n\n  border-top:\n    1px solid\n    rgba(255,255,255,.11);\n\n  border-bottom:\n    1px solid\n    rgba(255,255,255,.11);\n}\n\n\n.h5e-energy-v2__data-item {\n  padding:\n    16px\n    0;\n}\n\n\n.h5e-energy-v2__data-item:first-child {\n  padding-right: 16px;\n\n  border-right:\n    1px solid\n    rgba(255,255,255,.11);\n}\n\n\n.h5e-energy-v2__data-item:last-child {\n  padding-left: 16px;\n}\n\n\n.h5e-energy-v2__data-item span {\n  display: block;\n\n  margin-bottom: 5px;\n\n  color:\n    rgba(255,255,255,.30);\n\n  font-size: 7px;\n\n  font-weight: 700;\n\n  letter-spacing: 1px;\n\n  text-transform: uppercase;\n}\n\n\n.h5e-energy-v2__data-item strong {\n  display: block;\n\n  color:\n    #ffffff;\n\n  font-size: 18px;\n\n  font-weight: 700;\n}\n\n\n\/* =========================================================\n   PROMO\n========================================================= *\/\n\n.h5e-energy-v2__promo {\n  margin-top: 18px;\n\n  padding:\n    14px\n    16px;\n\n  border:\n    1px solid\n    rgba(255,100,51,.22);\n\n  background:\n    rgba(255,100,51,.08);\n\n  border-radius: 16px;\n}\n\n\n.h5e-energy-v2__promo span {\n  display: block;\n\n  margin-bottom: 5px;\n\n  color:\n    var(--orange);\n\n  font-size: 7px;\n\n  font-weight: 700;\n\n  letter-spacing: 1px;\n\n  text-transform: uppercase;\n}\n\n\n.h5e-energy-v2__promo strong {\n  display: block;\n\n  margin-bottom: 5px;\n\n  color:\n    #ffffff;\n\n  font-size: 13px;\n\n  font-weight: 700;\n\n  line-height: 1.35;\n}\n\n\n.h5e-energy-v2__promo p {\n  margin: 0;\n\n  color:\n    rgba(255,255,255,.68);\n\n  font-size: 10px;\n\n  line-height: 1.65;\n}\n\n\n.h5e-energy-v2__note {\n  margin-top: 15px;\n\n  color:\n    rgba(255,255,255,.33);\n\n  font-size: 7px;\n\n  line-height: 1.65;\n}\n\n\n\/* =========================================================\n   MODE GLOW\n========================================================= *\/\n\n.h5e-energy-v2__experience.mode-battery\n.h5e-energy-v2__glow {\n  background:\n    radial-gradient(\n      circle,\n      rgba(255,100,51,.16),\n      transparent 70%\n    );\n}\n\n\n.h5e-energy-v2__experience.mode-ac\n.h5e-energy-v2__glow {\n  background:\n    radial-gradient(\n      circle,\n      rgba(73,188,255,.18),\n      transparent 70%\n    );\n}\n\n\n.h5e-energy-v2__experience.mode-dc\n.h5e-energy-v2__glow {\n  background:\n    radial-gradient(\n      circle,\n      rgba(116,255,177,.16),\n      transparent 70%\n    );\n}\n\n\n\/* =========================================================\n   ANIMATION\n========================================================= *\/\n\n@keyframes h5eV2Glow {\n\n  0%,\n  100% {\n    transform:\n      translateX(-50%)\n      scale(.95);\n\n    opacity: .65;\n  }\n\n  50% {\n    transform:\n      translateX(-50%)\n      scale(1.05);\n\n    opacity: 1;\n  }\n\n}\n\n\n@keyframes h5eV2FloatY {\n\n  0%,\n  100% {\n    transform:\n      translateY(0);\n  }\n\n  50% {\n    transform:\n      translateY(-8px);\n  }\n\n}\n\n\n@keyframes h5eV2Spin {\n\n  from {\n    transform:\n      translate(-50%,-50%)\n      rotate(0deg);\n  }\n\n  to {\n    transform:\n      translate(-50%,-50%)\n      rotate(360deg);\n  }\n\n}\n\n\n@keyframes h5eV2Scan {\n\n  from {\n    left: -70px;\n  }\n\n  to {\n    left: 110%;\n  }\n\n}\n\n\n@keyframes h5eV2ContentIn {\n\n  from {\n    opacity: .2;\n\n    transform:\n      translateY(8px);\n  }\n\n  to {\n    opacity: 1;\n\n    transform:\n      translateY(0);\n  }\n\n}\n\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width: 1100px) {\n\n  .h5e-energy-v2__top {\n    gap: 34px;\n  }\n\n\n  .h5e-energy-v2__experience {\n    grid-template-columns:\n      minmax(0,1fr)\n      minmax(350px,.92fr);\n  }\n\n\n  .h5e-energy-v2__float--left {\n    left: -20px;\n  }\n\n\n  .h5e-energy-v2__float--right {\n    right: -20px;\n  }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width: 767px) {\n\n  .h5e-energy-v2 {\n    padding:\n      46px\n      16px;\n  }\n\n\n  .h5e-energy-v2__top {\n    display: block;\n\n    margin-bottom: 22px;\n  }\n\n\n  .h5e-energy-v2__eyebrow {\n    margin-bottom: 10px;\n\n    font-size: 9px;\n  }\n\n\n  .h5e-energy-v2 h2 {\n    margin-bottom: 12px;\n\n    font-size: 34px;\n\n    line-height: 1.05;\n\n    letter-spacing: -.8px;\n  }\n\n\n  .h5e-energy-v2__intro {\n    font-size: 12px;\n\n    line-height: 1.65;\n\n    max-width: 100%;\n  }\n\n\n  .h5e-energy-v2__experience {\n    display: flex;\n\n    flex-direction: column;\n  }\n\n\n  .h5e-energy-v2__visual {\n    min-height: 0;\n  }\n\n\n  .h5e-energy-v2__visual-inner {\n    min-height: 520px;\n\n    padding:\n      24px\n      18px\n      116px;\n  }\n\n\n  .h5e-energy-v2__portrait-wrap {\n    max-width: 320px;\n  }\n\n\n  .h5e-energy-v2__portrait-frame {\n    border-radius: 26px;\n  }\n\n\n  .h5e-energy-v2__portrait-media {\n    inset: 14px;\n\n    border-radius: 18px;\n  }\n\n\n  .h5e-energy-v2__orbit {\n    width: 330px;\n    height: 330px;\n  }\n\n\n  .h5e-energy-v2__visual-tag {\n    top: 16px;\n    left: 16px;\n\n    padding:\n      10px\n      12px;\n\n    border-radius: 14px;\n  }\n\n\n  .h5e-energy-v2__visual-tag strong {\n    font-size: 12px;\n  }\n\n\n  .h5e-energy-v2__float {\n    min-width: 116px;\n\n    padding:\n      10px\n      12px;\n\n    border-radius: 14px;\n  }\n\n\n  .h5e-energy-v2__float strong {\n    font-size: 12px;\n  }\n\n\n  .h5e-energy-v2__float--left {\n    left: 4px;\n\n    top: 94px;\n  }\n\n\n  .h5e-energy-v2__float--right {\n    right: 4px;\n\n    bottom: 92px;\n  }\n\n\n  .h5e-energy-v2__charge {\n    left: 16px;\n    right: 16px;\n    bottom: 18px;\n\n    padding: 14px;\n\n    border-radius: 14px;\n  }\n\n\n  .h5e-energy-v2__charge-top {\n    font-size: 8px;\n  }\n\n\n  .h5e-energy-v2__status {\n    right: 16px;\n    bottom: 72px;\n\n    font-size: 10px;\n\n    padding:\n      8px\n      11px;\n  }\n\n\n  .h5e-energy-v2__panel {\n    padding:\n      28px\n      20px\n      30px;\n  }\n\n\n  .h5e-energy-v2__tabs {\n    display: grid;\n\n    grid-template-columns:\n      repeat(3,1fr);\n\n    border:\n      1px solid\n      rgba(255,255,255,.11);\n\n    margin-bottom: 24px;\n  }\n\n\n  .h5e-energy-v2__tab {\n    min-height: 66px;\n\n    display: flex;\n\n    flex-direction: column;\n\n    align-items: flex-start;\n    justify-content: center;\n\n    gap: 3px;\n\n    padding:\n      0\n      8px;\n\n    border-bottom: 0;\n\n    border-right:\n      1px solid\n      rgba(255,255,255,.11);\n  }\n\n\n  .h5e-energy-v2__tab:last-child {\n    border-right: 0;\n  }\n\n\n  .h5e-energy-v2__tab strong {\n    font-size: 8px;\n\n    line-height: 1.3;\n  }\n\n\n  .h5e-energy-v2__tab-dot {\n    display: none;\n  }\n\n\n  .h5e-energy-v2__content h3 {\n    font-size: 28px;\n  }\n\n\n  .h5e-energy-v2__chips span {\n    font-size: 8px;\n  }\n\n}\n\n\n\/* =========================================================\n   SMALL MOBILE\n========================================================= *\/\n\n@media (max-width: 380px) {\n\n  .h5e-energy-v2 h2 {\n    font-size: 31px;\n  }\n\n\n  .h5e-energy-v2__visual-inner {\n    min-height: 490px;\n  }\n\n\n  .h5e-energy-v2__portrait-wrap {\n    max-width: 292px;\n  }\n\n}\n\n\n\/* =========================================================\n   ACCESSIBILITY\n========================================================= *\/\n\n.h5e-energy-v2 button:focus-visible {\n  outline:\n    2px solid\n    var(--orange);\n\n  outline-offset: -3px;\n}\n\n\n@media (prefers-reduced-motion: reduce) {\n\n  .h5e-energy-v2 *,\n  .h5e-energy-v2 *::before,\n  .h5e-energy-v2 *::after {\n    animation: none !important;\n\n    transition: none !important;\n  }\n\n}\n<\/style>\n\n\n<section\n  class=\"h5e-energy-v2\"\n  id=\"h5e-energy\">\n\n\n  <div class=\"h5e-energy-v2__inner\">\n\n\n    <!-- =====================================================\n         HEADER\n    ====================================================== -->\n\n    <div class=\"h5e-energy-v2__top\">\n\n\n      <div>\n\n\n        <div class=\"h5e-energy-v2__eyebrow\">\n          Electric Performance & Charging\n        <\/div>\n\n\n        <h2>\n\n          Electric Power Built\n\n          <span>\n            for the Working Day.\n          <\/span>\n\n        <\/h2>\n\n\n      <\/div>\n\n\n\n      <p class=\"h5e-energy-v2__intro\">\n        From battery capacity to charging practicality,\n        the Farizon H5E is designed to support daily business\n        operations with an electric powertrain made for\n        logistics, distribution and commercial use.\n      <\/p>\n\n\n    <\/div>\n\n\n\n    <!-- =====================================================\n         EXPERIENCE\n    ====================================================== -->\n\n    <div\n      class=\"h5e-energy-v2__experience mode-battery\"\n      id=\"h5e-energy-v2-experience\">\n\n\n      <!-- ===================================================\n           LEFT VISUAL\n      ==================================================== -->\n\n      <div class=\"h5e-energy-v2__visual\">\n\n\n        <div class=\"h5e-energy-v2__visual-grid\"><\/div>\n\n\n        <div class=\"h5e-energy-v2__glow\"><\/div>\n\n\n        <div class=\"h5e-energy-v2__orbit\"><\/div>\n\n\n\n        <div class=\"h5e-energy-v2__visual-inner\">\n\n\n          <div class=\"h5e-energy-v2__portrait-wrap\">\n\n\n            <!-- SELECTED VIEW -->\n\n            <div class=\"h5e-energy-v2__visual-tag\">\n\n\n              <span>\n                Selected View\n              <\/span>\n\n\n              <strong id=\"h5e-energy-v2-tag\">\n                100.46kWh CATL LFP Battery\n              <\/strong>\n\n\n            <\/div>\n\n\n\n            <!-- FLOAT LEFT -->\n\n            <div\n              class=\"h5e-energy-v2__float h5e-energy-v2__float--left\">\n\n\n              <span id=\"h5e-energy-v2-float1-label\">\n                Key Focus\n              <\/span>\n\n\n              <strong id=\"h5e-energy-v2-float1\">\n                Battery Capacity\n              <\/strong>\n\n\n            <\/div>\n\n\n\n            <!-- FLOAT RIGHT -->\n\n            <div\n              class=\"h5e-energy-v2__float h5e-energy-v2__float--right\">\n\n\n              <span id=\"h5e-energy-v2-float2-label\">\n                Business Value\n              <\/span>\n\n\n              <strong id=\"h5e-energy-v2-float2\">\n                Commercial EV Readiness\n              <\/strong>\n\n\n            <\/div>\n\n\n\n            <!-- IMAGE -->\n\n            <div class=\"h5e-energy-v2__portrait-frame\">\n\n\n              <div class=\"h5e-energy-v2__portrait-media\">\n\n\n                <img\n                  id=\"h5e-energy-v2-image\"\n                  src=\"https:\/\/farizon.com.sg\/wp-content\/uploads\/2026\/10\/black-ac-per-6-1.png\"\n                  alt=\"Farizon H5E battery system\"\n                  loading=\"lazy\"\n                  decoding=\"async\">\n\n\n              <\/div>\n\n\n            <\/div>\n\n\n          <\/div>\n\n\n        <\/div>\n\n\n\n        <!-- STATUS -->\n\n        <div\n          class=\"h5e-energy-v2__status\"\n          id=\"h5e-energy-v2-status\">\n\n          Battery System\n\n        <\/div>\n\n\n\n        <!-- CHARGE \/ ENERGY BAR -->\n\n        <div class=\"h5e-energy-v2__charge\">\n\n\n          <div class=\"h5e-energy-v2__charge-top\">\n\n\n            <span id=\"h5e-energy-v2-charge-left\">\n              Battery System\n            <\/span>\n\n\n            <span id=\"h5e-energy-v2-charge-right\">\n              100.46kWh\n            <\/span>\n\n\n          <\/div>\n\n\n\n          <div class=\"h5e-energy-v2__charge-track\">\n\n\n            <div\n              class=\"h5e-energy-v2__charge-fill\"\n              id=\"h5e-energy-v2-fill\"\n              style=\"width:82%;\">\n            <\/div>\n\n\n          <\/div>\n\n\n        <\/div>\n\n\n      <\/div>\n\n\n\n      <!-- ===================================================\n           RIGHT PANEL\n      ==================================================== -->\n\n      <div class=\"h5e-energy-v2__panel\">\n\n\n        <!-- TABS -->\n\n        <div class=\"h5e-energy-v2__tabs\">\n\n\n          <button\n            class=\"h5e-energy-v2__tab is-active\"\n            type=\"button\"\n            data-h5e-tab=\"battery\">\n\n            <span class=\"h5e-energy-v2__tab-num\">\n              01\n            <\/span>\n\n            <strong>\n              Battery\n            <\/strong>\n\n            <span class=\"h5e-energy-v2__tab-dot\"><\/span>\n\n          <\/button>\n\n\n\n          <button\n            class=\"h5e-energy-v2__tab\"\n            type=\"button\"\n            data-h5e-tab=\"ac\">\n\n            <span class=\"h5e-energy-v2__tab-num\">\n              02\n            <\/span>\n\n            <strong>\n              AC Charging\n            <\/strong>\n\n            <span class=\"h5e-energy-v2__tab-dot\"><\/span>\n\n          <\/button>\n\n\n\n          <button\n            class=\"h5e-energy-v2__tab\"\n            type=\"button\"\n            data-h5e-tab=\"dc\">\n\n            <span class=\"h5e-energy-v2__tab-num\">\n              03\n            <\/span>\n\n            <strong>\n              DC Fast Charging\n            <\/strong>\n\n            <span class=\"h5e-energy-v2__tab-dot\"><\/span>\n\n          <\/button>\n\n\n        <\/div>\n\n\n\n        <!-- CONTENT -->\n\n        <div\n          class=\"h5e-energy-v2__content\"\n          id=\"h5e-energy-v2-content\">\n\n\n          <div\n            class=\"h5e-energy-v2__mode\"\n            id=\"h5e-energy-v2-mode\">\n\n            Electric Commercial Power\n\n          <\/div>\n\n\n\n          <h3 id=\"h5e-energy-v2-title\">\n            A 100.46kWh Battery Built for Business Use.\n          <\/h3>\n\n\n\n          <p id=\"h5e-energy-v2-description\">\n            The H5E uses a 100.46kWh CATL LFP battery system\n            paired with a 140kW motor, giving businesses\n            practical electric performance for logistics,\n            distribution and day-to-day commercial operations.\n          <\/p>\n\n\n\n          <div\n            class=\"h5e-energy-v2__chips\"\n            id=\"h5e-energy-v2-chips\">\n\n\n            <span>\n              100.46kWh Battery\n            <\/span>\n\n\n            <span>\n              CATL LFP\n            <\/span>\n\n\n            <span>\n              140kW Motor\n            <\/span>\n\n\n            <span>\n              Commercial EV\n            <\/span>\n\n\n          <\/div>\n\n\n        <\/div>\n\n\n\n        <!-- DATA -->\n\n        <div class=\"h5e-energy-v2__data\">\n\n\n          <div class=\"h5e-energy-v2__data-item\">\n\n\n            <span id=\"h5e-energy-v2-data1-label\">\n              Battery Capacity\n            <\/span>\n\n\n            <strong id=\"h5e-energy-v2-data1\">\n              100.46kWh\n            <\/strong>\n\n\n          <\/div>\n\n\n\n          <div class=\"h5e-energy-v2__data-item\">\n\n\n            <span id=\"h5e-energy-v2-data2-label\">\n              Motor Output\n            <\/span>\n\n\n            <strong id=\"h5e-energy-v2-data2\">\n              140kW\n            <\/strong>\n\n\n          <\/div>\n\n\n        <\/div>\n\n\n\n        <!-- PROMO -->\n\n        <div\n          class=\"h5e-energy-v2__promo\"\n          id=\"h5e-energy-v2-promo\">\n\n\n          <span>\n            Charging Support\n          <\/span>\n\n\n          <strong>\n            Complimentary NEC 22kW Charger\n          <\/strong>\n\n\n          <p>\n            Included while stocks last to help businesses\n            get started with practical AC charging support\n            for daily operations.\n          <\/p>\n\n\n        <\/div>\n\n\n\n        <div class=\"h5e-energy-v2__note\">\n          Charging figures and operating performance may vary\n          depending on charging setup, route condition,\n          load condition and business usage environment.\n        <\/div>\n\n\n      <\/div>\n\n\n    <\/div>\n\n\n  <\/div>\n\n\n<\/section>\n\n\n<script>\n(function () {\n\n  const root =\n    document.getElementById(\n      \"h5e-energy\"\n    );\n\n\n  if (!root) {\n    return;\n  }\n\n\n  const experience =\n    document.getElementById(\n      \"h5e-energy-v2-experience\"\n    );\n\n\n  const tabs =\n    root.querySelectorAll(\n      \"[data-h5e-tab]\"\n    );\n\n\n  const image =\n    document.getElementById(\n      \"h5e-energy-v2-image\"\n    );\n\n\n  const tag =\n    document.getElementById(\n      \"h5e-energy-v2-tag\"\n    );\n\n\n  const status =\n    document.getElementById(\n      \"h5e-energy-v2-status\"\n    );\n\n\n  const fill =\n    document.getElementById(\n      \"h5e-energy-v2-fill\"\n    );\n\n\n  const chargeLeft =\n    document.getElementById(\n      \"h5e-energy-v2-charge-left\"\n    );\n\n\n  const chargeRight =\n    document.getElementById(\n      \"h5e-energy-v2-charge-right\"\n    );\n\n\n  const float1Label =\n    document.getElementById(\n      \"h5e-energy-v2-float1-label\"\n    );\n\n\n  const float1 =\n    document.getElementById(\n      \"h5e-energy-v2-float1\"\n    );\n\n\n  const float2Label =\n    document.getElementById(\n      \"h5e-energy-v2-float2-label\"\n    );\n\n\n  const float2 =\n    document.getElementById(\n      \"h5e-energy-v2-float2\"\n    );\n\n\n  const content =\n    document.getElementById(\n      \"h5e-energy-v2-content\"\n    );\n\n\n  const mode =\n    document.getElementById(\n      \"h5e-energy-v2-mode\"\n    );\n\n\n  const title =\n    document.getElementById(\n      \"h5e-energy-v2-title\"\n    );\n\n\n  const description =\n    document.getElementById(\n      \"h5e-energy-v2-description\"\n    );\n\n\n  const chips =\n    document.getElementById(\n      \"h5e-energy-v2-chips\"\n    );\n\n\n  const data1Label =\n    document.getElementById(\n      \"h5e-energy-v2-data1-label\"\n    );\n\n\n  const data1 =\n    document.getElementById(\n      \"h5e-energy-v2-data1\"\n    );\n\n\n  const data2Label =\n    document.getElementById(\n      \"h5e-energy-v2-data2-label\"\n    );\n\n\n  const data2 =\n    document.getElementById(\n      \"h5e-energy-v2-data2\"\n    );\n\n\n  const promo =\n    document.getElementById(\n      \"h5e-energy-v2-promo\"\n    );\n\n\n\n  \/* =========================================================\n     TAB CONTENT\n  ========================================================= *\/\n\n  const tabData = {\n\n\n    battery: {\n\n      modeClass:\n        \"mode-battery\",\n\n      image:\n        \"https:\/\/farizon.com.sg\/wp-content\/uploads\/2026\/10\/black-ac-per-6-1.png\",\n\n      alt:\n        \"Farizon H5E battery system\",\n\n      tag:\n        \"100.46kWh CATL LFP Battery\",\n\n      status:\n        \"Battery System\",\n\n      chargeLeft:\n        \"Battery System\",\n\n      chargeRight:\n        \"100.46kWh\",\n\n      chargeWidth:\n        \"82%\",\n\n      float1Label:\n        \"Key Focus\",\n\n      float1:\n        \"Battery Capacity\",\n\n      float2Label:\n        \"Business Value\",\n\n      float2:\n        \"Commercial EV Readiness\",\n\n      mode:\n        \"Electric Commercial Power\",\n\n      title:\n        \"A 100.46kWh Battery Built for Business Use.\",\n\n      description:\n        \"The H5E uses a 100.46kWh CATL LFP battery system paired with a 140kW motor, giving businesses practical electric performance for logistics, distribution and day-to-day commercial operations.\",\n\n      chips:\n        [\n          \"100.46kWh Battery\",\n          \"CATL LFP\",\n          \"140kW Motor\",\n          \"Commercial EV\"\n        ],\n\n      data1Label:\n        \"Battery Capacity\",\n\n      data1:\n        \"100.46kWh\",\n\n      data2Label:\n        \"Motor Output\",\n\n      data2:\n        \"140kW\",\n\n      promoLabel:\n        \"Charging Support\",\n\n      promoTitle:\n        \"Complimentary NEC 22kW Charger\",\n\n      promoText:\n        \"Included while stocks last to help businesses get started with practical AC charging support for daily operations.\"\n\n    },\n\n\n\n    ac: {\n\n      modeClass:\n        \"mode-ac\",\n\n      image:\n        \"https:\/\/farizon.com.sg\/wp-content\/uploads\/2026\/10\/20260126_073541684_iOS-1-scaled.jpg\",\n\n      alt:\n        \"Farizon H5E charging port for AC charging\",\n\n      tag:\n        \"22kW AC Charging\",\n\n      status:\n        \"Depot \/ Daily Charging\",\n\n      chargeLeft:\n        \"AC Charging\",\n\n      chargeRight:\n        \"22kW\",\n\n      chargeWidth:\n        \"54%\",\n\n      float1Label:\n        \"Charging Type\",\n\n      float1:\n        \"CCS2 Compatible\",\n\n      float2Label:\n        \"Use Case\",\n\n      float2:\n        \"Daily Fleet Charging\",\n\n      mode:\n        \"Daily Charging Practicality\",\n\n      title:\n        \"Convenient AC Charging for Daily Fleet Use.\",\n\n      description:\n        \"With 22kW AC charging capability and CCS2 compatibility, the H5E supports practical overnight or depot charging for businesses running regular daily routes.\",\n\n      chips:\n        [\n          \"22kW AC\",\n          \"CCS2\",\n          \"Depot Charging\",\n          \"Business Ready\"\n        ],\n\n      data1Label:\n        \"AC Charging\",\n\n      data1:\n        \"22kW\",\n\n      data2Label:\n        \"Connector Type\",\n\n      data2:\n        \"CCS2\",\n\n      promoLabel:\n        \"Charging Support\",\n\n      promoTitle:\n        \"Complimentary NEC 22kW Charger\",\n\n      promoText:\n        \"A complimentary NEC 22kW charger is available while stocks last, helping businesses set up practical charging support more easily.\"\n\n    },\n\n\n\n    dc: {\n\n      modeClass:\n        \"mode-dc\",\n\n      image:\n        \"https:\/\/farizon.com.sg\/wp-content\/uploads\/2026\/10\/20260126_073541684_iOS-1-scaled.jpg\",\n\n      alt:\n        \"Farizon H5E charging port for DC fast charging\",\n\n      tag:\n        \"Up to 100kW DC Fast Charging\",\n\n      status:\n        \"Fast Turnaround Charging\",\n\n      chargeLeft:\n        \"20% to 80%\",\n\n      chargeRight:\n        \"Approx. 30 min\",\n\n      chargeWidth:\n        \"80%\",\n\n      float1Label:\n        \"Charging Type\",\n\n      float1:\n        \"Up to 100kW DC\",\n\n      float2Label:\n        \"Operational Benefit\",\n\n      float2:\n        \"Less Downtime\",\n\n      mode:\n        \"Operational Charging Efficiency\",\n\n      title:\n        \"Fast Charging Support for Quicker Turnaround.\",\n\n      description:\n        \"The H5E supports up to 100kW DC fast charging, allowing charging from 20% to 80% in around 30 minutes to support operational efficiency between jobs.\",\n\n      chips:\n        [\n          \"Up to 100kW DC\",\n          \"20\u201380% ~30 min\",\n          \"CCS2\",\n          \"Fleet Efficiency\"\n        ],\n\n      data1Label:\n        \"DC Fast Charging\",\n\n      data1:\n        \"Up to 100kW\",\n\n      data2Label:\n        \"Charging Time\",\n\n      data2:\n        \"20\u201380% ~30 min\",\n\n      promoLabel:\n        \"Business Benefit\",\n\n      promoTitle:\n        \"Fast Charging for Working Schedules\",\n\n      promoText:\n        \"DC fast charging supports quicker turnaround between routes, helping reduce downtime across daily commercial operations.\"\n\n    }\n\n\n  };\n\n\n\n  \/* =========================================================\n     CHIPS\n  ========================================================= *\/\n\n  function renderChips(\n    list\n  ) {\n\n\n    chips.innerHTML =\n      \"\";\n\n\n    list.forEach(\n      function (item) {\n\n\n        const span =\n          document.createElement(\n            \"span\"\n          );\n\n\n        span.textContent =\n          item;\n\n\n        chips.appendChild(\n          span\n        );\n\n\n      }\n    );\n\n\n  }\n\n\n\n  \/* =========================================================\n     PROMO\n  ========================================================= *\/\n\n  function renderPromo(\n    label,\n    titleText,\n    text\n  ) {\n\n\n    promo.innerHTML =\n      \"<span>\" +\n      label +\n      \"<\/span>\" +\n\n      \"<strong>\" +\n      titleText +\n      \"<\/strong>\" +\n\n      \"<p>\" +\n      text +\n      \"<\/p>\";\n\n\n  }\n\n\n\n  \/* =========================================================\n     CHANGE MODE\n  ========================================================= *\/\n\n  function setMode(\n    key\n  ) {\n\n\n    const data =\n      tabData[key];\n\n\n    if (!data) {\n      return;\n    }\n\n\n    experience.classList.add(\n      \"is-switching\"\n    );\n\n\n    experience.classList.remove(\n      \"mode-battery\",\n      \"mode-ac\",\n      \"mode-dc\"\n    );\n\n\n    experience.classList.add(\n      data.modeClass\n    );\n\n\n\n    tabs.forEach(\n      function (tab) {\n\n\n        tab.classList.toggle(\n          \"is-active\",\n          tab.getAttribute(\n            \"data-h5e-tab\"\n          ) === key\n        );\n\n\n      }\n    );\n\n\n\n    window.setTimeout(\n      function () {\n\n\n        image.src =\n          data.image;\n\n\n        image.alt =\n          data.alt;\n\n\n        tag.textContent =\n          data.tag;\n\n\n        status.textContent =\n          data.status;\n\n\n        chargeLeft.textContent =\n          data.chargeLeft;\n\n\n        chargeRight.textContent =\n          data.chargeRight;\n\n\n        fill.style.width =\n          data.chargeWidth;\n\n\n        float1Label.textContent =\n          data.float1Label;\n\n\n        float1.textContent =\n          data.float1;\n\n\n        float2Label.textContent =\n          data.float2Label;\n\n\n        float2.textContent =\n          data.float2;\n\n\n        mode.textContent =\n          data.mode;\n\n\n        title.textContent =\n          data.title;\n\n\n        description.textContent =\n          data.description;\n\n\n        renderChips(\n          data.chips\n        );\n\n\n        data1Label.textContent =\n          data.data1Label;\n\n\n        data1.textContent =\n          data.data1;\n\n\n        data2Label.textContent =\n          data.data2Label;\n\n\n        data2.textContent =\n          data.data2;\n\n\n        renderPromo(\n          data.promoLabel,\n          data.promoTitle,\n          data.promoText\n        );\n\n\n        content.classList.remove(\n          \"is-animating\"\n        );\n\n\n        void content.offsetWidth;\n\n\n        content.classList.add(\n          \"is-animating\"\n        );\n\n\n      },\n      130\n    );\n\n\n\n    image.onload =\n      function () {\n\n\n        experience.classList.remove(\n          \"is-switching\"\n        );\n\n\n      };\n\n\n\n    window.setTimeout(\n      function () {\n\n\n        experience.classList.remove(\n          \"is-switching\"\n        );\n\n\n      },\n      700\n    );\n\n\n  }\n\n\n\n  \/* =========================================================\n     TAB CLICK\n  ========================================================= *\/\n\n  tabs.forEach(\n    function (tab) {\n\n\n      tab.addEventListener(\n        \"click\",\n        function () {\n\n\n          const key =\n            tab.getAttribute(\n              \"data-h5e-tab\"\n            );\n\n\n          setMode(\n            key\n          );\n\n\n        }\n      );\n\n\n    }\n  );\n\n\n\n  \/* =========================================================\n     PRELOAD\n  ========================================================= *\/\n\n  Object.keys(\n    tabData\n  ).forEach(\n    function (key) {\n\n\n      const preload =\n        new Image();\n\n\n      preload.src =\n        tabData[key].image;\n\n\n    }\n  );\n\n\n})();\n<\/script>\n<\/div>\n<\/div>\n\n\n\n<style>\n\/* =========================================================\n   H5E SECTION 3 \u2014 AUTO TAB PROGRESS\n========================================================= *\/\n\n#h5e-energy .h5e-energy-v2__tab {\n  position: relative;\n  overflow: hidden;\n}\n\n#h5e-energy .h5e-energy-v2__tab::after {\n  content: \"\";\n\n  position: absolute;\n\n  left: 0;\n  bottom: 0;\n\n  width: 0;\n  height: 2px;\n\n  background:\n    #ff6433;\n\n  opacity: 0;\n}\n\n#h5e-energy.h5e-energy-autoplay\n.h5e-energy-v2__tab.is-active::after {\n  opacity: 1;\n\n  animation:\n    h5eEnergyTabProgress\n    4.8s\n    linear\n    forwards;\n}\n\n@keyframes h5eEnergyTabProgress {\n\n  from {\n    width: 0;\n  }\n\n  to {\n    width: 100%;\n  }\n\n}\n\n@media (prefers-reduced-motion: reduce) {\n\n  #h5e-energy\n  .h5e-energy-v2__tab::after {\n    display: none !important;\n  }\n\n}\n<\/style>\n\n\n<script>\n(function () {\n\n  const section =\n    document.getElementById(\n      \"h5e-energy\"\n    );\n\n\n  if (!section) {\n    return;\n  }\n\n\n  const tabs =\n    Array.from(\n      section.querySelectorAll(\n        \"[data-h5e-tab]\"\n      )\n    );\n\n\n  if (tabs.length < 2) {\n    return;\n  }\n\n\n  const reduceMotion =\n    window.matchMedia(\n      \"(prefers-reduced-motion: reduce)\"\n    ).matches;\n\n\n  if (reduceMotion) {\n    return;\n  }\n\n\n  const duration =\n    4800;\n\n\n  let timer =\n    null;\n\n\n  let sectionVisible =\n    false;\n\n\n  let userInteracting =\n    false;\n\n\n\n  function getActiveIndex() {\n\n\n    const index =\n      tabs.findIndex(\n        function (tab) {\n\n\n          return tab.classList.contains(\n            \"is-active\"\n          );\n\n\n        }\n      );\n\n\n    return index >= 0\n      ? index\n      : 0;\n\n\n  }\n\n\n\n  function restartProgress() {\n\n\n    section.classList.remove(\n      \"h5e-energy-autoplay\"\n    );\n\n\n    void section.offsetWidth;\n\n\n    section.classList.add(\n      \"h5e-energy-autoplay\"\n    );\n\n\n  }\n\n\n\n  function stopAuto() {\n\n\n    if (timer) {\n\n\n      clearInterval(\n        timer\n      );\n\n\n      timer =\n        null;\n\n\n    }\n\n\n    section.classList.remove(\n      \"h5e-energy-autoplay\"\n    );\n\n\n  }\n\n\n\n  function nextTab() {\n\n\n    if (\n      !sectionVisible ||\n      userInteracting\n    ) {\n      return;\n    }\n\n\n    const current =\n      getActiveIndex();\n\n\n    const next =\n      (\n        current + 1\n      ) %\n      tabs.length;\n\n\n    tabs[next].click();\n\n\n    restartProgress();\n\n\n  }\n\n\n\n  function startAuto() {\n\n\n    stopAuto();\n\n\n    if (\n      !sectionVisible ||\n      userInteracting\n    ) {\n      return;\n    }\n\n\n    restartProgress();\n\n\n    timer =\n      setInterval(\n        nextTab,\n        duration\n      );\n\n\n  }\n\n\n\n  \/* =========================================================\n     VIEWPORT\n  ========================================================= *\/\n\n  if (\n    \"IntersectionObserver\"\n    in window\n  ) {\n\n\n    const observer =\n      new IntersectionObserver(\n        function (entries) {\n\n\n          entries.forEach(\n            function (entry) {\n\n\n              sectionVisible =\n                entry.isIntersecting;\n\n\n              if (\n                sectionVisible\n              ) {\n\n\n                startAuto();\n\n\n              } else {\n\n\n                stopAuto();\n\n\n              }\n\n\n            }\n          );\n\n\n        },\n        {\n          threshold: .30\n        }\n      );\n\n\n    observer.observe(\n      section\n    );\n\n\n  } else {\n\n\n    sectionVisible =\n      true;\n\n\n    startAuto();\n\n\n  }\n\n\n\n  \/* =========================================================\n     MANUAL TAB CLICK\n  ========================================================= *\/\n\n  tabs.forEach(\n    function (tab) {\n\n\n      tab.addEventListener(\n        \"click\",\n        function () {\n\n\n          if (\n            !sectionVisible\n          ) {\n            return;\n          }\n\n\n          window.setTimeout(\n            startAuto,\n            80\n          );\n\n\n        }\n      );\n\n\n    }\n  );\n\n\n\n  \/* =========================================================\n     HOVER\n  ========================================================= *\/\n\n  section.addEventListener(\n    \"mouseenter\",\n    function () {\n\n\n      userInteracting =\n        true;\n\n\n      stopAuto();\n\n\n    }\n  );\n\n\n  section.addEventListener(\n    \"mouseleave\",\n    function () {\n\n\n      userInteracting =\n        false;\n\n\n      startAuto();\n\n\n    }\n  );\n\n\n\n  \/* =========================================================\n     KEYBOARD\n  ========================================================= *\/\n\n  section.addEventListener(\n    \"focusin\",\n    function () {\n\n\n      userInteracting =\n        true;\n\n\n      stopAuto();\n\n\n    }\n  );\n\n\n  section.addEventListener(\n    \"focusout\",\n    function () {\n\n\n      userInteracting =\n        false;\n\n\n      startAuto();\n\n\n    }\n  );\n\n\n\n  \/* =========================================================\n     MOBILE\n  ========================================================= *\/\n\n  section.addEventListener(\n    \"touchstart\",\n    function () {\n\n\n      userInteracting =\n        true;\n\n\n      stopAuto();\n\n\n    },\n    {\n      passive: true\n    }\n  );\n\n\n  section.addEventListener(\n    \"touchend\",\n    function () {\n\n\n      window.setTimeout(\n        function () {\n\n\n          userInteracting =\n            false;\n\n\n          startAuto();\n\n\n        },\n        1200\n      );\n\n\n    },\n    {\n      passive: true\n    }\n  );\n\n\n})();\n<\/script>\n\n\n\n<style>\n\/* =========================================================\n   H5E SECTION 3 \u2014 STATUS BADGE FIX\n   Hide duplicate status badge on Battery mode only\n========================================================= *\/\n\n#h5e-energy-v2-experience.mode-battery\n.h5e-energy-v2__status {\n  opacity: 0 !important;\n  visibility: hidden !important;\n  transform: translateY(8px) !important;\n  pointer-events: none !important;\n}\n\n\n\/* AC \/ DC \u2014 show status badge normally *\/\n\n#h5e-energy-v2-experience.mode-ac\n.h5e-energy-v2__status,\n#h5e-energy-v2-experience.mode-dc\n.h5e-energy-v2__status {\n  opacity: 1 !important;\n  visibility: visible !important;\n  transform: translateY(0) !important;\n  pointer-events: auto !important;\n}\n\n\n\/* Smooth transition *\/\n\n.h5e-energy-v2__status {\n  transition:\n    opacity .3s ease,\n    transform .3s ease,\n    visibility .3s ease !important;\n}\n<\/style>\n\n\n\n<style>\n\/* =========================================================\n   H5E SECTION 3\n   REMOVE DUPLICATE FLOATING STATUS BADGE\n   Applies to Battery \/ AC \/ DC\n========================================================= *\/\n\n#h5e-energy .h5e-energy-v2__status {\n  display: none !important;\n}\n<\/style>\n\n\n\n<div class=\"wp-block-columns alignfull is-layout-flex wp-container-core-columns-is-layout-995f960e wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<style>\n\/* =========================================================\n   FARIZON H5E\n   SECTION 04 \u2014 ADAS & DRIVER CONFIDENCE\n   3-PHOTO AUTO GALLERY VERSION\n========================================================= *\/\n\n.h5e-safety,\n.h5e-safety *,\n.h5e-safety *::before,\n.h5e-safety *::after {\n  box-sizing: border-box;\n}\n\n.h5e-safety {\n  --orange: #ff6433;\n  --orange-hover: #e95428;\n  --navy: #263648;\n  --deep: #152433;\n  --deep-2: #1c2d3f;\n  --white: #ffffff;\n  --text-light: rgba(255,255,255,.66);\n  --line-light: rgba(255,255,255,.11);\n\n  position: relative;\n\n  width: 100vw;\n  max-width: none;\n\n  margin:\n    0\n    0\n    0\n    calc(50% - 50vw) !important;\n\n  padding:\n    68px\n    24px;\n\n  overflow: hidden;\n\n  background:\n    radial-gradient(\n      circle at 85% 20%,\n      rgba(255,100,51,.10),\n      transparent 24%\n    ),\n    linear-gradient(\n      135deg,\n      #263648 0%,\n      #172838 100%\n    );\n\n  font-family:\n    Inter,\n    Arial,\n    sans-serif;\n\n  isolation: isolate;\n}\n\n\n\/* =========================================================\n   BACKGROUND\n========================================================= *\/\n\n.h5e-safety::before {\n  content: \"\";\n\n  position: absolute;\n\n  width: 620px;\n  height: 620px;\n\n  right: -280px;\n  top: -300px;\n\n  border-radius: 50%;\n\n  border:\n    1px solid\n    rgba(255,255,255,.05);\n\n  box-shadow:\n    0 0 0 80px rgba(255,255,255,.018),\n    0 0 0 160px rgba(255,255,255,.012);\n\n  pointer-events: none;\n}\n\n\n.h5e-safety::after {\n  content: \"\";\n\n  position: absolute;\n\n  width: 430px;\n  height: 430px;\n\n  left: -250px;\n  bottom: -260px;\n\n  border-radius: 50%;\n\n  background:\n    radial-gradient(\n      circle,\n      rgba(255,100,51,.10),\n      transparent 68%\n    );\n\n  pointer-events: none;\n}\n\n\n\/* =========================================================\n   INNER\n========================================================= *\/\n\n.h5e-safety__inner {\n  position: relative;\n\n  z-index: 2;\n\n  width: 100%;\n  max-width: 1280px;\n\n  margin: 0 auto;\n}\n\n\n\/* =========================================================\n   HEADER\n========================================================= *\/\n\n.h5e-safety__header {\n  display: grid;\n\n  grid-template-columns:\n    minmax(0,1fr)\n    minmax(340px,.70fr);\n\n  gap: 58px;\n\n  align-items: end;\n\n  margin-bottom: 32px;\n}\n\n\n.h5e-safety__eyebrow {\n  display: flex;\n\n  align-items: center;\n\n  gap: 10px;\n\n  margin-bottom: 12px;\n\n  color:\n    var(--orange);\n\n  font-size: 10px;\n  font-weight: 700;\n\n  letter-spacing: 1.5px;\n\n  text-transform: uppercase;\n}\n\n\n.h5e-safety__eyebrow::before {\n  content: \"\";\n\n  width: 30px;\n  height: 2px;\n\n  background:\n    var(--orange);\n}\n\n\n.h5e-safety h2 {\n  max-width: 780px;\n\n  margin: 0;\n\n  color:\n    #ffffff;\n\n  font-size:\n    clamp(\n      40px,\n      4.1vw,\n      55px\n    );\n\n  font-weight: 700;\n\n  line-height: 1.04;\n\n  letter-spacing: -1.3px;\n}\n\n\n.h5e-safety h2 span {\n  display: block;\n\n  color:\n    var(--orange);\n}\n\n\n.h5e-safety__intro {\n  max-width: 480px;\n\n  margin: 0;\n\n  color:\n    rgba(255,255,255,.62);\n\n  font-size: 13px;\n\n  line-height: 1.75;\n}\n\n\n\/* =========================================================\n   EXPERIENCE\n========================================================= *\/\n\n.h5e-safety__experience {\n  display: grid;\n\n  grid-template-columns:\n    minmax(355px,.78fr)\n    minmax(0,1.22fr);\n\n  min-height: 610px;\n\n  overflow: hidden;\n\n  border:\n    1px solid\n    rgba(255,255,255,.10);\n\n  background:\n    rgba(255,255,255,.025);\n\n  box-shadow:\n    0 24px 55px\n    rgba(0,0,0,.13);\n}\n\n\n\/* =========================================================\n   LEFT CONTROL PANEL\n========================================================= *\/\n\n.h5e-safety__panel {\n  padding:\n    38px\n    34px;\n\n  display: flex;\n\n  flex-direction: column;\n\n  justify-content: center;\n\n  background:\n    rgba(15,29,42,.56);\n\n  border-right:\n    1px solid\n    rgba(255,255,255,.10);\n}\n\n\n\/* =========================================================\n   TABS\n========================================================= *\/\n\n.h5e-safety__tabs {\n  margin-bottom: 28px;\n\n  border-top:\n    1px solid\n    var(--line-light);\n}\n\n\n.h5e-safety__tab {\n  position: relative;\n\n  width: 100%;\n\n  min-height: 64px;\n\n  padding: 0;\n\n  display: grid;\n\n  grid-template-columns:\n    30px\n    1fr\n    auto;\n\n  gap: 10px;\n\n  align-items: center;\n\n  border: 0;\n\n  border-bottom:\n    1px solid\n    var(--line-light);\n\n  background:\n    transparent;\n\n  color:\n    rgba(255,255,255,.45);\n\n  font-family: inherit;\n\n  cursor: pointer;\n\n  transition:\n    color .25s ease,\n    background .25s ease;\n}\n\n\n.h5e-safety__tab::before {\n  content: \"\";\n\n  position: absolute;\n\n  left: 0;\n  top: 0;\n  bottom: 0;\n\n  width: 2px;\n\n  background:\n    var(--orange);\n\n  transform:\n    scaleY(0);\n\n  transition:\n    transform .3s ease;\n}\n\n\n.h5e-safety__tab:hover,\n.h5e-safety__tab.is-active {\n  color:\n    #ffffff;\n\n  background:\n    rgba(255,255,255,.035);\n}\n\n\n.h5e-safety__tab.is-active::before {\n  transform:\n    scaleY(1);\n}\n\n\n.h5e-safety__tab-number {\n  color:\n    var(--orange);\n\n  font-size: 8px;\n  font-weight: 700;\n}\n\n\n.h5e-safety__tab strong {\n  color: inherit;\n\n  font-size: 10px;\n  font-weight: 650;\n\n  text-align: left;\n}\n\n\n.h5e-safety__tab-indicator {\n  width: 7px;\n  height: 7px;\n\n  border-radius: 50%;\n\n  background:\n    rgba(255,255,255,.20);\n\n  transition:\n    background .25s ease,\n    box-shadow .25s ease;\n}\n\n\n.h5e-safety__tab.is-active\n.h5e-safety__tab-indicator {\n  background:\n    var(--orange);\n\n  box-shadow:\n    0 0 0 7px\n    rgba(255,100,51,.09);\n}\n\n\n\/* =========================================================\n   CONTENT\n========================================================= *\/\n\n.h5e-safety__content {\n  min-height: 245px;\n}\n\n\n.h5e-safety__content.is-changing {\n  animation:\n    h5eSafetyContent\n    .38s\n    ease\n    both;\n}\n\n\n.h5e-safety__mode {\n  margin-bottom: 10px;\n\n  color:\n    var(--orange);\n\n  font-size: 8px;\n  font-weight: 700;\n\n  letter-spacing: 1.3px;\n\n  text-transform: uppercase;\n}\n\n\n.h5e-safety__content h3 {\n  max-width: 420px;\n\n  margin:\n    0\n    0\n    13px;\n\n  color:\n    #ffffff;\n\n  font-size:\n    clamp(\n      29px,\n      3vw,\n      38px\n    );\n\n  font-weight: 700;\n\n  line-height: 1.08;\n\n  letter-spacing: -.75px;\n}\n\n\n.h5e-safety__description {\n  max-width: 430px;\n\n  margin:\n    0\n    0\n    23px;\n\n  color:\n    var(--text-light);\n\n  font-size: 11px;\n\n  line-height: 1.72;\n}\n\n\n\/* =========================================================\n   FEATURE CHIPS\n========================================================= *\/\n\n.h5e-safety__features {\n  display: flex;\n\n  flex-wrap: wrap;\n\n  gap: 8px;\n}\n\n\n.h5e-safety__feature {\n  display: flex;\n\n  align-items: center;\n\n  gap: 8px;\n\n  min-height: 37px;\n\n  padding:\n    8px\n    11px;\n\n  border:\n    1px solid\n    rgba(255,255,255,.13);\n\n  background:\n    rgba(255,255,255,.035);\n}\n\n\n.h5e-safety__feature-code {\n  color:\n    var(--orange);\n\n  font-size: 8px;\n  font-weight: 800;\n}\n\n\n.h5e-safety__feature-name {\n  color:\n    rgba(255,255,255,.78);\n\n  font-size: 8px;\n  font-weight: 600;\n}\n\n\n\/* =========================================================\n   SUMMARY\n========================================================= *\/\n\n.h5e-safety__summary {\n  margin-top: 29px;\n\n  padding-top: 19px;\n\n  display: grid;\n\n  grid-template-columns:\n    1fr\n    1fr;\n\n  border-top:\n    1px solid\n    var(--line-light);\n}\n\n\n.h5e-safety__summary-item:first-child {\n  padding-right: 15px;\n\n  border-right:\n    1px solid\n    var(--line-light);\n}\n\n\n.h5e-safety__summary-item:last-child {\n  padding-left: 15px;\n}\n\n\n.h5e-safety__summary-item span {\n  display: block;\n\n  margin-bottom: 5px;\n\n  color:\n    rgba(255,255,255,.28);\n\n  font-size: 7px;\n  font-weight: 700;\n\n  letter-spacing: 1px;\n\n  text-transform: uppercase;\n}\n\n\n.h5e-safety__summary-item strong {\n  display: block;\n\n  color:\n    #ffffff;\n\n  font-size: 15px;\n  font-weight: 700;\n}\n\n\n\/* =========================================================\n   RIGHT VISUAL\n========================================================= *\/\n\n.h5e-safety__visual {\n  position: relative;\n\n  min-width: 0;\n\n  overflow: hidden;\n\n  background:\n    radial-gradient(\n      circle at 52% 50%,\n      #ffffff 0%,\n      #eef2f5 56%,\n      #e1e7ec 100%\n    );\n}\n\n\n\/* technical grid *\/\n\n.h5e-safety__grid {\n  position: absolute;\n\n  inset: 0;\n\n  z-index: 1;\n\n  opacity: .42;\n\n  background-image:\n    linear-gradient(\n      rgba(38,54,72,.045) 1px,\n      transparent 1px\n    ),\n    linear-gradient(\n      90deg,\n      rgba(38,54,72,.045) 1px,\n      transparent 1px\n    );\n\n  background-size:\n    46px\n    46px;\n\n  mask-image:\n    radial-gradient(\n      circle at center,\n      #000 15%,\n      transparent 82%\n    );\n\n  pointer-events: none;\n}\n\n\n\/* =========================================================\n   PHOTO GALLERY\n========================================================= *\/\n\n.h5e-safety__gallery {\n  position: absolute;\n\n  z-index: 3;\n\n  inset:\n    34px\n    34px\n    86px;\n\n  overflow: hidden;\n\n  border-radius: 25px;\n\n  border:\n    1px solid\n    rgba(38,54,72,.08);\n\n  background:\n    #e9eef2;\n\n  box-shadow:\n    0 18px 38px\n    rgba(38,54,72,.11);\n\n  touch-action:\n    pan-y;\n}\n\n\n.h5e-safety__slide {\n  position: absolute;\n\n  inset: 0;\n\n  opacity: 0;\n\n  pointer-events: none;\n\n  transform:\n    scale(1.04);\n\n  transition:\n    opacity .75s ease,\n    transform 1.25s\n    cubic-bezier(.2,.7,.3,1);\n}\n\n\n.h5e-safety__slide.is-active {\n  opacity: 1;\n\n  pointer-events: auto;\n\n  transform:\n    scale(1);\n}\n\n\n.h5e-safety__slide img {\n  display: block;\n\n  width: 100%;\n  height: 100%;\n\n  object-fit: contain;\n\n  object-position:\n    center center;\n\n  filter:\n    drop-shadow(\n      0 22px 20px\n      rgba(38,54,72,.12)\n    );\n}\n\n\n\/* subtle photo overlay *\/\n\n.h5e-safety__slide::after {\n  content: \"\";\n\n  position: absolute;\n\n  inset: 0;\n\n  pointer-events: none;\n\n  background:\n    linear-gradient(\n      180deg,\n      rgba(255,255,255,.04) 0%,\n      transparent 55%,\n      rgba(25,40,54,.10) 100%\n    );\n}\n\n\n\/* =========================================================\n   RADAR\n========================================================= *\/\n\n.h5e-safety__radar {\n  position: absolute;\n\n  z-index: 4;\n\n  left: 53%;\n  top: 51%;\n\n  width: 455px;\n  height: 455px;\n\n  transform:\n    translate(-50%,-50%);\n\n  border-radius: 50%;\n\n  border:\n    1px solid\n    rgba(255,100,51,.15);\n\n  pointer-events: none;\n\n  animation:\n    h5eRadarBreath\n    4s\n    ease-in-out\n    infinite;\n}\n\n\n.h5e-safety__radar::before {\n  content: \"\";\n\n  position: absolute;\n\n  inset: 56px;\n\n  border-radius: 50%;\n\n  border:\n    1px dashed\n    rgba(38,54,72,.14);\n\n  animation:\n    h5eRadarRotate\n    18s\n    linear\n    infinite;\n}\n\n\n.h5e-safety__radar::after {\n  content: \"\";\n\n  position: absolute;\n\n  inset: 115px;\n\n  border-radius: 50%;\n\n  border:\n    1px solid\n    rgba(255,100,51,.11);\n}\n\n\n\/* =========================================================\n   RADAR SWEEP\n========================================================= *\/\n\n.h5e-safety__sweep {\n  position: absolute;\n\n  z-index: 5;\n\n  left: 53%;\n  top: 51%;\n\n  width: 405px;\n  height: 405px;\n\n  transform:\n    translate(-50%,-50%);\n\n  border-radius: 50%;\n\n  overflow: hidden;\n\n  pointer-events: none;\n}\n\n\n.h5e-safety__sweep::before {\n  content: \"\";\n\n  position: absolute;\n\n  left: 50%;\n  top: 50%;\n\n  width: 50%;\n  height: 2px;\n\n  transform-origin:\n    left center;\n\n  background:\n    linear-gradient(\n      90deg,\n      rgba(255,100,51,.55),\n      transparent\n    );\n\n  animation:\n    h5eSafetySweep\n    5.5s\n    linear\n    infinite;\n}\n\n\n\/* =========================================================\n   ADAS BADGE\n========================================================= *\/\n\n.h5e-safety__adas-badge {\n  position: absolute;\n\n  z-index: 12;\n\n  top: 52px;\n  left: 52px;\n\n  padding:\n    11px\n    13px;\n\n  background:\n    rgba(38,54,72,.94);\n\n  color:\n    #ffffff;\n\n  box-shadow:\n    0 14px 25px\n    rgba(38,54,72,.14);\n\n  backdrop-filter:\n    blur(8px);\n\n  -webkit-backdrop-filter:\n    blur(8px);\n}\n\n\n.h5e-safety__adas-badge span {\n  display: block;\n\n  margin-bottom: 4px;\n\n  color:\n    var(--orange);\n\n  font-size: 7px;\n  font-weight: 700;\n\n  letter-spacing: 1px;\n\n  text-transform: uppercase;\n}\n\n\n.h5e-safety__adas-badge strong {\n  display: block;\n\n  font-size: 11px;\n  font-weight: 700;\n}\n\n\n\/* =========================================================\n   SENSOR NODES\n========================================================= *\/\n\n.h5e-safety__node {\n  position: absolute;\n\n  z-index: 13;\n\n  min-width: 116px;\n\n  padding:\n    9px\n    11px;\n\n  border:\n    1px solid\n    rgba(38,54,72,.09);\n\n  background:\n    rgba(255,255,255,.91);\n\n  box-shadow:\n    0 12px 24px\n    rgba(38,54,72,.10);\n\n  backdrop-filter:\n    blur(7px);\n\n  -webkit-backdrop-filter:\n    blur(7px);\n\n  transition:\n    opacity .32s ease,\n    transform .32s ease;\n}\n\n\n.h5e-safety__node::before {\n  content: \"\";\n\n  position: absolute;\n\n  width: 7px;\n  height: 7px;\n\n  border-radius: 50%;\n\n  background:\n    var(--orange);\n\n  box-shadow:\n    0 0 0 6px\n    rgba(255,100,51,.11);\n\n  animation:\n    h5eSafetyNodePulse\n    2.2s\n    ease-in-out\n    infinite;\n}\n\n\n.h5e-safety__node span {\n  display: block;\n\n  margin-bottom: 4px;\n\n  color:\n    #9aa2aa;\n\n  font-size: 6px;\n  font-weight: 700;\n\n  letter-spacing: .9px;\n\n  text-transform: uppercase;\n}\n\n\n.h5e-safety__node strong {\n  display: block;\n\n  color:\n    var(--navy);\n\n  font-size: 9px;\n  font-weight: 700;\n\n  line-height: 1.3;\n}\n\n\n.h5e-safety__node--1 {\n  top: 25%;\n  right: 3%;\n}\n\n\n.h5e-safety__node--1::before {\n  left: -13px;\n  top: 50%;\n}\n\n\n.h5e-safety__node--2 {\n  left: 3%;\n  bottom: 29%;\n}\n\n\n.h5e-safety__node--2::before {\n  right: -13px;\n  top: 50%;\n}\n\n\n.h5e-safety__node--3 {\n  right: 8%;\n  bottom: 17%;\n}\n\n\n.h5e-safety__node--3::before {\n  left: -13px;\n  top: 50%;\n}\n\n\n.h5e-safety__node.is-hidden {\n  opacity: 0;\n\n  transform:\n    translateY(8px)\n    scale(.94);\n\n  pointer-events: none;\n}\n\n\n\/* =========================================================\n   GALLERY ARROWS\n========================================================= *\/\n\n.h5e-safety__gallery-btn {\n  position: absolute;\n\n  z-index: 20;\n\n  top: 50%;\n\n  width: 46px;\n  height: 46px;\n\n  padding: 0;\n\n  display: flex;\n\n  align-items: center;\n  justify-content: center;\n\n  transform:\n    translateY(-50%);\n\n  border:\n    1px solid\n    rgba(255,255,255,.32);\n\n  border-radius: 50%;\n\n  background:\n    rgba(38,54,72,.88);\n\n  color:\n    #ffffff;\n\n  font-family: inherit;\n\n  font-size: 20px;\n\n  cursor: pointer;\n\n  box-shadow:\n    0 10px 24px\n    rgba(25,39,52,.18);\n\n  backdrop-filter:\n    blur(8px);\n\n  -webkit-backdrop-filter:\n    blur(8px);\n\n  transition:\n    background .25s ease,\n    transform .25s ease;\n}\n\n\n.h5e-safety__gallery-btn:hover {\n  background:\n    var(--orange);\n\n  transform:\n    translateY(-50%)\n    scale(1.06);\n}\n\n\n.h5e-safety__gallery-btn--prev {\n  left: 48px;\n}\n\n\n.h5e-safety__gallery-btn--next {\n  right: 48px;\n}\n\n\n\/* =========================================================\n   IMAGE NAVIGATION\n========================================================= *\/\n\n.h5e-safety__photo-nav {\n  position: absolute;\n\n  z-index: 21;\n\n  left: 50%;\n  bottom: 31px;\n\n  transform:\n    translateX(-50%);\n\n  display: flex;\n\n  align-items: center;\n\n  gap: 6px;\n\n  padding:\n    6px;\n\n  border:\n    1px solid\n    rgba(38,54,72,.08);\n\n  border-radius: 999px;\n\n  background:\n    rgba(255,255,255,.88);\n\n  box-shadow:\n    0 10px 24px\n    rgba(38,54,72,.10);\n\n  backdrop-filter:\n    blur(9px);\n\n  -webkit-backdrop-filter:\n    blur(9px);\n}\n\n\n.h5e-safety__photo-dot {\n  position: relative;\n\n  width: 42px;\n  height: 31px;\n\n  padding: 0;\n\n  border: 0;\n\n  border-radius: 999px;\n\n  background:\n    transparent;\n\n  color:\n    #8f99a3;\n\n  font-family: inherit;\n\n  font-size: 8px;\n  font-weight: 700;\n\n  cursor: pointer;\n\n  transition:\n    color .25s ease,\n    background .25s ease,\n    width .3s ease;\n}\n\n\n.h5e-safety__photo-dot.is-active {\n  width: 61px;\n\n  color:\n    #ffffff;\n\n  background:\n    var(--navy);\n}\n\n\n.h5e-safety__photo-dot.is-active::after {\n  content: \"\";\n\n  position: absolute;\n\n  left: 10px;\n  right: 10px;\n  bottom: 5px;\n\n  height: 2px;\n\n  border-radius: 999px;\n\n  background:\n    rgba(255,255,255,.22);\n\n  overflow: hidden;\n}\n\n\n.h5e-safety__photo-progress {\n  position: absolute;\n\n  left: 10px;\n  bottom: 5px;\n\n  width: 0;\n  height: 2px;\n\n  border-radius: 999px;\n\n  background:\n    var(--orange);\n}\n\n\n.h5e-safety__photo-dot.is-active\n.h5e-safety__photo-progress {\n  animation:\n    h5ePhotoProgress\n    4.5s\n    linear\n    forwards;\n}\n\n\n\/* =========================================================\n   VISUAL STATUS\n========================================================= *\/\n\n.h5e-safety__visual-status {\n  position: absolute;\n\n  z-index: 16;\n\n  left: 52px;\n  bottom: 31px;\n\n  padding:\n    10px\n    13px;\n\n  border:\n    1px solid\n    rgba(38,54,72,.08);\n\n  background:\n    rgba(255,255,255,.88);\n\n  box-shadow:\n    0 10px 22px\n    rgba(38,54,72,.08);\n\n  backdrop-filter:\n    blur(8px);\n\n  -webkit-backdrop-filter:\n    blur(8px);\n}\n\n\n.h5e-safety__visual-status span {\n  display: block;\n\n  margin-bottom: 3px;\n\n  color:\n    #929aa3;\n\n  font-size: 6px;\n  font-weight: 700;\n\n  letter-spacing: .9px;\n\n  text-transform: uppercase;\n}\n\n\n.h5e-safety__visual-status strong {\n  display: block;\n\n  color:\n    var(--navy);\n\n  font-size: 9px;\n  font-weight: 700;\n}\n\n\n\/* =========================================================\n   ANIMATIONS\n========================================================= *\/\n\n@keyframes h5eRadarBreath {\n\n  0%,\n  100% {\n    opacity: .50;\n\n    transform:\n      translate(-50%,-50%)\n      scale(.96);\n  }\n\n  50% {\n    opacity: 1;\n\n    transform:\n      translate(-50%,-50%)\n      scale(1.035);\n  }\n\n}\n\n\n@keyframes h5eRadarRotate {\n\n  from {\n    transform:\n      rotate(0deg);\n  }\n\n  to {\n    transform:\n      rotate(360deg);\n  }\n\n}\n\n\n@keyframes h5eSafetySweep {\n\n  from {\n    transform:\n      rotate(0deg);\n  }\n\n  to {\n    transform:\n      rotate(360deg);\n  }\n\n}\n\n\n@keyframes h5eSafetyNodePulse {\n\n  0%,\n  100% {\n    opacity: .45;\n\n    transform:\n      scale(.8);\n\n    box-shadow:\n      0 0 0 4px\n      rgba(255,100,51,.07);\n  }\n\n  50% {\n    opacity: 1;\n\n    transform:\n      scale(1);\n\n    box-shadow:\n      0 0 0 8px\n      rgba(255,100,51,.12);\n  }\n\n}\n\n\n@keyframes h5eSafetyContent {\n\n  from {\n    opacity: .25;\n\n    transform:\n      translateY(8px);\n  }\n\n  to {\n    opacity: 1;\n\n    transform:\n      translateY(0);\n  }\n\n}\n\n\n@keyframes h5ePhotoProgress {\n\n  from {\n    width: 0;\n  }\n\n  to {\n    width:\n      calc(100% - 20px);\n  }\n\n}\n\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width: 1050px) {\n\n  .h5e-safety__header {\n    gap: 34px;\n  }\n\n\n  .h5e-safety__experience {\n    grid-template-columns:\n      minmax(325px,.87fr)\n      minmax(0,1.13fr);\n  }\n\n\n  .h5e-safety__panel {\n    padding:\n      34px\n      27px;\n  }\n\n\n  .h5e-safety__radar {\n    width: 390px;\n    height: 390px;\n  }\n\n\n  .h5e-safety__sweep {\n    width: 350px;\n    height: 350px;\n  }\n\n\n  .h5e-safety__gallery-btn--prev {\n    left: 43px;\n  }\n\n\n  .h5e-safety__gallery-btn--next {\n    right: 43px;\n  }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width: 767px) {\n\n  .h5e-safety {\n    padding:\n      46px\n      16px;\n  }\n\n\n  .h5e-safety__header {\n    display: block;\n\n    margin-bottom: 22px;\n  }\n\n\n  .h5e-safety__eyebrow {\n    margin-bottom: 9px;\n\n    font-size: 8px;\n  }\n\n\n  .h5e-safety h2 {\n    max-width: 360px;\n\n    margin-bottom: 13px;\n\n    font-size: 34px;\n\n    line-height: 1.05;\n\n    letter-spacing: -.8px;\n  }\n\n\n  .h5e-safety__intro {\n    max-width: 360px;\n\n    font-size: 12px;\n\n    line-height: 1.65;\n  }\n\n\n  .h5e-safety__experience {\n    display: flex;\n\n    flex-direction: column;\n\n    min-height: 0;\n  }\n\n\n  \/* VISUAL FIRST *\/\n\n  .h5e-safety__visual {\n    order: 1;\n\n    height: 430px;\n  }\n\n\n  .h5e-safety__panel {\n    order: 2;\n\n    padding:\n      27px\n      20px\n      30px;\n\n    border-right: 0;\n\n    border-top:\n      1px solid\n      rgba(255,255,255,.10);\n  }\n\n\n  .h5e-safety__gallery {\n    inset:\n      14px\n      14px\n      77px;\n\n    border-radius: 18px;\n  }\n\n\n  .h5e-safety__slide img {\n    object-fit: contain;\n  }\n\n\n  .h5e-safety__radar {\n    width: 295px;\n    height: 295px;\n  }\n\n\n  .h5e-safety__radar::before {\n    inset: 40px;\n  }\n\n\n  .h5e-safety__radar::after {\n    inset: 78px;\n  }\n\n\n  .h5e-safety__sweep {\n    width: 265px;\n    height: 265px;\n  }\n\n\n  .h5e-safety__adas-badge {\n    top: 25px;\n    left: 25px;\n\n    padding:\n      8px\n      9px;\n  }\n\n\n  .h5e-safety__adas-badge strong {\n    font-size: 9px;\n  }\n\n\n  \/* BUTTONS *\/\n\n  .h5e-safety__gallery-btn {\n    width: 39px;\n    height: 39px;\n\n    font-size: 17px;\n  }\n\n\n  .h5e-safety__gallery-btn--prev {\n    left: 21px;\n  }\n\n\n  .h5e-safety__gallery-btn--next {\n    right: 21px;\n  }\n\n\n  \/* NODES *\/\n\n  .h5e-safety__node {\n    min-width: 88px;\n\n    max-width: 112px;\n\n    padding:\n      6px\n      8px;\n  }\n\n\n  .h5e-safety__node strong {\n    font-size: 7px;\n  }\n\n\n  .h5e-safety__node span {\n    font-size: 5px;\n  }\n\n\n  .h5e-safety__node--1 {\n    top: 25%;\n    right: 2%;\n  }\n\n\n  .h5e-safety__node--2 {\n    left: 2%;\n    bottom: 31%;\n  }\n\n\n  .h5e-safety__node--3 {\n    right: 4%;\n    bottom: 20%;\n  }\n\n\n  \/* PHOTO NAV *\/\n\n  .h5e-safety__photo-nav {\n    bottom: 21px;\n  }\n\n\n  .h5e-safety__photo-dot {\n    width: 35px;\n    height: 28px;\n  }\n\n\n  .h5e-safety__photo-dot.is-active {\n    width: 52px;\n  }\n\n\n  .h5e-safety__visual-status {\n    display: none;\n  }\n\n\n  \/* SAFETY TABS *\/\n\n  .h5e-safety__tabs {\n    display: grid;\n\n    grid-template-columns:\n      repeat(3,1fr);\n\n    border:\n      1px solid\n      var(--line-light);\n\n    margin-bottom: 23px;\n  }\n\n\n  .h5e-safety__tab {\n    min-height: 68px;\n\n    display: flex;\n\n    flex-direction: column;\n\n    justify-content: center;\n    align-items: flex-start;\n\n    gap: 4px;\n\n    padding:\n      0\n      8px;\n\n    border-bottom: 0;\n\n    border-right:\n      1px solid\n      var(--line-light);\n  }\n\n\n  .h5e-safety__tab:last-child {\n    border-right: 0;\n  }\n\n\n  .h5e-safety__tab::before {\n    left: 0;\n    right: 0;\n    top: auto;\n    bottom: 0;\n\n    width: auto;\n    height: 2px;\n\n    transform:\n      scaleX(0);\n  }\n\n\n  .h5e-safety__tab.is-active::before {\n    transform:\n      scaleX(1);\n  }\n\n\n  .h5e-safety__tab strong {\n    font-size: 7px;\n\n    line-height: 1.25;\n  }\n\n\n  .h5e-safety__tab-indicator {\n    display: none;\n  }\n\n\n  .h5e-safety__content {\n    min-height: 220px;\n  }\n\n\n  .h5e-safety__content h3 {\n    font-size: 27px;\n  }\n\n}\n\n\n\/* =========================================================\n   SMALL MOBILE\n========================================================= *\/\n\n@media (max-width: 380px) {\n\n  .h5e-safety h2 {\n    font-size: 31px;\n  }\n\n\n  .h5e-safety__visual {\n    height: 400px;\n  }\n\n\n  .h5e-safety__node {\n    min-width: 80px;\n  }\n\n\n  .h5e-safety__tab {\n    padding:\n      0\n      6px;\n  }\n\n}\n\n\n\/* =========================================================\n   ACCESSIBILITY\n========================================================= *\/\n\n.h5e-safety button:focus-visible {\n  outline:\n    2px solid\n    var(--orange);\n\n  outline-offset: 2px;\n}\n\n\n@media (prefers-reduced-motion: reduce) {\n\n  .h5e-safety *,\n  .h5e-safety *::before,\n  .h5e-safety *::after {\n    animation: none !important;\n\n    transition: none !important;\n  }\n\n}\n<\/style>\n\n\n<section\n  class=\"h5e-safety\"\n  id=\"h5e-safety\">\n\n\n  <div class=\"h5e-safety__inner\">\n\n\n    <!-- =====================================================\n         HEADER\n    ====================================================== -->\n\n    <div class=\"h5e-safety__header\">\n\n\n      <div>\n\n\n        <div class=\"h5e-safety__eyebrow\">\n          ADAS & Driver Confidence\n        <\/div>\n\n\n        <h2>\n\n          Safety Technology Built\n\n          <span>\n            Around the Driver.\n          <\/span>\n\n        <\/h2>\n\n\n      <\/div>\n\n\n\n      <p class=\"h5e-safety__intro\">\n        The Farizon H5E combines driver-assistance and\n        awareness features designed to support commercial\n        driving across logistics, distribution and everyday\n        fleet operations.\n      <\/p>\n\n\n    <\/div>\n\n\n\n    <!-- =====================================================\n         EXPERIENCE\n    ====================================================== -->\n\n    <div class=\"h5e-safety__experience\">\n\n\n      <!-- ===================================================\n           LEFT PANEL\n      ==================================================== -->\n\n      <div class=\"h5e-safety__panel\">\n\n\n        <div class=\"h5e-safety__tabs\">\n\n\n          <button\n            class=\"h5e-safety__tab is-active\"\n            type=\"button\"\n            data-h5e-safety=\"collision\">\n\n            <span class=\"h5e-safety__tab-number\">\n              01\n            <\/span>\n\n            <strong>\n              Collision Protection\n            <\/strong>\n\n            <span class=\"h5e-safety__tab-indicator\"><\/span>\n\n          <\/button>\n\n\n\n          <button\n            class=\"h5e-safety__tab\"\n            type=\"button\"\n            data-h5e-safety=\"awareness\">\n\n            <span class=\"h5e-safety__tab-number\">\n              02\n            <\/span>\n\n            <strong>\n              Driver Awareness\n            <\/strong>\n\n            <span class=\"h5e-safety__tab-indicator\"><\/span>\n\n          <\/button>\n\n\n\n          <button\n            class=\"h5e-safety__tab\"\n            type=\"button\"\n            data-h5e-safety=\"support\">\n\n            <span class=\"h5e-safety__tab-number\">\n              03\n            <\/span>\n\n            <strong>\n              Driving Support\n            <\/strong>\n\n            <span class=\"h5e-safety__tab-indicator\"><\/span>\n\n          <\/button>\n\n\n        <\/div>\n\n\n\n        <div\n          class=\"h5e-safety__content\"\n          id=\"h5e-safety-content\">\n\n\n          <div\n            class=\"h5e-safety__mode\"\n            id=\"h5e-safety-mode\">\n\n            Forward Safety Assistance\n\n          <\/div>\n\n\n          <h3 id=\"h5e-safety-title\">\n            Additional Awareness for What Lies Ahead.\n          <\/h3>\n\n\n          <p\n            class=\"h5e-safety__description\"\n            id=\"h5e-safety-description\">\n\n            Forward-facing driver assistance features support\n            awareness of potential hazards ahead and provide\n            additional braking and warning assistance during\n            commercial driving.\n\n          <\/p>\n\n\n          <div\n            class=\"h5e-safety__features\"\n            id=\"h5e-safety-features\">\n          <\/div>\n\n\n        <\/div>\n\n\n\n        <div class=\"h5e-safety__summary\">\n\n\n          <div class=\"h5e-safety__summary-item\">\n\n            <span>\n              Safety Category\n            <\/span>\n\n            <strong id=\"h5e-safety-summary1\">\n              Collision Protection\n            <\/strong>\n\n          <\/div>\n\n\n\n          <div class=\"h5e-safety__summary-item\">\n\n            <span>\n              Active Features\n            <\/span>\n\n            <strong id=\"h5e-safety-summary2\">\n              3 Systems\n            <\/strong>\n\n          <\/div>\n\n\n        <\/div>\n\n\n      <\/div>\n\n\n\n      <!-- ===================================================\n           RIGHT VISUAL\n      ==================================================== -->\n\n      <div\n        class=\"h5e-safety__visual\"\n        id=\"h5e-safety-visual\">\n\n\n        <div class=\"h5e-safety__grid\"><\/div>\n\n\n\n        <!-- =================================================\n             PHOTO GALLERY\n        ================================================== -->\n\n        <div\n          class=\"h5e-safety__gallery\"\n          id=\"h5e-safety-gallery\">\n\n\n          <div\n            class=\"h5e-safety__slide is-active\"\n            data-h5e-photo=\"0\">\n\n\n            <img\n              src=\"https:\/\/farizon.com.sg\/wp-content\/uploads\/2026\/10\/20260126_073248251_iOS-scaled.png\"\n              alt=\"Farizon H5E electric truck three quarter view\"\n              loading=\"lazy\"\n              decoding=\"async\">\n\n\n          <\/div>\n\n\n\n          <div\n            class=\"h5e-safety__slide\"\n            data-h5e-photo=\"1\">\n\n\n            <img\n              src=\"https:\/\/farizon.com.sg\/wp-content\/uploads\/2026\/10\/20260126_073117759_iOS-scaled.png\"\n              alt=\"Farizon H5E electric commercial truck exterior\"\n              loading=\"lazy\"\n              decoding=\"async\">\n\n\n          <\/div>\n\n\n\n          <div\n            class=\"h5e-safety__slide\"\n            data-h5e-photo=\"2\">\n\n\n            <img\n              src=\"https:\/\/farizon.com.sg\/wp-content\/uploads\/2026\/10\/20260126_073219134_iOS-scaled.png\"\n              alt=\"Farizon H5E electric truck exterior view\"\n              loading=\"lazy\"\n              decoding=\"async\">\n\n\n          <\/div>\n\n\n        <\/div>\n\n\n\n        <!-- RADAR -->\n\n        <div class=\"h5e-safety__radar\"><\/div>\n\n\n        <div class=\"h5e-safety__sweep\"><\/div>\n\n\n\n        <!-- ADAS BADGE -->\n\n        <div class=\"h5e-safety__adas-badge\">\n\n\n          <span>\n            Active Safety\n          <\/span>\n\n\n          <strong>\n            H5E ADAS\n          <\/strong>\n\n\n        <\/div>\n\n\n\n        <!-- SENSOR NODE 1 -->\n\n        <div\n          class=\"h5e-safety__node h5e-safety__node--1\"\n          id=\"h5e-safety-node1\">\n\n\n          <span id=\"h5e-safety-node1-label\">\n            Forward\n          <\/span>\n\n\n          <strong id=\"h5e-safety-node1-text\">\n            AEB\n          <\/strong>\n\n\n        <\/div>\n\n\n\n        <!-- SENSOR NODE 2 -->\n\n        <div\n          class=\"h5e-safety__node h5e-safety__node--2\"\n          id=\"h5e-safety-node2\">\n\n\n          <span id=\"h5e-safety-node2-label\">\n            Warning\n          <\/span>\n\n\n          <strong id=\"h5e-safety-node2-text\">\n            FCW\n          <\/strong>\n\n\n        <\/div>\n\n\n\n        <!-- SENSOR NODE 3 -->\n\n        <div\n          class=\"h5e-safety__node h5e-safety__node--3\"\n          id=\"h5e-safety-node3\">\n\n\n          <span id=\"h5e-safety-node3-label\">\n            Road User\n          <\/span>\n\n\n          <strong id=\"h5e-safety-node3-text\">\n            Pedestrian Alert\n          <\/strong>\n\n\n        <\/div>\n\n\n\n        <!-- =================================================\n             MANUAL PREV \/ NEXT\n        ================================================== -->\n\n        <button\n          class=\"h5e-safety__gallery-btn h5e-safety__gallery-btn--prev\"\n          id=\"h5e-photo-prev\"\n          type=\"button\"\n          aria-label=\"Previous H5E photo\">\n\n          \u2190\n\n        <\/button>\n\n\n\n        <button\n          class=\"h5e-safety__gallery-btn h5e-safety__gallery-btn--next\"\n          id=\"h5e-photo-next\"\n          type=\"button\"\n          aria-label=\"Next H5E photo\">\n\n          \u2192\n\n        <\/button>\n\n\n\n        <!-- =================================================\n             PHOTO NAV\n        ================================================== -->\n\n        <div\n          class=\"h5e-safety__photo-nav\"\n          aria-label=\"H5E image gallery\">\n\n\n          <button\n            class=\"h5e-safety__photo-dot is-active\"\n            type=\"button\"\n            data-h5e-photo-button=\"0\">\n\n            01\n\n            <span class=\"h5e-safety__photo-progress\"><\/span>\n\n          <\/button>\n\n\n\n          <button\n            class=\"h5e-safety__photo-dot\"\n            type=\"button\"\n            data-h5e-photo-button=\"1\">\n\n            02\n\n            <span class=\"h5e-safety__photo-progress\"><\/span>\n\n          <\/button>\n\n\n\n          <button\n            class=\"h5e-safety__photo-dot\"\n            type=\"button\"\n            data-h5e-photo-button=\"2\">\n\n            03\n\n            <span class=\"h5e-safety__photo-progress\"><\/span>\n\n          <\/button>\n\n\n        <\/div>\n\n\n\n        <!-- STATUS -->\n\n        <div class=\"h5e-safety__visual-status\">\n\n\n          <span>\n            Selected Safety Group\n          <\/span>\n\n\n          <strong id=\"h5e-safety-visual-status\">\n            Collision Protection\n          <\/strong>\n\n\n        <\/div>\n\n\n      <\/div>\n\n\n    <\/div>\n\n\n  <\/div>\n\n\n<\/section>\n\n\n<script>\n(function () {\n\n  const section =\n    document.getElementById(\n      \"h5e-safety\"\n    );\n\n\n  if (!section) {\n    return;\n  }\n\n\n\n  \/* =========================================================\n     SAFETY CONTENT\n  ========================================================= *\/\n\n  const tabs =\n    section.querySelectorAll(\n      \"[data-h5e-safety]\"\n    );\n\n\n  const content =\n    document.getElementById(\n      \"h5e-safety-content\"\n    );\n\n\n  const mode =\n    document.getElementById(\n      \"h5e-safety-mode\"\n    );\n\n\n  const title =\n    document.getElementById(\n      \"h5e-safety-title\"\n    );\n\n\n  const description =\n    document.getElementById(\n      \"h5e-safety-description\"\n    );\n\n\n  const features =\n    document.getElementById(\n      \"h5e-safety-features\"\n    );\n\n\n  const summary1 =\n    document.getElementById(\n      \"h5e-safety-summary1\"\n    );\n\n\n  const summary2 =\n    document.getElementById(\n      \"h5e-safety-summary2\"\n    );\n\n\n  const visualStatus =\n    document.getElementById(\n      \"h5e-safety-visual-status\"\n    );\n\n\n  const node1 =\n    document.getElementById(\n      \"h5e-safety-node1\"\n    );\n\n\n  const node2 =\n    document.getElementById(\n      \"h5e-safety-node2\"\n    );\n\n\n  const node3 =\n    document.getElementById(\n      \"h5e-safety-node3\"\n    );\n\n\n  const node1Label =\n    document.getElementById(\n      \"h5e-safety-node1-label\"\n    );\n\n\n  const node1Text =\n    document.getElementById(\n      \"h5e-safety-node1-text\"\n    );\n\n\n  const node2Label =\n    document.getElementById(\n      \"h5e-safety-node2-label\"\n    );\n\n\n  const node2Text =\n    document.getElementById(\n      \"h5e-safety-node2-text\"\n    );\n\n\n  const node3Label =\n    document.getElementById(\n      \"h5e-safety-node3-label\"\n    );\n\n\n  const node3Text =\n    document.getElementById(\n      \"h5e-safety-node3-text\"\n    );\n\n\n\n  const data = {\n\n\n    collision: {\n\n      mode:\n        \"Forward Safety Assistance\",\n\n      title:\n        \"Additional Awareness for What Lies Ahead.\",\n\n      description:\n        \"Forward-facing driver assistance features support awareness of potential hazards ahead and provide additional braking and warning assistance during commercial driving.\",\n\n      category:\n        \"Collision Protection\",\n\n      count:\n        \"3 Systems\",\n\n      features: [\n\n        {\n          code: \"AEB\",\n          name: \"Autonomous Emergency Braking\"\n        },\n\n        {\n          code: \"FCW\",\n          name: \"Forward Collision Warning\"\n        },\n\n        {\n          code: \"PA\",\n          name: \"Pedestrian Alert System\"\n        }\n\n      ],\n\n      nodes: [\n\n        {\n          label: \"Forward\",\n          text: \"AEB\"\n        },\n\n        {\n          label: \"Warning\",\n          text: \"FCW\"\n        },\n\n        {\n          label: \"Road User\",\n          text: \"Pedestrian Alert\"\n        }\n\n      ]\n\n    },\n\n\n    awareness: {\n\n      mode:\n        \"Driver Awareness Systems\",\n\n      title:\n        \"More Awareness Around the Working Vehicle.\",\n\n      description:\n        \"The H5E supports the driver with systems designed to provide additional awareness of surrounding traffic, lane position and tyre condition during everyday commercial operations.\",\n\n      category:\n        \"Driver Awareness\",\n\n      count:\n        \"3 Systems\",\n\n      features: [\n\n        {\n          code: \"BSD\",\n          name: \"Blind Spot Detection\"\n        },\n\n        {\n          code: \"LDW\",\n          name: \"Lane Departure Warning\"\n        },\n\n        {\n          code: \"TPMS\",\n          name: \"Tyre Pressure Monitoring System\"\n        }\n\n      ],\n\n      nodes: [\n\n        {\n          label: \"Side\",\n          text: \"Blind Spot Detection\"\n        },\n\n        {\n          label: \"Lane\",\n          text: \"Lane Departure Warning\"\n        },\n\n        {\n          label: \"Tyres\",\n          text: \"TPMS\"\n        }\n\n      ]\n\n    },\n\n\n    support: {\n\n      mode:\n        \"Daily Driving Support\",\n\n      title:\n        \"Added Convenience Across the Working Route.\",\n\n      description:\n        \"Cruise control provides additional driving support during suitable road conditions, helping make longer commercial routes more convenient for the driver.\",\n\n      category:\n        \"Driving Support\",\n\n      count:\n        \"1 System\",\n\n      features: [\n\n        {\n          code: \"CC\",\n          name: \"Cruise Control\"\n        }\n\n      ],\n\n      nodes: [\n\n        {\n          label: \"Driving Support\",\n          text: \"Cruise Control\"\n        }\n\n      ]\n\n    }\n\n  };\n\n\n\n  function renderFeatures(\n    items\n  ) {\n\n\n    features.innerHTML =\n      \"\";\n\n\n    items.forEach(\n      function (item) {\n\n\n        const feature =\n          document.createElement(\n            \"div\"\n          );\n\n\n        feature.className =\n          \"h5e-safety__feature\";\n\n\n        feature.innerHTML =\n          '<span class=\"h5e-safety__feature-code\">' +\n          item.code +\n          '<\/span>' +\n\n          '<span class=\"h5e-safety__feature-name\">' +\n          item.name +\n          '<\/span>';\n\n\n        features.appendChild(\n          feature\n        );\n\n\n      }\n    );\n\n\n  }\n\n\n\n  function updateNodes(\n    items\n  ) {\n\n\n    const nodes = [\n\n      {\n        wrap: node1,\n        label: node1Label,\n        text: node1Text\n      },\n\n      {\n        wrap: node2,\n        label: node2Label,\n        text: node2Text\n      },\n\n      {\n        wrap: node3,\n        label: node3Label,\n        text: node3Text\n      }\n\n    ];\n\n\n    nodes.forEach(\n      function (\n        node,\n        index\n      ) {\n\n\n        const selected =\n          items[index];\n\n\n        if (selected) {\n\n\n          node.wrap.classList.remove(\n            \"is-hidden\"\n          );\n\n\n          node.label.textContent =\n            selected.label;\n\n\n          node.text.textContent =\n            selected.text;\n\n\n        } else {\n\n\n          node.wrap.classList.add(\n            \"is-hidden\"\n          );\n\n\n        }\n\n\n      }\n    );\n\n\n  }\n\n\n\n  function setSafetyMode(\n    key\n  ) {\n\n\n    const selected =\n      data[key];\n\n\n    if (!selected) {\n      return;\n    }\n\n\n    tabs.forEach(\n      function (tab) {\n\n\n        tab.classList.toggle(\n          \"is-active\",\n          tab.getAttribute(\n            \"data-h5e-safety\"\n          ) === key\n        );\n\n\n      }\n    );\n\n\n    mode.textContent =\n      selected.mode;\n\n\n    title.textContent =\n      selected.title;\n\n\n    description.textContent =\n      selected.description;\n\n\n    summary1.textContent =\n      selected.category;\n\n\n    summary2.textContent =\n      selected.count;\n\n\n    visualStatus.textContent =\n      selected.category;\n\n\n    renderFeatures(\n      selected.features\n    );\n\n\n    updateNodes(\n      selected.nodes\n    );\n\n\n    content.classList.remove(\n      \"is-changing\"\n    );\n\n\n    void content.offsetWidth;\n\n\n    content.classList.add(\n      \"is-changing\"\n    );\n\n\n  }\n\n\n\n  tabs.forEach(\n    function (tab) {\n\n\n      tab.addEventListener(\n        \"click\",\n        function () {\n\n\n          setSafetyMode(\n            tab.getAttribute(\n              \"data-h5e-safety\"\n            )\n          );\n\n\n        }\n      );\n\n\n    }\n  );\n\n\n  \/*\n     Render initial features because HTML container\n     intentionally starts empty.\n  *\/\n\n  setSafetyMode(\n    \"collision\"\n  );\n\n\n\n  \/* =========================================================\n     PHOTO GALLERY\n  ========================================================= *\/\n\n  const gallery =\n    document.getElementById(\n      \"h5e-safety-gallery\"\n    );\n\n\n  const slides =\n    Array.from(\n      section.querySelectorAll(\n        \".h5e-safety__slide\"\n      )\n    );\n\n\n  const photoButtons =\n    Array.from(\n      section.querySelectorAll(\n        \"[data-h5e-photo-button]\"\n      )\n    );\n\n\n  const prev =\n    document.getElementById(\n      \"h5e-photo-prev\"\n    );\n\n\n  const next =\n    document.getElementById(\n      \"h5e-photo-next\"\n    );\n\n\n  const reducedMotion =\n    window.matchMedia(\n      \"(prefers-reduced-motion: reduce)\"\n    ).matches;\n\n\n  let activePhoto =\n    0;\n\n\n  let timer =\n    null;\n\n\n  const interval =\n    4500;\n\n\n\n  function resetProgress() {\n\n\n    photoButtons.forEach(\n      function (button) {\n\n\n        const progress =\n          button.querySelector(\n            \".h5e-safety__photo-progress\"\n          );\n\n\n        if (progress) {\n\n\n          progress.style.animation =\n            \"none\";\n\n\n          void progress.offsetWidth;\n\n\n          progress.style.animation =\n            \"\";\n\n\n        }\n\n\n      }\n    );\n\n\n  }\n\n\n\n  function showPhoto(\n    index,\n    restart\n  ) {\n\n\n    if (!slides.length) {\n      return;\n    }\n\n\n    activePhoto =\n      (\n        index +\n        slides.length\n      ) %\n      slides.length;\n\n\n    slides.forEach(\n      function (\n        slide,\n        slideIndex\n      ) {\n\n\n        slide.classList.toggle(\n          \"is-active\",\n          slideIndex === activePhoto\n        );\n\n\n      }\n    );\n\n\n    photoButtons.forEach(\n      function (\n        button,\n        buttonIndex\n      ) {\n\n\n        button.classList.toggle(\n          \"is-active\",\n          buttonIndex === activePhoto\n        );\n\n\n      }\n    );\n\n\n    resetProgress();\n\n\n    if (\n      restart !== false\n    ) {\n\n\n      startAuto();\n\n\n    }\n\n\n  }\n\n\n\n  function nextPhoto() {\n\n\n    showPhoto(\n      activePhoto + 1,\n      false\n    );\n\n\n  }\n\n\n\n  function previousPhoto() {\n\n\n    showPhoto(\n      activePhoto - 1\n    );\n\n\n  }\n\n\n\n  function stopAuto() {\n\n\n    if (timer) {\n\n\n      clearInterval(\n        timer\n      );\n\n\n      timer =\n        null;\n\n\n    }\n\n\n  }\n\n\n\n  function startAuto() {\n\n\n    stopAuto();\n\n\n    if (\n      reducedMotion\n    ) {\n      return;\n    }\n\n\n    timer =\n      setInterval(\n        function () {\n\n\n          nextPhoto();\n\n\n          resetProgress();\n\n\n        },\n        interval\n      );\n\n\n  }\n\n\n\n  if (prev) {\n\n\n    prev.addEventListener(\n      \"click\",\n      function () {\n\n\n        previousPhoto();\n\n\n      }\n    );\n\n\n  }\n\n\n\n  if (next) {\n\n\n    next.addEventListener(\n      \"click\",\n      function () {\n\n\n        showPhoto(\n          activePhoto + 1\n        );\n\n\n      }\n    );\n\n\n  }\n\n\n\n  photoButtons.forEach(\n    function (\n      button,\n      index\n    ) {\n\n\n      button.addEventListener(\n        \"click\",\n        function () {\n\n\n          showPhoto(\n            index\n          );\n\n\n        }\n      );\n\n\n    }\n  );\n\n\n\n  \/* =========================================================\n     PAUSE AUTO WHEN USER IS INTERACTING\n  ========================================================= *\/\n\n  const visual =\n    document.getElementById(\n      \"h5e-safety-visual\"\n    );\n\n\n  if (visual) {\n\n\n    visual.addEventListener(\n      \"mouseenter\",\n      stopAuto\n    );\n\n\n    visual.addEventListener(\n      \"mouseleave\",\n      startAuto\n    );\n\n\n  }\n\n\n\n  \/* =========================================================\n     MOBILE SWIPE\n  ========================================================= *\/\n\n  if (gallery) {\n\n\n    let touchStartX =\n      null;\n\n\n    gallery.addEventListener(\n      \"touchstart\",\n      function (event) {\n\n\n        if (\n          event.touches &&\n          event.touches[0]\n        ) {\n\n\n          touchStartX =\n            event.touches[0].clientX;\n\n\n          stopAuto();\n\n\n        }\n\n\n      },\n      {\n        passive: true\n      }\n    );\n\n\n    gallery.addEventListener(\n      \"touchend\",\n      function (event) {\n\n\n        if (\n          touchStartX === null ||\n          !event.changedTouches ||\n          !event.changedTouches[0]\n        ) {\n\n\n          startAuto();\n\n          return;\n\n        }\n\n\n        const endX =\n          event.changedTouches[0].clientX;\n\n\n        const difference =\n          endX -\n          touchStartX;\n\n\n        if (\n          Math.abs(\n            difference\n          ) > 40\n        ) {\n\n\n          if (\n            difference < 0\n          ) {\n\n\n            showPhoto(\n              activePhoto + 1\n            );\n\n\n          } else {\n\n\n            showPhoto(\n              activePhoto - 1\n            );\n\n\n          }\n\n\n        } else {\n\n\n          startAuto();\n\n\n        }\n\n\n        touchStartX =\n          null;\n\n\n      },\n      {\n        passive: true\n      }\n    );\n\n\n  }\n\n\n\n  \/* =========================================================\n     START\n  ========================================================= *\/\n\n  showPhoto(\n    0\n  );\n\n\n})();\n<\/script>\n<\/div>\n<\/div>\n\n\n\n<style>\n\/* =========================================================\n   H5E SECTION 4 \u2014 ADAS VISUAL CLEANUP\n   Remove rotating \"clock hand\" radar sweep\n========================================================= *\/\n\n\/* REMOVE rotating orange scanning line completely *\/\n#h5e-safety .h5e-safety__sweep {\n  display: none !important;\n}\n\n\n\/* Make radar rings much more subtle *\/\n#h5e-safety .h5e-safety__radar {\n  border-color: rgba(255,100,51,.08) !important;\n\n  animation:\n    h5eSafetySoftRadar\n    4.8s\n    ease-in-out\n    infinite !important;\n}\n\n\n\/* Inner dashed circle \u2014 no rotation *\/\n#h5e-safety .h5e-safety__radar::before {\n  border-color: rgba(38,54,72,.08) !important;\n\n  animation: none !important;\n\n  opacity: .55;\n}\n\n\n\/* Inner orange circle *\/\n#h5e-safety .h5e-safety__radar::after {\n  border-color: rgba(255,100,51,.055) !important;\n}\n\n\n\/* Gentle breathing only *\/\n@keyframes h5eSafetySoftRadar {\n\n  0%,\n  100% {\n    opacity: .38;\n\n    transform:\n      translate(-50%,-50%)\n      scale(.985);\n  }\n\n  50% {\n    opacity: .62;\n\n    transform:\n      translate(-50%,-50%)\n      scale(1.015);\n  }\n\n}\n\n\n\/* Mobile \u2014 even softer *\/\n@media (max-width: 767px) {\n\n  #h5e-safety .h5e-safety__radar {\n    opacity: .35;\n  }\n\n}\n\n\n\/* Reduced motion *\/\n@media (prefers-reduced-motion: reduce) {\n\n  #h5e-safety .h5e-safety__radar {\n    animation: none !important;\n  }\n\n}\n<\/style>\n\n\n\n<div class=\"wp-block-columns alignfull is-layout-flex wp-container-core-columns-is-layout-995f960e wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<style>\n\/* =========================================================\n   FARIZON H5E \u2014 SECTION 05\n   DRIVER CABIN EXPERIENCE\n   COMPACT EDITORIAL VERSION\n========================================================= *\/\n\n.h5e-cabin,\n.h5e-cabin *,\n.h5e-cabin *::before,\n.h5e-cabin *::after {\n  box-sizing: border-box;\n}\n\n.h5e-cabin {\n  --orange: #ff6433;\n  --orange-dark: #e95428;\n  --navy: #263648;\n  --navy-deep: #1d2c3b;\n  --text: #5d6672;\n  --muted: #87919c;\n  --line: #e4e8ec;\n  --soft: #f5f6f8;\n  --white: #ffffff;\n\n  position: relative;\n\n  width: 100vw;\n  max-width: none;\n\n  margin:\n    0\n    0\n    0\n    calc(50% - 50vw) !important;\n\n  padding:\n    68px\n    24px;\n\n  overflow: hidden;\n\n  background:\n    linear-gradient(\n      180deg,\n      #f7f8fa 0%,\n      #eef2f5 100%\n    );\n\n  font-family:\n    Inter,\n    Arial,\n    sans-serif;\n}\n\n\n\/* =========================================================\n   BACKGROUND DECORATION\n========================================================= *\/\n\n.h5e-cabin::before {\n  content: \"\";\n\n  position: absolute;\n\n  width: 360px;\n  height: 360px;\n\n  left: -170px;\n  top: -170px;\n\n  border-radius: 50%;\n\n  background:\n    radial-gradient(\n      circle,\n      rgba(255,100,51,.09),\n      transparent 70%\n    );\n\n  pointer-events: none;\n}\n\n\n.h5e-cabin::after {\n  content: \"\";\n\n  position: absolute;\n\n  width: 420px;\n  height: 420px;\n\n  right: -210px;\n  bottom: -250px;\n\n  border-radius: 50%;\n\n  background:\n    radial-gradient(\n      circle,\n      rgba(38,54,72,.07),\n      transparent 70%\n    );\n\n  pointer-events: none;\n}\n\n\n\/* =========================================================\n   INNER\n========================================================= *\/\n\n.h5e-cabin__inner {\n  position: relative;\n\n  z-index: 2;\n\n  width: 100%;\n  max-width: 1280px;\n\n  margin: 0 auto;\n}\n\n\n\/* =========================================================\n   MAIN LAYOUT\n========================================================= *\/\n\n.h5e-cabin__layout {\n  display: grid;\n\n  grid-template-columns:\n    minmax(430px,.92fr)\n    minmax(0,1.08fr);\n\n  gap: 58px;\n\n  align-items: center;\n}\n\n\n\/* =========================================================\n   IMAGE SIDE\n========================================================= *\/\n\n.h5e-cabin__visual {\n  position: relative;\n\n  height: 530px;\n\n  overflow: hidden;\n\n  border-radius: 28px;\n\n  background:\n    #dfe4e8;\n\n  box-shadow:\n    0 18px 46px\n    rgba(38,54,72,.10);\n}\n\n\n.h5e-cabin__visual img {\n  display: block;\n\n  width: 100%;\n  height: 100%;\n\n  object-fit: cover;\n\n  object-position:\n    center center;\n\n  transition:\n    transform .7s\n    cubic-bezier(.2,.7,.3,1);\n}\n\n\n.h5e-cabin__visual:hover img {\n  transform:\n    scale(1.025);\n}\n\n\n\/* soft image overlay *\/\n\n.h5e-cabin__visual::after {\n  content: \"\";\n\n  position: absolute;\n\n  inset: 0;\n\n  background:\n    linear-gradient(\n      180deg,\n      transparent 45%,\n      rgba(16,28,40,.30) 100%\n    );\n\n  pointer-events: none;\n}\n\n\n\/* =========================================================\n   IMAGE TOP LABEL\n========================================================= *\/\n\n.h5e-cabin__visual-label {\n  position: absolute;\n\n  z-index: 4;\n\n  top: 20px;\n  left: 20px;\n\n  padding:\n    11px\n    14px;\n\n  border-radius: 13px;\n\n  background:\n    rgba(38,54,72,.91);\n\n  color:\n    #ffffff;\n\n  box-shadow:\n    0 12px 26px\n    rgba(22,35,48,.14);\n\n  backdrop-filter:\n    blur(8px);\n\n  -webkit-backdrop-filter:\n    blur(8px);\n}\n\n\n.h5e-cabin__visual-label span {\n  display: block;\n\n  margin-bottom: 4px;\n\n  color:\n    var(--orange);\n\n  font-size: 7px;\n  font-weight: 700;\n\n  letter-spacing: 1.1px;\n\n  text-transform: uppercase;\n}\n\n\n.h5e-cabin__visual-label strong {\n  display: block;\n\n  color:\n    #ffffff;\n\n  font-size: 12px;\n  font-weight: 700;\n}\n\n\n\/* =========================================================\n   IMAGE BOTTOM CAPTION\n========================================================= *\/\n\n.h5e-cabin__visual-caption {\n  position: absolute;\n\n  z-index: 4;\n\n  left: 20px;\n  right: 20px;\n  bottom: 20px;\n\n  display: flex;\n\n  justify-content: space-between;\n  align-items: center;\n\n  gap: 20px;\n\n  padding:\n    14px\n    16px;\n\n  border:\n    1px solid\n    rgba(255,255,255,.20);\n\n  border-radius: 16px;\n\n  background:\n    rgba(255,255,255,.91);\n\n  box-shadow:\n    0 10px 26px\n    rgba(30,44,57,.12);\n\n  backdrop-filter:\n    blur(8px);\n\n  -webkit-backdrop-filter:\n    blur(8px);\n}\n\n\n.h5e-cabin__caption-copy span {\n  display: block;\n\n  margin-bottom: 3px;\n\n  color:\n    #9099a3;\n\n  font-size: 7px;\n  font-weight: 700;\n\n  letter-spacing: 1px;\n\n  text-transform: uppercase;\n}\n\n\n.h5e-cabin__caption-copy strong {\n  display: block;\n\n  color:\n    var(--navy);\n\n  font-size: 12px;\n  font-weight: 700;\n}\n\n\n.h5e-cabin__caption-line {\n  flex:\n    0 0\n    54px;\n\n  height: 2px;\n\n  overflow: hidden;\n\n  border-radius: 999px;\n\n  background:\n    #dde2e6;\n}\n\n\n.h5e-cabin__caption-line::after {\n  content: \"\";\n\n  display: block;\n\n  width: 50%;\n  height: 100%;\n\n  border-radius: 999px;\n\n  background:\n    var(--orange);\n\n  animation:\n    h5eCabinLine\n    3s\n    ease-in-out\n    infinite;\n}\n\n\n\/* =========================================================\n   CONTENT SIDE\n========================================================= *\/\n\n.h5e-cabin__content {\n  max-width: 610px;\n}\n\n\n\/* eyebrow *\/\n\n.h5e-cabin__eyebrow {\n  display: flex;\n\n  align-items: center;\n\n  gap: 10px;\n\n  margin-bottom: 12px;\n\n  color:\n    var(--orange);\n\n  font-size: 10px;\n  font-weight: 700;\n\n  letter-spacing: 1.5px;\n\n  text-transform: uppercase;\n}\n\n\n.h5e-cabin__eyebrow::before {\n  content: \"\";\n\n  width: 32px;\n  height: 2px;\n\n  background:\n    var(--orange);\n}\n\n\n\/* heading *\/\n\n.h5e-cabin h2 {\n  max-width: 600px;\n\n  margin:\n    0\n    0\n    17px;\n\n  color:\n    var(--navy);\n\n  font-size:\n    clamp(\n      36px,\n      3.5vw,\n      44px\n    );\n\n  line-height: 1.07;\n\n  letter-spacing: -1px;\n\n  font-weight: 700;\n}\n\n\n.h5e-cabin h2 span {\n  color:\n    var(--orange);\n}\n\n\n\/* intro *\/\n\n.h5e-cabin__intro {\n  max-width: 580px;\n\n  margin:\n    0\n    0\n    27px;\n\n  color:\n    var(--text);\n\n  font-size: 14px;\n\n  line-height: 1.75;\n}\n\n\n\/* =========================================================\n   FEATURE LIST\n========================================================= *\/\n\n.h5e-cabin__features {\n  border-top:\n    1px solid\n    var(--line);\n}\n\n\n.h5e-cabin__feature {\n  position: relative;\n\n  display: grid;\n\n  grid-template-columns:\n    48px\n    minmax(0,1fr)\n    22px;\n\n  gap: 15px;\n\n  align-items: center;\n\n  min-height: 83px;\n\n  padding:\n    15px\n    6px;\n\n  border-bottom:\n    1px solid\n    var(--line);\n\n  transition:\n    padding-left .25s ease,\n    background .25s ease;\n}\n\n\n.h5e-cabin__feature:hover {\n  padding-left: 12px;\n\n  background:\n    rgba(255,255,255,.48);\n}\n\n\n\/* number *\/\n\n.h5e-cabin__feature-number {\n  display: flex;\n\n  align-items: center;\n  justify-content: center;\n\n  width: 38px;\n  height: 38px;\n\n  border-radius: 50%;\n\n  background:\n    rgba(255,100,51,.10);\n\n  color:\n    var(--orange);\n\n  font-size: 9px;\n  font-weight: 800;\n\n  transition:\n    background .25s ease,\n    color .25s ease;\n}\n\n\n.h5e-cabin__feature:hover\n.h5e-cabin__feature-number {\n  background:\n    var(--orange);\n\n  color:\n    #ffffff;\n}\n\n\n\/* text *\/\n\n.h5e-cabin__feature-copy strong {\n  display: block;\n\n  margin-bottom: 4px;\n\n  color:\n    var(--navy);\n\n  font-size: 15px;\n  font-weight: 700;\n}\n\n\n.h5e-cabin__feature-copy p {\n  margin: 0;\n\n  color:\n    var(--text);\n\n  font-size: 11px;\n\n  line-height: 1.6;\n}\n\n\n\/* arrow *\/\n\n.h5e-cabin__feature-arrow {\n  color:\n    #b4bbc2;\n\n  font-size: 16px;\n\n  transition:\n    color .25s ease,\n    transform .25s ease;\n}\n\n\n.h5e-cabin__feature:hover\n.h5e-cabin__feature-arrow {\n  color:\n    var(--orange);\n\n  transform:\n    translateX(3px);\n}\n\n\n\/* =========================================================\n   BOTTOM STATEMENT\n========================================================= *\/\n\n.h5e-cabin__statement {\n  position: relative;\n\n  margin-top: 25px;\n\n  padding:\n    20px\n    22px;\n\n  overflow: hidden;\n\n  border-radius: 18px;\n\n  background:\n    linear-gradient(\n      135deg,\n      #263648 0%,\n      #1c2d3e 100%\n    );\n\n  box-shadow:\n    0 15px 32px\n    rgba(38,54,72,.12);\n}\n\n\n.h5e-cabin__statement::before {\n  content: \"\";\n\n  position: absolute;\n\n  left: 0;\n  top: 0;\n  bottom: 0;\n\n  width: 3px;\n\n  background:\n    var(--orange);\n}\n\n\n.h5e-cabin__statement span {\n  display: block;\n\n  margin-bottom: 6px;\n\n  color:\n    var(--orange);\n\n  font-size: 7px;\n  font-weight: 700;\n\n  letter-spacing: 1.2px;\n\n  text-transform: uppercase;\n}\n\n\n.h5e-cabin__statement strong {\n  display: block;\n\n  margin-bottom: 6px;\n\n  color:\n    #ffffff;\n\n  font-size: 17px;\n  font-weight: 700;\n\n  line-height: 1.35;\n}\n\n\n.h5e-cabin__statement p {\n  max-width: 520px;\n\n  margin: 0;\n\n  color:\n    rgba(255,255,255,.66);\n\n  font-size: 10px;\n\n  line-height: 1.65;\n}\n\n\n\/* =========================================================\n   ANIMATION\n========================================================= *\/\n\n@keyframes h5eCabinLine {\n\n  0%,\n  100% {\n    transform:\n      translateX(0);\n  }\n\n  50% {\n    transform:\n      translateX(100%);\n  }\n\n}\n\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width: 1050px) {\n\n  .h5e-cabin {\n    padding:\n      60px\n      22px;\n  }\n\n\n  .h5e-cabin__layout {\n    grid-template-columns:\n      minmax(360px,.90fr)\n      minmax(0,1.1fr);\n\n    gap: 38px;\n  }\n\n\n  .h5e-cabin__visual {\n    height: 500px;\n  }\n\n\n  .h5e-cabin h2 {\n    font-size: 38px;\n  }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width: 767px) {\n\n  .h5e-cabin {\n    padding:\n      46px\n      16px;\n  }\n\n\n  .h5e-cabin__layout {\n    display: flex;\n\n    flex-direction: column;\n\n    gap: 30px;\n  }\n\n\n  \/* IMAGE *\/\n\n  .h5e-cabin__visual {\n    width: 100%;\n\n    height: 400px;\n\n    border-radius: 22px;\n  }\n\n\n  .h5e-cabin__visual img {\n    object-position:\n      center center;\n  }\n\n\n  .h5e-cabin__visual-label {\n    top: 13px;\n    left: 13px;\n\n    padding:\n      9px\n      11px;\n\n    border-radius: 11px;\n  }\n\n\n  .h5e-cabin__visual-label strong {\n    font-size: 10px;\n  }\n\n\n  .h5e-cabin__visual-caption {\n    left: 13px;\n    right: 13px;\n    bottom: 13px;\n\n    padding:\n      11px\n      12px;\n\n    border-radius: 13px;\n  }\n\n\n  .h5e-cabin__caption-copy strong {\n    font-size: 10px;\n  }\n\n\n  .h5e-cabin__caption-line {\n    flex-basis: 38px;\n  }\n\n\n  \/* CONTENT *\/\n\n  .h5e-cabin__content {\n    max-width: none;\n  }\n\n\n  .h5e-cabin__eyebrow {\n    margin-bottom: 10px;\n\n    font-size: 8px;\n  }\n\n\n  .h5e-cabin h2 {\n    max-width: 350px;\n\n    margin-bottom: 13px;\n\n    font-size: 32px;\n\n    line-height: 1.06;\n\n    letter-spacing: -.7px;\n  }\n\n\n  .h5e-cabin__intro {\n    margin-bottom: 22px;\n\n    font-size: 12px;\n\n    line-height: 1.68;\n  }\n\n\n  \/* FEATURE ROW *\/\n\n  .h5e-cabin__feature {\n    grid-template-columns:\n      40px\n      minmax(0,1fr);\n\n    gap: 11px;\n\n    min-height: 78px;\n\n    padding:\n      13px\n      2px;\n  }\n\n\n  .h5e-cabin__feature:hover {\n    padding-left: 2px;\n\n    background:\n      transparent;\n  }\n\n\n  .h5e-cabin__feature-number {\n    width: 34px;\n    height: 34px;\n  }\n\n\n  .h5e-cabin__feature-copy strong {\n    font-size: 14px;\n  }\n\n\n  .h5e-cabin__feature-copy p {\n    font-size: 10px;\n\n    line-height: 1.55;\n  }\n\n\n  .h5e-cabin__feature-arrow {\n    display: none;\n  }\n\n\n  \/* STATEMENT *\/\n\n  .h5e-cabin__statement {\n    margin-top: 22px;\n\n    padding:\n      18px\n      18px;\n\n    border-radius: 16px;\n  }\n\n\n  .h5e-cabin__statement strong {\n    font-size: 16px;\n  }\n\n\n  .h5e-cabin__statement p {\n    font-size: 10px;\n  }\n\n}\n\n\n\/* =========================================================\n   SMALL MOBILE\n========================================================= *\/\n\n@media (max-width: 380px) {\n\n  .h5e-cabin__visual {\n    height: 365px;\n  }\n\n\n  .h5e-cabin h2 {\n    font-size: 29px;\n  }\n\n\n  .h5e-cabin__intro {\n    font-size: 11px;\n  }\n\n}\n\n\n\/* =========================================================\n   REDUCED MOTION\n========================================================= *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n  .h5e-cabin *,\n  .h5e-cabin *::before,\n  .h5e-cabin *::after {\n    animation: none !important;\n    transition: none !important;\n  }\n\n}\n<\/style>\n\n\n<section\n  class=\"h5e-cabin\"\n  id=\"h5e-cabin\">\n\n\n  <div class=\"h5e-cabin__inner\">\n\n\n    <div class=\"h5e-cabin__layout\">\n\n\n      <!-- ===================================================\n           LEFT \u2014 CABIN PHOTO\n      ==================================================== -->\n\n      <div class=\"h5e-cabin__visual\">\n\n\n        <img\n          src=\"https:\/\/farizon.com.sg\/wp-content\/uploads\/2026\/10\/IMG_20260126_154049-scaled.jpg\"\n          alt=\"Farizon H5E driver cabin seating\"\n          loading=\"lazy\"\n          decoding=\"async\">\n\n\n        <div class=\"h5e-cabin__visual-label\">\n\n\n          <span>\n            Driver-Focused Cabin\n          <\/span>\n\n\n          <strong>\n            Designed for the Working Day\n          <\/strong>\n\n\n        <\/div>\n\n\n\n        <div class=\"h5e-cabin__visual-caption\">\n\n\n          <div class=\"h5e-cabin__caption-copy\">\n\n\n            <span>\n              H5E Cabin\n            <\/span>\n\n\n            <strong>\n              Practical Comfort for Daily Commercial Driving\n            <\/strong>\n\n\n          <\/div>\n\n\n          <div class=\"h5e-cabin__caption-line\"><\/div>\n\n\n        <\/div>\n\n\n      <\/div>\n\n\n\n      <!-- ===================================================\n           RIGHT \u2014 CONTENT\n      ==================================================== -->\n\n      <div class=\"h5e-cabin__content\">\n\n\n        <div class=\"h5e-cabin__eyebrow\">\n          Cabin & Driver Experience\n        <\/div>\n\n\n\n        <h2>\n\n          A Cabin Designed for\n\n          <span>\n            the Working Day.\n          <\/span>\n\n        <\/h2>\n\n\n\n        <p class=\"h5e-cabin__intro\">\n          Commercial driving means spending long hours behind\n          the wheel. The Farizon H5E cabin is designed around\n          practical day-to-day usability, giving drivers a\n          clean and work-focused environment for logistics,\n          distribution and fleet operations.\n        <\/p>\n\n\n\n        <!-- FEATURE 01 -->\n\n        <div class=\"h5e-cabin__features\">\n\n\n          <div class=\"h5e-cabin__feature\">\n\n\n            <div class=\"h5e-cabin__feature-number\">\n              01\n            <\/div>\n\n\n            <div class=\"h5e-cabin__feature-copy\">\n\n\n              <strong>\n                Driver-Focused Seating\n              <\/strong>\n\n\n              <p>\n                A practical seating environment designed around\n                regular commercial driving and everyday route use.\n              <\/p>\n\n\n            <\/div>\n\n\n            <div class=\"h5e-cabin__feature-arrow\">\n              \u2192\n            <\/div>\n\n\n          <\/div>\n\n\n\n          <!-- FEATURE 02 -->\n\n          <div class=\"h5e-cabin__feature\">\n\n\n            <div class=\"h5e-cabin__feature-number\">\n              02\n            <\/div>\n\n\n            <div class=\"h5e-cabin__feature-copy\">\n\n\n              <strong>\n                Built Around Daily Usability\n              <\/strong>\n\n\n              <p>\n                A straightforward cabin layout suited to the\n                practical requirements of business and fleet operations.\n              <\/p>\n\n\n            <\/div>\n\n\n            <div class=\"h5e-cabin__feature-arrow\">\n              \u2192\n            <\/div>\n\n\n          <\/div>\n\n\n\n          <!-- FEATURE 03 -->\n\n          <div class=\"h5e-cabin__feature\">\n\n\n            <div class=\"h5e-cabin__feature-number\">\n              03\n            <\/div>\n\n\n            <div class=\"h5e-cabin__feature-copy\">\n\n\n              <strong>\n                Ready for Commercial Routes\n              <\/strong>\n\n\n              <p>\n                Developed for logistics, distribution and\n                recurring commercial transport throughout the working day.\n              <\/p>\n\n\n            <\/div>\n\n\n            <div class=\"h5e-cabin__feature-arrow\">\n              \u2192\n            <\/div>\n\n\n          <\/div>\n\n\n        <\/div>\n\n\n\n        <!-- =================================================\n             BOTTOM STATEMENT\n        ================================================== -->\n\n        <div class=\"h5e-cabin__statement\">\n\n\n          <span>\n            Driver Experience\n          <\/span>\n\n\n          <strong>\n            Practical Inside. Business-Focused Outside.\n          <\/strong>\n\n\n          <p>\n            The H5E brings together a commercial-ready electric\n            platform with a cabin designed around the daily needs\n            of drivers and fleet operations.\n          <\/p>\n\n\n        <\/div>\n\n\n      <\/div>\n\n\n    <\/div>\n\n\n  <\/div>\n\n\n<\/section>\n<\/div>\n<\/div>\n\n\n\n<style>\n\/* =========================================================\n   H5E SECTION 5 \u2014 VISIBILITY FIX\n   Prevent Gutenberg \/ editor blank section\n========================================================= *\/\n\n.h5e-s5 .h5e-s5-visual,\n.h5e-s5 .h5e-s5-head,\n.h5e-s5 .h5e-s5-card,\n.h5e-s5 .h5e-s5-note,\n.h5e-s5 .h5e-s5-statbar {\n  opacity: 1 !important;\n  transform: none !important;\n}\n\n\/* Keep cards interactive *\/\n.h5e-s5 .h5e-s5-card:hover {\n  transform: translateY(-5px) !important;\n}\n\n\/* Floating image callouts still animated *\/\n.h5e-s5 .h5e-s5-float {\n  animation: h5eFloat 4.5s ease-in-out infinite !important;\n}\n<\/style>\n\n\n\n<div class=\"wp-block-columns alignfull is-layout-flex wp-container-core-columns-is-layout-995f960e wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<style>\n\/* =========================================================\n   FARIZON H5E \u2014 SECTION 06\n   CINEMATIC VIDEO \/ REAL-WORLD APPLICATIONS\n========================================================= *\/\n\n.h5e-film,\n.h5e-film *,\n.h5e-film *::before,\n.h5e-film *::after {\n  box-sizing: border-box;\n}\n\n.h5e-film {\n  --orange:#ff6433;\n  --orange-dark:#e95428;\n  --navy:#263648;\n  --deep:#142331;\n  --deep-2:#1b2d3d;\n  --white:#ffffff;\n  --muted:rgba(255,255,255,.62);\n  --line:rgba(255,255,255,.11);\n\n  position:relative;\n  width:100vw;\n  max-width:none;\n  margin:0 0 0 calc(50% - 50vw) !important;\n  padding:72px 24px 76px;\n  overflow:hidden;\n\n  background:\n    radial-gradient(circle at 78% 20%, rgba(255,100,51,.12), transparent 23%),\n    linear-gradient(135deg,#142331 0%,#213548 100%);\n\n  font-family:Inter,Arial,sans-serif;\n}\n\n\n\/* =========================================================\n   DECORATIVE BACKGROUND\n========================================================= *\/\n\n.h5e-film::before {\n  content:\"\";\n  position:absolute;\n  inset:0;\n\n  background-image:\n    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),\n    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);\n\n  background-size:52px 52px;\n\n  mask-image:\n    linear-gradient(\n      90deg,\n      transparent 0%,\n      #000 20%,\n      #000 80%,\n      transparent 100%\n    );\n\n  pointer-events:none;\n}\n\n\n.h5e-film::after {\n  content:\"\";\n  position:absolute;\n\n  width:500px;\n  height:500px;\n\n  right:-260px;\n  bottom:-300px;\n\n  border-radius:50%;\n\n  border:1px solid rgba(255,255,255,.05);\n\n  box-shadow:\n    0 0 0 80px rgba(255,255,255,.018),\n    0 0 0 160px rgba(255,255,255,.012);\n\n  pointer-events:none;\n}\n\n\n\/* =========================================================\n   INNER\n========================================================= *\/\n\n.h5e-film__inner {\n  position:relative;\n  z-index:2;\n\n  width:100%;\n  max-width:1280px;\n  margin:0 auto;\n}\n\n\n\/* =========================================================\n   HEADER\n========================================================= *\/\n\n.h5e-film__header {\n  display:grid;\n\n  grid-template-columns:\n    minmax(0,1fr)\n    minmax(320px,.65fr);\n\n  gap:50px;\n\n  align-items:end;\n\n  margin-bottom:30px;\n}\n\n\n.h5e-film__eyebrow {\n  display:flex;\n  align-items:center;\n  gap:10px;\n\n  margin-bottom:12px;\n\n  color:var(--orange);\n\n  font-size:10px;\n  font-weight:700;\n  letter-spacing:1.5px;\n  text-transform:uppercase;\n}\n\n\n.h5e-film__eyebrow::before {\n  content:\"\";\n  width:32px;\n  height:2px;\n  background:var(--orange);\n}\n\n\n.h5e-film h2 {\n  max-width:760px;\n\n  margin:0;\n\n  color:#fff;\n\n  font-size:clamp(38px,4vw,54px);\n  line-height:1.03;\n  letter-spacing:-1.2px;\n  font-weight:700;\n}\n\n\n.h5e-film h2 span {\n  display:block;\n  color:var(--orange);\n}\n\n\n.h5e-film__intro {\n  margin:0;\n\n  max-width:450px;\n\n  color:var(--muted);\n\n  font-size:13px;\n  line-height:1.75;\n}\n\n\n\/* =========================================================\n   CINEMATIC STAGE\n========================================================= *\/\n\n.h5e-film__stage {\n  display:grid;\n\n  grid-template-columns:\n    minmax(0,1.34fr)\n    minmax(270px,.46fr);\n\n  min-height:560px;\n\n  border:1px solid rgba(255,255,255,.10);\n\n  background:\n    rgba(255,255,255,.025);\n\n  box-shadow:\n    0 24px 60px rgba(0,0,0,.18);\n}\n\n\n\/* =========================================================\n   VIDEO SIDE\n========================================================= *\/\n\n.h5e-film__video-side {\n  position:relative;\n\n  display:flex;\n  flex-direction:column;\n\n  padding:26px;\n\n  min-width:0;\n}\n\n\n\/* top film label *\/\n\n.h5e-film__filmbar {\n  display:flex;\n  align-items:center;\n  justify-content:space-between;\n\n  gap:20px;\n\n  margin-bottom:16px;\n}\n\n\n.h5e-film__filmbar-left {\n  display:flex;\n  align-items:center;\n  gap:10px;\n}\n\n\n.h5e-film__live-dot {\n  width:8px;\n  height:8px;\n\n  border-radius:50%;\n\n  background:var(--orange);\n\n  box-shadow:\n    0 0 0 6px rgba(255,100,51,.10);\n\n  animation:\n    h5eFilmPulse\n    2s\n    ease-in-out\n    infinite;\n}\n\n\n.h5e-film__filmbar strong {\n  color:#fff;\n\n  font-size:9px;\n  font-weight:700;\n\n  letter-spacing:1.2px;\n\n  text-transform:uppercase;\n}\n\n\n.h5e-film__filmbar span {\n  color:rgba(255,255,255,.32);\n\n  font-size:8px;\n  font-weight:700;\n\n  letter-spacing:1px;\n\n  text-transform:uppercase;\n}\n\n\n\/* =========================================================\n   VIDEO FRAME\n========================================================= *\/\n\n.h5e-film__video-wrap {\n  position:relative;\n\n  width:100%;\n\n  aspect-ratio:16 \/ 9;\n\n  overflow:hidden;\n\n  background:#000;\n\n  box-shadow:\n    0 18px 42px\n    rgba(0,0,0,.24);\n}\n\n\n.h5e-film__video-wrap iframe {\n  position:absolute;\n\n  inset:0;\n\n  width:100%;\n  height:100%;\n\n  border:0;\n}\n\n\n\/* corner accents *\/\n\n.h5e-film__video-wrap::before,\n.h5e-film__video-wrap::after {\n  content:\"\";\n\n  position:absolute;\n\n  z-index:4;\n\n  width:32px;\n  height:32px;\n\n  pointer-events:none;\n}\n\n\n.h5e-film__video-wrap::before {\n  top:12px;\n  left:12px;\n\n  border-top:2px solid var(--orange);\n  border-left:2px solid var(--orange);\n}\n\n\n.h5e-film__video-wrap::after {\n  right:12px;\n  bottom:12px;\n\n  border-right:2px solid var(--orange);\n  border-bottom:2px solid var(--orange);\n}\n\n\n\/* =========================================================\n   VIDEO CAPTION\n========================================================= *\/\n\n.h5e-film__caption {\n  display:flex;\n\n  justify-content:space-between;\n  align-items:center;\n\n  gap:25px;\n\n  margin-top:18px;\n}\n\n\n.h5e-film__caption-copy span {\n  display:block;\n\n  margin-bottom:4px;\n\n  color:var(--orange);\n\n  font-size:7px;\n  font-weight:700;\n\n  letter-spacing:1.1px;\n\n  text-transform:uppercase;\n}\n\n\n.h5e-film__caption-copy strong {\n  display:block;\n\n  color:#fff;\n\n  font-size:13px;\n  font-weight:700;\n\n  line-height:1.4;\n}\n\n\n.h5e-film__caption-line {\n  position:relative;\n\n  flex:0 0 120px;\n\n  height:2px;\n\n  overflow:hidden;\n\n  border-radius:999px;\n\n  background:\n    rgba(255,255,255,.12);\n}\n\n\n.h5e-film__caption-line::after {\n  content:\"\";\n\n  position:absolute;\n\n  left:-45%;\n  top:0;\n\n  width:45%;\n  height:100%;\n\n  background:\n    var(--orange);\n\n  animation:\n    h5eFilmLine\n    3.2s\n    ease-in-out\n    infinite;\n}\n\n\n\/* =========================================================\n   APPLICATION RAIL\n========================================================= *\/\n\n.h5e-film__rail {\n  display:flex;\n\n  flex-direction:column;\n\n  justify-content:center;\n\n  padding:\n    34px\n    30px;\n\n  background:\n    rgba(12,24,35,.44);\n\n  border-left:\n    1px solid\n    rgba(255,255,255,.10);\n}\n\n\n.h5e-film__rail-label {\n  margin-bottom:18px;\n\n  color:\n    var(--orange);\n\n  font-size:8px;\n  font-weight:700;\n\n  letter-spacing:1.3px;\n\n  text-transform:uppercase;\n}\n\n\n.h5e-film__application {\n  position:relative;\n\n  padding:\n    18px\n    0\n    17px\n    34px;\n\n  border-top:\n    1px solid\n    rgba(255,255,255,.10);\n\n  transition:\n    padding-left .25s ease;\n}\n\n\n.h5e-film__application:last-of-type {\n  border-bottom:\n    1px solid\n    rgba(255,255,255,.10);\n}\n\n\n.h5e-film__application::before {\n  content:\"\";\n\n  position:absolute;\n\n  left:0;\n  top:25px;\n\n  width:8px;\n  height:8px;\n\n  border-radius:50%;\n\n  border:\n    1px solid\n    rgba(255,255,255,.26);\n\n  background:\n    transparent;\n\n  transition:\n    background .25s ease,\n    border-color .25s ease,\n    box-shadow .25s ease;\n}\n\n\n.h5e-film__application:hover {\n  padding-left:40px;\n}\n\n\n.h5e-film__application:hover::before {\n  background:\n    var(--orange);\n\n  border-color:\n    var(--orange);\n\n  box-shadow:\n    0 0 0 6px\n    rgba(255,100,51,.09);\n}\n\n\n.h5e-film__application small {\n  display:block;\n\n  margin-bottom:5px;\n\n  color:\n    rgba(255,255,255,.28);\n\n  font-size:7px;\n  font-weight:700;\n\n  letter-spacing:1px;\n\n  text-transform:uppercase;\n}\n\n\n.h5e-film__application strong {\n  display:block;\n\n  margin-bottom:5px;\n\n  color:#fff;\n\n  font-size:14px;\n  font-weight:700;\n\n  line-height:1.3;\n}\n\n\n.h5e-film__application p {\n  margin:0;\n\n  color:\n    rgba(255,255,255,.50);\n\n  font-size:9px;\n\n  line-height:1.6;\n}\n\n\n\/* =========================================================\n   RAIL FOOTER\n========================================================= *\/\n\n.h5e-film__rail-foot {\n  margin-top:23px;\n}\n\n\n.h5e-film__rail-foot span {\n  display:block;\n\n  margin-bottom:7px;\n\n  color:\n    rgba(255,255,255,.28);\n\n  font-size:7px;\n  font-weight:700;\n\n  letter-spacing:1px;\n\n  text-transform:uppercase;\n}\n\n\n.h5e-film__rail-foot strong {\n  display:block;\n\n  color:#fff;\n\n  font-size:15px;\n  font-weight:700;\n\n  line-height:1.4;\n}\n\n\n.h5e-film__rail-foot strong em {\n  color:\n    var(--orange);\n\n  font-style:normal;\n}\n\n\n\/* =========================================================\n   BOTTOM STRIP\n========================================================= *\/\n\n.h5e-film__strip {\n  display:grid;\n\n  grid-template-columns:\n    auto\n    1fr\n    auto;\n\n  gap:18px;\n\n  align-items:center;\n\n  margin-top:22px;\n}\n\n\n.h5e-film__strip-number {\n  color:\n    var(--orange);\n\n  font-size:9px;\n  font-weight:800;\n\n  letter-spacing:1px;\n}\n\n\n.h5e-film__strip-line {\n  height:1px;\n\n  background:\n    rgba(255,255,255,.12);\n}\n\n\n.h5e-film__strip-copy {\n  color:\n    rgba(255,255,255,.40);\n\n  font-size:8px;\n  font-weight:700;\n\n  letter-spacing:1px;\n\n  text-transform:uppercase;\n}\n\n\n\/* =========================================================\n   ANIMATION\n========================================================= *\/\n\n@keyframes h5eFilmPulse {\n\n  0%,\n  100% {\n    transform:scale(.85);\n    opacity:.55;\n  }\n\n  50% {\n    transform:scale(1);\n    opacity:1;\n  }\n\n}\n\n\n@keyframes h5eFilmLine {\n\n  0% {\n    left:-45%;\n  }\n\n  55% {\n    left:100%;\n  }\n\n  100% {\n    left:100%;\n  }\n\n}\n\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width:1050px) {\n\n  .h5e-film__header {\n    gap:32px;\n  }\n\n\n  .h5e-film__stage {\n    grid-template-columns:\n      minmax(0,1.2fr)\n      minmax(250px,.55fr);\n  }\n\n\n  .h5e-film__rail {\n    padding:\n      28px\n      24px;\n  }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width:767px) {\n\n  .h5e-film {\n    padding:\n      46px\n      16px\n      50px;\n  }\n\n\n  .h5e-film__header {\n    display:block;\n\n    margin-bottom:22px;\n  }\n\n\n  .h5e-film__eyebrow {\n    margin-bottom:9px;\n\n    font-size:8px;\n  }\n\n\n  .h5e-film h2 {\n    max-width:350px;\n\n    margin-bottom:13px;\n\n    font-size:33px;\n\n    line-height:1.05;\n\n    letter-spacing:-.8px;\n  }\n\n\n  .h5e-film__intro {\n    max-width:360px;\n\n    font-size:12px;\n\n    line-height:1.65;\n  }\n\n\n  .h5e-film__stage {\n    display:flex;\n\n    flex-direction:column;\n\n    min-height:0;\n  }\n\n\n  .h5e-film__video-side {\n    padding:\n      16px;\n  }\n\n\n  .h5e-film__filmbar {\n    margin-bottom:12px;\n  }\n\n\n  .h5e-film__filmbar strong {\n    font-size:8px;\n  }\n\n\n  .h5e-film__filmbar span {\n    font-size:7px;\n  }\n\n\n  .h5e-film__video-wrap {\n    aspect-ratio:16 \/ 9;\n  }\n\n\n  .h5e-film__caption {\n    margin-top:14px;\n  }\n\n\n  .h5e-film__caption-copy strong {\n    font-size:11px;\n  }\n\n\n  .h5e-film__caption-line {\n    flex-basis:58px;\n  }\n\n\n  \/* applications become clean rows *\/\n\n  .h5e-film__rail {\n    padding:\n      22px\n      18px\n      24px;\n\n    border-left:0;\n\n    border-top:\n      1px solid\n      rgba(255,255,255,.10);\n  }\n\n\n  .h5e-film__rail-label {\n    margin-bottom:10px;\n  }\n\n\n  .h5e-film__application {\n    padding:\n      14px\n      0\n      14px\n      27px;\n  }\n\n\n  .h5e-film__application::before {\n    top:19px;\n  }\n\n\n  .h5e-film__application:hover {\n    padding-left:27px;\n  }\n\n\n  .h5e-film__application strong {\n    font-size:13px;\n  }\n\n\n  .h5e-film__application p {\n    font-size:9px;\n  }\n\n\n  .h5e-film__rail-foot {\n    margin-top:18px;\n  }\n\n\n  .h5e-film__rail-foot strong {\n    font-size:14px;\n  }\n\n\n  .h5e-film__strip {\n    margin-top:17px;\n  }\n\n\n  .h5e-film__strip-copy {\n    font-size:7px;\n  }\n\n}\n\n\n\/* =========================================================\n   SMALL MOBILE\n========================================================= *\/\n\n@media (max-width:380px) {\n\n  .h5e-film h2 {\n    font-size:30px;\n  }\n\n\n  .h5e-film__video-side {\n    padding:\n      13px;\n  }\n\n\n  .h5e-film__rail {\n    padding:\n      20px\n      15px\n      22px;\n  }\n\n}\n\n\n\/* =========================================================\n   REDUCED MOTION\n========================================================= *\/\n\n@media (prefers-reduced-motion:reduce) {\n\n  .h5e-film *,\n  .h5e-film *::before,\n  .h5e-film *::after {\n    animation:none !important;\n    transition:none !important;\n  }\n\n}\n<\/style>\n\n\n<section\n  class=\"h5e-film\"\n  id=\"h5e-in-action\">\n\n\n  <div class=\"h5e-film__inner\">\n\n\n    <!-- =====================================================\n         HEADER\n    ====================================================== -->\n\n    <div class=\"h5e-film__header\">\n\n\n      <div>\n\n\n        <div class=\"h5e-film__eyebrow\">\n          H5E in Action\n        <\/div>\n\n\n        <h2>\n          See the H5E\n          <span>Beyond the Specification Sheet.<\/span>\n        <\/h2>\n\n\n      <\/div>\n\n\n      <p class=\"h5e-film__intro\">\n        Explore the Farizon H5E in motion and see how its\n        commercial-focused design fits into logistics,\n        distribution and everyday business operations.\n      <\/p>\n\n\n    <\/div>\n\n\n\n    <!-- =====================================================\n         MAIN CINEMATIC STAGE\n    ====================================================== -->\n\n    <div class=\"h5e-film__stage\">\n\n\n      <!-- VIDEO -->\n\n      <div class=\"h5e-film__video-side\">\n\n\n        <div class=\"h5e-film__filmbar\">\n\n\n          <div class=\"h5e-film__filmbar-left\">\n\n            <div class=\"h5e-film__live-dot\"><\/div>\n\n            <strong>\n              Farizon H5E Film\n            <\/strong>\n\n          <\/div>\n\n\n          <span>\n            Official Product Video\n          <\/span>\n\n\n        <\/div>\n\n\n\n        <div class=\"h5e-film__video-wrap\">\n\n\n          <iframe\n            src=\"https:\/\/www.youtube-nocookie.com\/embed\/vgFq5Oww4WA?rel=0&#038;modestbranding=1\"\n            title=\"Farizon H5E electric truck video\"\n            loading=\"lazy\"\n            allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n            allowfullscreen>\n          <\/iframe>\n\n\n        <\/div>\n\n\n\n        <div class=\"h5e-film__caption\">\n\n\n          <div class=\"h5e-film__caption-copy\">\n\n            <span>\n              Commercial Electric Truck\n            <\/span>\n\n            <strong>\n              Watch the H5E from the road to the working environment.\n            <\/strong>\n\n          <\/div>\n\n\n          <div class=\"h5e-film__caption-line\"><\/div>\n\n\n        <\/div>\n\n\n      <\/div>\n\n\n\n      <!-- ===================================================\n           APPLICATION RAIL\n      ==================================================== -->\n\n      <aside class=\"h5e-film__rail\">\n\n\n        <div class=\"h5e-film__rail-label\">\n          Built for Commercial Work\n        <\/div>\n\n\n\n        <div class=\"h5e-film__application\">\n\n          <small>\n            01 \/ Application\n          <\/small>\n\n          <strong>\n            Logistics & Distribution\n          <\/strong>\n\n          <p>\n            Suitable for regular commercial routes,\n            goods movement and distribution operations.\n          <\/p>\n\n        <\/div>\n\n\n\n        <div class=\"h5e-film__application\">\n\n          <small>\n            02 \/ Application\n          <\/small>\n\n          <strong>\n            FMCG & Delivery\n          <\/strong>\n\n          <p>\n            A practical electric truck platform for\n            scheduled delivery and urban business use.\n          <\/p>\n\n        <\/div>\n\n\n\n        <div class=\"h5e-film__application\">\n\n          <small>\n            03 \/ Application\n          <\/small>\n\n          <strong>\n            Cold Chain\n          <\/strong>\n\n          <p>\n            The H5E commercial platform can support\n            specialised body configurations for business needs.\n          <\/p>\n\n        <\/div>\n\n\n\n        <div class=\"h5e-film__application\">\n\n          <small>\n            04 \/ Application\n          <\/small>\n\n          <strong>\n            Construction & Fleet\n          <\/strong>\n\n          <p>\n            Built for businesses requiring a commercial\n            truck platform for recurring fleet operations.\n          <\/p>\n\n        <\/div>\n\n\n\n        <div class=\"h5e-film__rail-foot\">\n\n          <span>\n            Farizon H5E Singapore\n          <\/span>\n\n          <strong>\n            One electric platform.\n            <em>Multiple business roles.<\/em>\n          <\/strong>\n\n        <\/div>\n\n\n      <\/aside>\n\n\n    <\/div>\n\n\n\n    <!-- =====================================================\n         BOTTOM FILM STRIP\n    ====================================================== -->\n\n    <div class=\"h5e-film__strip\">\n\n      <div class=\"h5e-film__strip-number\">\n        06\n      <\/div>\n\n      <div class=\"h5e-film__strip-line\"><\/div>\n\n      <div class=\"h5e-film__strip-copy\">\n        Electric Commercial Mobility\n      <\/div>\n\n    <\/div>\n\n\n  <\/div>\n\n\n<\/section>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns alignfull is-layout-flex wp-container-core-columns-is-layout-995f960e wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<style>\n\/* =========================================================\n   FARIZON H5E \u2014 SECTION 07\n   OWNERSHIP CONFIDENCE + ENQUIRY\n========================================================= *\/\n\n.h5e-close,\n.h5e-close *,\n.h5e-close *::before,\n.h5e-close *::after {\n  box-sizing: border-box;\n}\n\n.h5e-close {\n  --orange:#ff6433;\n  --orange-dark:#e95428;\n  --navy:#263648;\n  --deep:#182838;\n  --deep-2:#213548;\n  --text:#5d6672;\n  --muted:#8a949f;\n  --line:#e4e8ec;\n  --soft:#f4f6f8;\n  --white:#ffffff;\n\n  position:relative;\n\n  width:100vw;\n  max-width:none;\n\n  margin:\n    0\n    0\n    0\n    calc(50% - 50vw) !important;\n\n  padding:\n    72px\n    24px\n    78px;\n\n  overflow:hidden;\n\n  background:\n    linear-gradient(\n      180deg,\n      #ffffff 0%,\n      #f2f5f7 100%\n    );\n\n  font-family:\n    Inter,\n    Arial,\n    sans-serif;\n\n  scroll-margin-top:90px;\n}\n\n\n\/* =========================================================\n   BACKGROUND\n========================================================= *\/\n\n.h5e-close::before {\n  content:\"\";\n\n  position:absolute;\n\n  width:430px;\n  height:430px;\n\n  top:-220px;\n  right:-180px;\n\n  border-radius:50%;\n\n  background:\n    radial-gradient(\n      circle,\n      rgba(255,100,51,.09),\n      transparent 70%\n    );\n\n  pointer-events:none;\n}\n\n\n.h5e-close::after {\n  content:\"\";\n\n  position:absolute;\n\n  width:480px;\n  height:480px;\n\n  bottom:-300px;\n  left:-220px;\n\n  border-radius:50%;\n\n  background:\n    radial-gradient(\n      circle,\n      rgba(38,54,72,.07),\n      transparent 70%\n    );\n\n  pointer-events:none;\n}\n\n\n\/* =========================================================\n   INNER\n========================================================= *\/\n\n.h5e-close__inner {\n  position:relative;\n  z-index:2;\n\n  width:100%;\n  max-width:1280px;\n\n  margin:0 auto;\n}\n\n\n\/* =========================================================\n   HEADER\n========================================================= *\/\n\n.h5e-close__header {\n  display:grid;\n\n  grid-template-columns:\n    minmax(0,1fr)\n    minmax(320px,.65fr);\n\n  gap:50px;\n\n  align-items:end;\n\n  margin-bottom:30px;\n}\n\n\n.h5e-close__eyebrow {\n  display:flex;\n  align-items:center;\n  gap:10px;\n\n  margin-bottom:12px;\n\n  color:var(--orange);\n\n  font-size:10px;\n  font-weight:700;\n\n  letter-spacing:1.5px;\n\n  text-transform:uppercase;\n}\n\n\n.h5e-close__eyebrow::before {\n  content:\"\";\n\n  width:32px;\n  height:2px;\n\n  background:var(--orange);\n}\n\n\n.h5e-close h2 {\n  max-width:760px;\n\n  margin:0;\n\n  color:var(--navy);\n\n  font-size:\n    clamp(\n      38px,\n      3.8vw,\n      52px\n    );\n\n  line-height:1.04;\n\n  letter-spacing:-1.1px;\n\n  font-weight:700;\n}\n\n\n.h5e-close h2 span {\n  display:block;\n\n  color:var(--orange);\n}\n\n\n.h5e-close__intro {\n  max-width:450px;\n\n  margin:0;\n\n  color:var(--text);\n\n  font-size:13px;\n\n  line-height:1.75;\n}\n\n\n\/* =========================================================\n   WARRANTY RAIL\n========================================================= *\/\n\n.h5e-close__warranty {\n  display:grid;\n\n  grid-template-columns:\n    repeat(3,1fr);\n\n  overflow:hidden;\n\n  border:\n    1px solid\n    var(--line);\n\n  background:#ffffff;\n\n  box-shadow:\n    0 18px 42px\n    rgba(38,54,72,.07);\n\n  margin-bottom:24px;\n}\n\n\n.h5e-close__warranty-item {\n  position:relative;\n\n  padding:\n    26px\n    26px\n    24px;\n\n  min-height:175px;\n\n  border-right:\n    1px solid\n    var(--line);\n\n  transition:\n    background .25s ease,\n    transform .25s ease;\n}\n\n\n.h5e-close__warranty-item:last-child {\n  border-right:0;\n}\n\n\n.h5e-close__warranty-item:hover {\n  background:\n    #fafbfc;\n}\n\n\n.h5e-close__warranty-index {\n  display:block;\n\n  margin-bottom:18px;\n\n  color:var(--orange);\n\n  font-size:9px;\n  font-weight:800;\n\n  letter-spacing:1.2px;\n}\n\n\n.h5e-close__warranty-label {\n  display:block;\n\n  margin-bottom:6px;\n\n  color:var(--muted);\n\n  font-size:8px;\n  font-weight:700;\n\n  letter-spacing:1.1px;\n\n  text-transform:uppercase;\n}\n\n\n.h5e-close__warranty-value {\n  display:block;\n\n  margin-bottom:7px;\n\n  color:var(--navy);\n\n  font-size:25px;\n  font-weight:700;\n\n  line-height:1.1;\n}\n\n\n.h5e-close__warranty-sub {\n  display:block;\n\n  color:var(--text);\n\n  font-size:11px;\n\n  line-height:1.55;\n}\n\n\n\/* underline *\/\n\n.h5e-close__warranty-item::after {\n  content:\"\";\n\n  position:absolute;\n\n  left:26px;\n  right:26px;\n  bottom:0;\n\n  height:3px;\n\n  transform:scaleX(0);\n\n  transform-origin:left center;\n\n  background:var(--orange);\n\n  transition:\n    transform .3s ease;\n}\n\n\n.h5e-close__warranty-item:hover::after {\n  transform:scaleX(1);\n}\n\n\n\/* =========================================================\n   SUPPORT STRIP\n========================================================= *\/\n\n.h5e-close__support {\n  display:grid;\n\n  grid-template-columns:\n    auto\n    1fr\n    auto;\n\n  gap:22px;\n\n  align-items:center;\n\n  padding:\n    20px\n    22px;\n\n  margin-bottom:26px;\n\n  background:\n    linear-gradient(\n      135deg,\n      #263648 0%,\n      #1b2d3e 100%\n    );\n\n  color:#ffffff;\n\n  box-shadow:\n    0 16px 34px\n    rgba(38,54,72,.12);\n}\n\n\n.h5e-close__support-mark {\n  width:44px;\n  height:44px;\n\n  display:flex;\n  align-items:center;\n  justify-content:center;\n\n  border-radius:50%;\n\n  background:\n    rgba(255,100,51,.13);\n\n  color:var(--orange);\n\n  font-size:13px;\n  font-weight:800;\n\n  border:\n    1px solid\n    rgba(255,100,51,.24);\n}\n\n\n.h5e-close__support-copy span {\n  display:block;\n\n  margin-bottom:4px;\n\n  color:var(--orange);\n\n  font-size:7px;\n  font-weight:700;\n\n  letter-spacing:1.1px;\n\n  text-transform:uppercase;\n}\n\n\n.h5e-close__support-copy strong {\n  display:block;\n\n  margin-bottom:4px;\n\n  color:#ffffff;\n\n  font-size:15px;\n  font-weight:700;\n}\n\n\n.h5e-close__support-copy p {\n  margin:0;\n\n  color:\n    rgba(255,255,255,.62);\n\n  font-size:10px;\n\n  line-height:1.6;\n}\n\n\n.h5e-close__support-name {\n  color:\n    rgba(255,255,255,.45);\n\n  font-size:9px;\n  font-weight:700;\n\n  letter-spacing:1px;\n\n  text-transform:uppercase;\n\n  white-space:nowrap;\n}\n\n\n\/* =========================================================\n   ENQUIRY PANEL\n========================================================= *\/\n\n.h5e-close__enquiry {\n  display:grid;\n\n  grid-template-columns:\n    minmax(310px,.70fr)\n    minmax(0,1.30fr);\n\n  overflow:hidden;\n\n  border:\n    1px solid\n    var(--line);\n\n  background:\n    #ffffff;\n\n  box-shadow:\n    0 22px 55px\n    rgba(38,54,72,.08);\n}\n\n\n\/* =========================================================\n   ENQUIRY LEFT\n========================================================= *\/\n\n.h5e-close__enquiry-copy {\n  position:relative;\n\n  padding:\n    42px\n    36px;\n\n  overflow:hidden;\n\n  background:\n    linear-gradient(\n      145deg,\n      #263648 0%,\n      #192b3b 100%\n    );\n\n  color:#ffffff;\n}\n\n\n.h5e-close__enquiry-copy::after {\n  content:\"\";\n\n  position:absolute;\n\n  width:250px;\n  height:250px;\n\n  right:-120px;\n  bottom:-120px;\n\n  border-radius:50%;\n\n  border:\n    1px solid\n    rgba(255,255,255,.05);\n\n  box-shadow:\n    0 0 0 50px rgba(255,255,255,.015),\n    0 0 0 100px rgba(255,255,255,.010);\n\n  pointer-events:none;\n}\n\n\n.h5e-close__enquiry-label {\n  position:relative;\n  z-index:2;\n\n  display:block;\n\n  margin-bottom:12px;\n\n  color:var(--orange);\n\n  font-size:9px;\n  font-weight:700;\n\n  letter-spacing:1.4px;\n\n  text-transform:uppercase;\n}\n\n\n.h5e-close__enquiry-copy h3 {\n  position:relative;\n  z-index:2;\n\n  max-width:390px;\n\n  margin:\n    0\n    0\n    14px;\n\n  color:#ffffff;\n\n  font-size:\n    clamp(\n      29px,\n      3vw,\n      38px\n    );\n\n  line-height:1.08;\n\n  letter-spacing:-.8px;\n\n  font-weight:700;\n}\n\n\n.h5e-close__enquiry-copy > p {\n  position:relative;\n  z-index:2;\n\n  max-width:390px;\n\n  margin:\n    0\n    0\n    28px;\n\n  color:\n    rgba(255,255,255,.64);\n\n  font-size:11px;\n\n  line-height:1.72;\n}\n\n\n\/* =========================================================\n   ENQUIRY CHIPS\n========================================================= *\/\n\n.h5e-close__chips {\n  position:relative;\n  z-index:2;\n\n  display:flex;\n\n  flex-wrap:wrap;\n\n  gap:8px;\n\n  margin-bottom:28px;\n}\n\n\n.h5e-close__chip {\n  padding:\n    9px\n    11px;\n\n  border:\n    1px solid\n    rgba(255,255,255,.13);\n\n  color:\n    rgba(255,255,255,.75);\n\n  background:\n    rgba(255,255,255,.035);\n\n  font-size:8px;\n  font-weight:600;\n}\n\n\n\/* =========================================================\n   CONTACT DETAIL\n========================================================= *\/\n\n.h5e-close__contact {\n  position:relative;\n  z-index:2;\n\n  padding-top:20px;\n\n  border-top:\n    1px solid\n    rgba(255,255,255,.10);\n}\n\n\n.h5e-close__contact-row {\n  display:grid;\n\n  grid-template-columns:\n    78px\n    1fr;\n\n  gap:12px;\n\n  padding:\n    6px\n    0;\n}\n\n\n.h5e-close__contact-row span {\n  color:\n    rgba(255,255,255,.30);\n\n  font-size:7px;\n  font-weight:700;\n\n  letter-spacing:.8px;\n\n  text-transform:uppercase;\n}\n\n\n.h5e-close__contact-row strong {\n  color:\n    rgba(255,255,255,.82);\n\n  font-size:10px;\n  font-weight:600;\n\n  line-height:1.5;\n}\n\n\n\/* =========================================================\n   FORM SIDE\n========================================================= *\/\n\n.h5e-close__form {\n  position:relative;\n\n  min-width:0;\n\n  padding:\n    26px\n    26px\n    20px;\n\n  background:\n    #ffffff;\n}\n\n\n.h5e-close__form-top {\n  display:flex;\n\n  justify-content:space-between;\n  align-items:center;\n\n  gap:20px;\n\n  margin-bottom:14px;\n\n  padding-bottom:13px;\n\n  border-bottom:\n    1px solid\n    var(--line);\n}\n\n\n.h5e-close__form-title span {\n  display:block;\n\n  margin-bottom:3px;\n\n  color:var(--orange);\n\n  font-size:7px;\n  font-weight:700;\n\n  letter-spacing:1.1px;\n\n  text-transform:uppercase;\n}\n\n\n.h5e-close__form-title strong {\n  display:block;\n\n  color:var(--navy);\n\n  font-size:14px;\n  font-weight:700;\n}\n\n\n.h5e-close__form-status {\n  display:flex;\n\n  align-items:center;\n\n  gap:7px;\n\n  color:#7c8791;\n\n  font-size:8px;\n  font-weight:700;\n\n  text-transform:uppercase;\n\n  letter-spacing:.8px;\n}\n\n\n.h5e-close__form-status::before {\n  content:\"\";\n\n  width:7px;\n  height:7px;\n\n  border-radius:50%;\n\n  background:var(--orange);\n\n  box-shadow:\n    0 0 0 5px\n    rgba(255,100,51,.10);\n}\n\n\n\/* =========================================================\n   PEPPERCLOUD\n========================================================= *\/\n\n.h5e-close__iframe-wrap {\n  position:relative;\n\n  width:100%;\n\n  min-height:750px;\n\n  overflow:hidden;\n\n  background:#ffffff;\n}\n\n\n.h5e-close__iframe-wrap iframe {\n  display:block;\n\n  width:100%;\n\n  height:750px;\n\n  margin:0;\n\n  border:0;\n\n  background:#ffffff;\n}\n\n\n\/* =========================================================\n   DISCLAIMER\n========================================================= *\/\n\n.h5e-close__note {\n  margin:\n    12px\n    0\n    0;\n\n  color:#929aa3;\n\n  font-size:8px;\n\n  line-height:1.6;\n}\n\n\n\/* =========================================================\n   MOBILE \/ TABLET\n========================================================= *\/\n\n@media (max-width:1000px) {\n\n  .h5e-close__enquiry {\n    grid-template-columns:\n      minmax(280px,.75fr)\n      minmax(0,1.25fr);\n  }\n\n\n  .h5e-close__enquiry-copy {\n    padding:\n      34px\n      28px;\n  }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width:767px) {\n\n  .h5e-close {\n    padding:\n      46px\n      16px\n      52px;\n  }\n\n\n  \/* header *\/\n\n  .h5e-close__header {\n    display:block;\n\n    margin-bottom:22px;\n  }\n\n\n  .h5e-close__eyebrow {\n    margin-bottom:9px;\n\n    font-size:8px;\n  }\n\n\n  .h5e-close h2 {\n    max-width:350px;\n\n    margin-bottom:13px;\n\n    font-size:32px;\n\n    line-height:1.05;\n\n    letter-spacing:-.7px;\n  }\n\n\n  .h5e-close__intro {\n    max-width:360px;\n\n    font-size:12px;\n\n    line-height:1.65;\n  }\n\n\n  \/* warranty *\/\n\n  .h5e-close__warranty {\n    display:block;\n\n    margin-bottom:18px;\n  }\n\n\n  .h5e-close__warranty-item {\n    min-height:0;\n\n    padding:\n      20px\n      18px;\n\n    border-right:0;\n\n    border-bottom:\n      1px solid\n      var(--line);\n  }\n\n\n  .h5e-close__warranty-item:last-child {\n    border-bottom:0;\n  }\n\n\n  .h5e-close__warranty-index {\n    margin-bottom:11px;\n  }\n\n\n  .h5e-close__warranty-value {\n    font-size:22px;\n  }\n\n\n  .h5e-close__warranty-item::after {\n    display:none;\n  }\n\n\n  \/* support *\/\n\n  .h5e-close__support {\n    grid-template-columns:\n      40px\n      1fr;\n\n    gap:13px;\n\n    padding:\n      17px;\n\n    margin-bottom:18px;\n  }\n\n\n  .h5e-close__support-mark {\n    width:38px;\n    height:38px;\n  }\n\n\n  .h5e-close__support-copy strong {\n    font-size:13px;\n  }\n\n\n  .h5e-close__support-copy p {\n    font-size:9px;\n  }\n\n\n  .h5e-close__support-name {\n    display:none;\n  }\n\n\n  \/* enquiry *\/\n\n  .h5e-close__enquiry {\n    display:flex;\n\n    flex-direction:column;\n  }\n\n\n  .h5e-close__enquiry-copy {\n    padding:\n      28px\n      20px;\n  }\n\n\n  .h5e-close__enquiry-copy h3 {\n    max-width:330px;\n\n    font-size:28px;\n  }\n\n\n  .h5e-close__enquiry-copy > p {\n    font-size:10px;\n  }\n\n\n  .h5e-close__chips {\n    margin-bottom:22px;\n  }\n\n\n  .h5e-close__contact-row {\n    grid-template-columns:\n      64px\n      1fr;\n  }\n\n\n  \/* form *\/\n\n  .h5e-close__form {\n    padding:\n      18px\n      12px\n      14px;\n  }\n\n\n  .h5e-close__form-top {\n    margin:\n      0\n      4px\n      12px;\n  }\n\n\n  .h5e-close__form-title strong {\n    font-size:12px;\n  }\n\n\n  .h5e-close__form-status {\n    font-size:7px;\n  }\n\n\n  .h5e-close__iframe-wrap {\n    min-height:760px;\n  }\n\n\n  .h5e-close__iframe-wrap iframe {\n    height:760px;\n  }\n\n\n  .h5e-close__note {\n    padding:\n      0\n      4px;\n\n    font-size:7px;\n  }\n\n}\n\n\n\/* =========================================================\n   SMALL MOBILE\n========================================================= *\/\n\n@media (max-width:380px) {\n\n  .h5e-close h2 {\n    font-size:29px;\n  }\n\n\n  .h5e-close__form {\n    padding:\n      15px\n      8px\n      12px;\n  }\n\n\n  .h5e-close__form-status {\n    display:none;\n  }\n\n\n  .h5e-close__iframe-wrap,\n  .h5e-close__iframe-wrap iframe {\n    height:780px;\n    min-height:780px;\n  }\n\n}\n\n\n\/* =========================================================\n   ACCESSIBILITY\n========================================================= *\/\n\n@media (prefers-reduced-motion:reduce) {\n\n  .h5e-close *,\n  .h5e-close *::before,\n  .h5e-close *::after {\n    animation:none !important;\n    transition:none !important;\n  }\n\n}\n<\/style>\n\n\n<section\n  class=\"h5e-close\"\n  id=\"h5e-enquiry\">\n\n\n  <div class=\"h5e-close__inner\">\n\n\n    <!-- =====================================================\n         HEADER\n    ====================================================== -->\n\n    <div class=\"h5e-close__header\">\n\n\n      <div>\n\n\n        <div class=\"h5e-close__eyebrow\">\n          Ownership Confidence\n        <\/div>\n\n\n        <h2>\n\n          Built for Business.\n\n          <span>\n            Supported Beyond Delivery.\n          <\/span>\n\n        <\/h2>\n\n\n      <\/div>\n\n\n\n      <p class=\"h5e-close__intro\">\n        From vehicle ownership to aftersales support, the\n        Farizon H5E is backed by warranty coverage and\n        local support from Hong Seh Motors in Singapore.\n      <\/p>\n\n\n    <\/div>\n\n\n\n    <!-- =====================================================\n         WARRANTY RAIL\n    ====================================================== -->\n\n    <div class=\"h5e-close__warranty\">\n\n\n      <!-- BATTERY -->\n\n      <div class=\"h5e-close__warranty-item\">\n\n\n        <span class=\"h5e-close__warranty-index\">\n          01\n        <\/span>\n\n\n        <span class=\"h5e-close__warranty-label\">\n          Battery Warranty\n        <\/span>\n\n\n        <strong class=\"h5e-close__warranty-value\">\n          6 Years\n        <\/strong>\n\n\n        <span class=\"h5e-close__warranty-sub\">\n          or 300,000km\n        <\/span>\n\n\n      <\/div>\n\n\n\n      <!-- MOTOR -->\n\n      <div class=\"h5e-close__warranty-item\">\n\n\n        <span class=\"h5e-close__warranty-index\">\n          02\n        <\/span>\n\n\n        <span class=\"h5e-close__warranty-label\">\n          Motor Warranty\n        <\/span>\n\n\n        <strong class=\"h5e-close__warranty-value\">\n          5 Years\n        <\/strong>\n\n\n        <span class=\"h5e-close__warranty-sub\">\n          or 200,000km\n        <\/span>\n\n\n      <\/div>\n\n\n\n      <!-- VEHICLE -->\n\n      <div class=\"h5e-close__warranty-item\">\n\n\n        <span class=\"h5e-close__warranty-index\">\n          03\n        <\/span>\n\n\n        <span class=\"h5e-close__warranty-label\">\n          Vehicle Warranty\n        <\/span>\n\n\n        <strong class=\"h5e-close__warranty-value\">\n          5 Years\n        <\/strong>\n\n\n        <span class=\"h5e-close__warranty-sub\">\n          or 200,000km\n        <\/span>\n\n\n      <\/div>\n\n\n    <\/div>\n\n\n\n    <!-- =====================================================\n         LOCAL SUPPORT\n    ====================================================== -->\n\n    <div class=\"h5e-close__support\">\n\n\n      <div class=\"h5e-close__support-mark\">\n        HS\n      <\/div>\n\n\n      <div class=\"h5e-close__support-copy\">\n\n\n        <span>\n          Local Distributor Support\n        <\/span>\n\n\n        <strong>\n          Supported by Hong Seh Motors in Singapore.\n        <\/strong>\n\n\n        <p>\n          Speak with the local team about the H5E, commercial\n          requirements, body configuration and vehicle enquiries.\n        <\/p>\n\n\n      <\/div>\n\n\n      <div class=\"h5e-close__support-name\">\n        Hong Seh Motors\n      <\/div>\n\n\n    <\/div>\n\n\n\n    <!-- =====================================================\n         ENQUIRY\n    ====================================================== -->\n\n    <div class=\"h5e-close__enquiry\">\n\n\n      <!-- LEFT COPY -->\n\n      <div class=\"h5e-close__enquiry-copy\">\n\n\n        <span class=\"h5e-close__enquiry-label\">\n          Talk to the Farizon Team\n        <\/span>\n\n\n        <h3>\n          Ready to Explore the H5E for Your Business?\n        <\/h3>\n\n\n        <p>\n          Tell us more about your commercial vehicle needs.\n          Our team can assist with H5E enquiries, test drive\n          requests and suitable business applications.\n        <\/p>\n\n\n\n        <div class=\"h5e-close__chips\">\n\n          <span class=\"h5e-close__chip\">\n            Product Enquiry\n          <\/span>\n\n          <span class=\"h5e-close__chip\">\n            Test Drive\n          <\/span>\n\n          <span class=\"h5e-close__chip\">\n            Fleet Enquiry\n          <\/span>\n\n          <span class=\"h5e-close__chip\">\n            Body Configuration\n          <\/span>\n\n        <\/div>\n\n\n\n        <!-- CONTACT -->\n\n        <div class=\"h5e-close__contact\">\n\n\n          <div class=\"h5e-close__contact-row\">\n\n            <span>\n              Address\n            <\/span>\n\n            <strong>\n              10, Fourth Lok Yang Rd\n            <\/strong>\n\n          <\/div>\n\n\n          <div class=\"h5e-close__contact-row\">\n\n            <span>\n              Phone\n            <\/span>\n\n            <strong>\n              +65 8030 8030\n            <\/strong>\n\n          <\/div>\n\n\n          <div class=\"h5e-close__contact-row\">\n\n            <span>\n              Email\n            <\/span>\n\n            <strong>\n              marketing@hongseh.sg\n            <\/strong>\n\n          <\/div>\n\n\n          <div class=\"h5e-close__contact-row\">\n\n            <span>\n              Hours\n            <\/span>\n\n            <strong>\n              Monday\u2013Friday | 8AM\u20136PM\n            <\/strong>\n\n          <\/div>\n\n\n        <\/div>\n\n\n      <\/div>\n\n\n\n      <!-- ===================================================\n           PEPPERCLOUD FORM\n      ==================================================== -->\n\n      <div class=\"h5e-close__form\">\n\n\n        <div class=\"h5e-close__form-top\">\n\n\n          <div class=\"h5e-close__form-title\">\n\n            <span>\n              Direct Enquiry\n            <\/span>\n\n            <strong>\n              Send Your H5E Enquiry\n            <\/strong>\n\n          <\/div>\n\n\n          <div class=\"h5e-close__form-status\">\n            Enquiry Form\n          <\/div>\n\n\n        <\/div>\n\n\n\n        <div class=\"h5e-close__iframe-wrap\">\n\n\n          <iframe\n            id=\"pc-iframe\"\n            src=\"https:\/\/app.peppercloud.com\/form\/4f15ac08-228d-46d1-8691-0d21e8ecd7df\/embed\"\n            title=\"Farizon H5E enquiry form\"\n            loading=\"lazy\"\n            scrolling=\"no\">\n          <\/iframe>\n\n\n        <\/div>\n\n\n\n        <p class=\"h5e-close__note\">\n          Warranty coverage is subject to applicable warranty\n          terms and conditions. Vehicle availability, configurations\n          and commercial requirements should be confirmed with\n          Hong Seh Motors.\n        <\/p>\n\n\n      <\/div>\n\n\n    <\/div>\n\n\n  <\/div>\n\n\n<\/section>\n\n\n<script>\n\/* =========================================================\n   PEPPERCLOUD MESSAGE SUPPORT\n========================================================= *\/\n\nwindow.addEventListener(\n  \"message\",\n  function(event) {\n\n    if (!event || !event.data) {\n      return;\n    }\n\n    \/*\n      Peppercloud may send parent communication messages.\n      Keep this listener available without making the\n      section visibility dependent on JavaScript.\n    *\/\n\n    if (\n      typeof event.data === \"string\" &&\n      event.data.indexOf(\"pc-parent-info\") !== -1\n    ) {\n      return;\n    }\n\n  }\n);\n<\/script>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Farizon H5E Singapore Farizon H5E 14ft Electric Truck Singapore Built for Serious Commercial Work. A mid-duty electric cab-chassis truck built for logistics, distribution and fleet operations, combining practical payload capability, electric range and business-ready usability for Singapore. Logistics Distribution Fleet Commercial Transport Book a Test Drive \u2192 Explore the H5E \u2193 Commercial Platform 14ft Electric [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-454","page","type-page","status-publish","hentry"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":8}},"acf":[],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"admin","author_link":"https:\/\/farizon.com.sg\/author\/admin"},"uagb_comment_info":0,"uagb_excerpt":"Farizon H5E Singapore Farizon H5E 14ft Electric Truck Singapore Built for Serious Commercial Work. A mid-duty electric cab-chassis truck built for logistics, distribution and fleet operations, combining practical payload capability, electric range and business-ready usability for Singapore. Logistics Distribution Fleet Commercial Transport Book a Test Drive \u2192 Explore the H5E \u2193 Commercial Platform 14ft Electric&hellip;","_links":{"self":[{"href":"https:\/\/farizon.com.sg\/index.php?rest_route=\/wp\/v2\/pages\/454","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/farizon.com.sg\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/farizon.com.sg\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/farizon.com.sg\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/farizon.com.sg\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=454"}],"version-history":[{"count":17,"href":"https:\/\/farizon.com.sg\/index.php?rest_route=\/wp\/v2\/pages\/454\/revisions"}],"predecessor-version":[{"id":532,"href":"https:\/\/farizon.com.sg\/index.php?rest_route=\/wp\/v2\/pages\/454\/revisions\/532"}],"wp:attachment":[{"href":"https:\/\/farizon.com.sg\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=454"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}