{"id":452,"date":"2026-09-29T09:11:46","date_gmt":"2026-09-29T09:11:46","guid":{"rendered":"https:\/\/farizon.com.sg\/new\/?page_id=452"},"modified":"2026-10-01T01:40:42","modified_gmt":"2026-10-01T01:40:42","slug":"f3e-12ft-14ft","status":"publish","type":"page","link":"https:\/\/farizon.com.sg\/?page_id=452","title":{"rendered":"F3E 12Ft &amp; 14ft"},"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 F3E\n   SECTION 01 \u2014 PRODUCT OPENING\n========================================================= *\/\n\n.fz-f3e-opening,\n.fz-f3e-opening *,\n.fz-f3e-opening *::before,\n.fz-f3e-opening *::after {\n  box-sizing: border-box;\n}\n\n.fz-f3e-opening {\n  --orange: #ff6433;\n  --orange-dark: #e95428;\n  --navy: #263648;\n  --deep: #182635;\n  --text: #5d6672;\n  --muted: #85919d;\n  --line: #e2e7eb;\n  --light: #f5f6f8;\n  --white: #ffffff;\n\n  position: relative;\n  width: 100%;\n\n  padding:\n    54px\n    24px\n    0;\n\n  overflow: hidden;\n\n  background:\n    radial-gradient(\n      circle at 7% 9%,\n      rgba(255,100,51,.06),\n      transparent 25%\n    ),\n    linear-gradient(\n      180deg,\n      #ffffff 0%,\n      #f5f7f9 100%\n    );\n\n  font-family:\n    Inter,\n    Arial,\n    sans-serif;\n}\n\n.fz-f3e-opening__inner {\n  width: 100%;\n  max-width: 1280px;\n\n  margin: 0 auto;\n}\n\n\n\/* =========================================================\n   MAIN GRID\n========================================================= *\/\n\n.fz-f3e-opening__grid {\n  display: grid;\n\n  grid-template-columns:\n    minmax(410px,.90fr)\n    minmax(0,1.10fr);\n\n  gap: 58px;\n\n  align-items: center;\n}\n\n\n\/* =========================================================\n   COPY\n========================================================= *\/\n\n.fz-f3e-opening__copy {\n  position: relative;\n  z-index: 5;\n\n  padding:\n    26px\n    0\n    42px;\n}\n\n.fz-f3e-opening__eyebrow {\n  display: flex;\n\n  align-items: center;\n\n  gap: 11px;\n\n  margin-bottom: 18px;\n\n  color:\n    var(--orange);\n\n  font-size: 11px;\n  font-weight: 700;\n\n  letter-spacing: 1.6px;\n\n  text-transform: uppercase;\n}\n\n.fz-f3e-opening__eyebrow::before {\n  content: \"\";\n\n  width: 32px;\n  height: 2px;\n\n  flex: 0 0 auto;\n\n  background:\n    var(--orange);\n}\n\n\n\/* =========================================================\n   H1\n========================================================= *\/\n\n.fz-f3e-opening h1 {\n  max-width: 650px;\n\n  margin:\n    0\n    0\n    22px;\n\n  color:\n    var(--navy);\n\n  font-size:\n    clamp(\n      47px,\n      5vw,\n      69px\n    );\n\n  font-weight: 700;\n\n  line-height: 1.01;\n\n  letter-spacing: -2px;\n}\n\n.fz-f3e-opening h1 span {\n  display: block;\n\n  color:\n    var(--orange);\n}\n\n\n\/* =========================================================\n   DESCRIPTION\n========================================================= *\/\n\n.fz-f3e-opening__description {\n  max-width: 590px;\n\n  margin:\n    0\n    0\n    27px;\n\n  color:\n    var(--text);\n\n  font-size: 15px;\n\n  line-height: 1.78;\n}\n\n\n\/* =========================================================\n   BUSINESS TAGS\n========================================================= *\/\n\n.fz-f3e-opening__audience {\n  display: flex;\n\n  flex-wrap: wrap;\n\n  gap: 8px;\n\n  margin-bottom: 29px;\n}\n\n.fz-f3e-opening__audience span {\n  min-height: 31px;\n\n  padding:\n    0\n    11px;\n\n  display: inline-flex;\n\n  align-items: center;\n\n  border:\n    1px solid\n    var(--line);\n\n  background:\n    rgba(255,255,255,.70);\n\n  color:\n    var(--navy);\n\n  font-size: 9px;\n  font-weight: 650;\n\n  letter-spacing: .15px;\n}\n\n\n\/* =========================================================\n   ACTIONS\n========================================================= *\/\n\n.fz-f3e-opening__actions {\n  display: flex;\n\n  flex-wrap: wrap;\n\n  gap: 11px;\n}\n\n.fz-f3e-opening__btn {\n  min-height: 51px;\n\n  padding:\n    0\n    22px;\n\n  display: inline-flex;\n\n  align-items: center;\n  justify-content: center;\n\n  gap: 9px;\n\n  border:\n    1px solid\n    var(--line);\n\n  background:\n    #ffffff;\n\n  color:\n    var(--navy);\n\n  font-size: 11px;\n  font-weight: 700;\n\n  text-decoration: none;\n\n  transition:\n    background .22s ease,\n    color .22s ease,\n    border-color .22s ease,\n    transform .22s ease;\n}\n\n.fz-f3e-opening__btn--primary {\n  border-color:\n    var(--orange);\n\n  background:\n    var(--orange);\n\n  color:\n    #ffffff;\n}\n\n.fz-f3e-opening__btn--primary:hover {\n  border-color:\n    var(--orange-dark);\n\n  background:\n    var(--orange-dark);\n\n  color:\n    #ffffff;\n\n  transform:\n    translateY(-2px);\n}\n\n.fz-f3e-opening__btn--secondary:hover {\n  border-color:\n    var(--orange);\n\n  color:\n    var(--orange);\n\n  transform:\n    translateY(-2px);\n}\n\n\n\/* =========================================================\n   SUPPORT LINE\n========================================================= *\/\n\n.fz-f3e-opening__support {\n  margin-top: 20px;\n\n  display: flex;\n\n  align-items: center;\n\n  gap: 10px;\n\n  color:\n    var(--muted);\n\n  font-size: 9px;\n  font-weight: 600;\n}\n\n.fz-f3e-opening__support::before {\n  content: \"\";\n\n  width: 22px;\n  height: 1px;\n\n  flex: 0 0 auto;\n\n  background:\n    var(--orange);\n}\n\n\n\/* =========================================================\n   HERO VISUAL\n========================================================= *\/\n\n.fz-f3e-opening__visual {\n  position: relative;\n\n  height: 610px;\n\n  overflow: hidden;\n\n  background:\n    #dfe4e8;\n}\n\n.fz-f3e-opening__visual img {\n  display: block;\n\n  width: 100%;\n  height: 100%;\n\n  object-fit: cover;\n\n  object-position: center;\n\n  transform:\n    scale(1.005);\n\n  transition:\n    transform 1.1s\n    cubic-bezier(.2,.65,.3,1);\n}\n\n.fz-f3e-opening__visual:hover img {\n  transform:\n    scale(1.026);\n}\n\n\n\/* cinematic overlay *\/\n\n.fz-f3e-opening__visual::before {\n  content: \"\";\n\n  position: absolute;\n\n  z-index: 2;\n\n  inset: 0;\n\n  pointer-events: none;\n\n  background:\n    linear-gradient(\n      90deg,\n      rgba(19,32,44,.08) 0%,\n      transparent 38%\n    ),\n    linear-gradient(\n      0deg,\n      rgba(17,30,42,.34) 0%,\n      transparent 44%\n    );\n}\n\n\n\/* =========================================================\n   FLOATING PRODUCT TAG\n========================================================= *\/\n\n.fz-f3e-opening__product-tag {\n  position: absolute;\n\n  z-index: 5;\n\n  top: 22px;\n  left: 22px;\n\n  padding:\n    13px\n    15px;\n\n  background:\n    rgba(28,43,58,.90);\n\n  backdrop-filter:\n    blur(9px);\n\n  -webkit-backdrop-filter:\n    blur(9px);\n}\n\n.fz-f3e-opening__product-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: 1.1px;\n\n  text-transform: uppercase;\n}\n\n.fz-f3e-opening__product-tag strong {\n  color:\n    #ffffff;\n\n  font-size: 13px;\n  font-weight: 650;\n}\n\n\n\/* =========================================================\n   CLASS 3 BADGE\n========================================================= *\/\n\n.fz-f3e-opening__licence {\n  position: absolute;\n\n  z-index: 5;\n\n  right: 22px;\n  bottom: 22px;\n\n  min-width: 180px;\n\n  padding:\n    15px\n    17px;\n\n  background:\n    rgba(28,43,58,.91);\n\n  backdrop-filter:\n    blur(9px);\n\n  -webkit-backdrop-filter:\n    blur(9px);\n}\n\n.fz-f3e-opening__licence span {\n  display: block;\n\n  margin-bottom: 5px;\n\n  color:\n    rgba(255,255,255,.46);\n\n  font-size: 8px;\n  font-weight: 700;\n\n  letter-spacing: 1px;\n\n  text-transform: uppercase;\n}\n\n.fz-f3e-opening__licence strong {\n  display: block;\n\n  color:\n    #ffffff;\n\n  font-size: 15px;\n  font-weight: 700;\n}\n\n\n\/* =========================================================\n   MOVING ORANGE LINE\n========================================================= *\/\n\n.fz-f3e-opening__scan {\n  position: absolute;\n\n  z-index: 4;\n\n  left: 0;\n  right: 0;\n  bottom: 0;\n\n  height: 4px;\n\n  overflow: hidden;\n\n  background:\n    rgba(255,255,255,.12);\n}\n\n.fz-f3e-opening__scan::before {\n  content: \"\";\n\n  position: absolute;\n\n  width: 34%;\n  height: 100%;\n\n  left: -35%;\n\n  background:\n    linear-gradient(\n      90deg,\n      transparent,\n      var(--orange),\n      transparent\n    );\n\n  animation:\n    fzF3EScan\n    3.8s linear infinite;\n}\n\n\n\/* =========================================================\n   KEY STAT STRIP\n========================================================= *\/\n\n.fz-f3e-opening__stats {\n  position: relative;\n\n  z-index: 6;\n\n  display: grid;\n\n  grid-template-columns:\n    repeat(4,1fr);\n\n  margin-top: 0;\n\n  background:\n    var(--navy);\n\n  border-top:\n    3px solid\n    var(--orange);\n}\n\n.fz-f3e-opening__stat {\n  position: relative;\n\n  min-height: 122px;\n\n  padding:\n    26px\n    27px;\n\n  display: flex;\n\n  flex-direction: column;\n\n  justify-content: center;\n\n  overflow: hidden;\n}\n\n.fz-f3e-opening__stat +\n.fz-f3e-opening__stat {\n  border-left:\n    1px solid\n    rgba(255,255,255,.11);\n}\n\n.fz-f3e-opening__stat::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    var(--orange);\n\n  transition:\n    width 1s\n    cubic-bezier(.2,.7,.3,1);\n}\n\n.fz-f3e-opening.is-visible\n.fz-f3e-opening__stat::after {\n  width: 100%;\n}\n\n\n\/* =========================================================\n   STAT NUMBER\n========================================================= *\/\n\n.fz-f3e-opening__stat-number {\n  display: flex;\n\n  align-items: baseline;\n\n  flex-wrap: wrap;\n\n  gap: 4px;\n\n  margin-bottom: 7px;\n\n  color:\n    #ffffff;\n\n  font-size: 30px;\n  font-weight: 700;\n\n  line-height: 1;\n\n  letter-spacing: -.7px;\n}\n\n.fz-f3e-opening__stat-number small {\n  color:\n    rgba(255,255,255,.72);\n\n  font-size: 12px;\n  font-weight: 700;\n}\n\n.fz-f3e-opening__stat-label {\n  color:\n    rgba(255,255,255,.53);\n\n  font-size: 10px;\n  font-weight: 600;\n\n  line-height: 1.5;\n}\n\n\n\/* =========================================================\n   FOOTNOTE\n========================================================= *\/\n\n.fz-f3e-opening__note {\n  padding:\n    14px\n    0\n    17px;\n\n  color:\n    var(--muted);\n\n  font-size: 9px;\n\n  line-height: 1.65;\n}\n\n\n\/* =========================================================\n   ENTRY ANIMATION\n========================================================= *\/\n\n.fz-f3e-opening__copy,\n.fz-f3e-opening__visual {\n  opacity: 0;\n}\n\n.fz-f3e-opening.is-visible\n.fz-f3e-opening__copy {\n  animation:\n    fzF3ECopyIn\n    .7s ease both;\n}\n\n.fz-f3e-opening.is-visible\n.fz-f3e-opening__visual {\n  animation:\n    fzF3EVisualIn\n    .8s .08s ease both;\n}\n\n\n\/* =========================================================\n   ANIMATION KEYFRAMES\n========================================================= *\/\n\n@keyframes fzF3EScan {\n\n  from {\n    left: -35%;\n  }\n\n  to {\n    left: 110%;\n  }\n\n}\n\n\n@keyframes fzF3ECopyIn {\n\n  from {\n    opacity: 0;\n\n    transform:\n      translateY(14px);\n  }\n\n  to {\n    opacity: 1;\n\n    transform:\n      translateY(0);\n  }\n\n}\n\n\n@keyframes fzF3EVisualIn {\n\n  from {\n    opacity: 0;\n\n    transform:\n      translateX(15px);\n  }\n\n  to {\n    opacity: 1;\n\n    transform:\n      translateX(0);\n  }\n\n}\n\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width: 1024px) {\n\n  .fz-f3e-opening {\n    padding:\n      42px\n      22px\n      0;\n  }\n\n\n  .fz-f3e-opening__grid {\n    grid-template-columns:\n      minmax(340px,.90fr)\n      minmax(0,1.10fr);\n\n    gap: 38px;\n  }\n\n\n  .fz-f3e-opening h1 {\n    font-size: 52px;\n  }\n\n\n  .fz-f3e-opening__visual {\n    height: 520px;\n  }\n\n\n  .fz-f3e-opening__stat {\n    padding:\n      22px\n      20px;\n  }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width: 767px) {\n\n  .fz-f3e-opening {\n    padding:\n      25px\n      16px\n      0;\n  }\n\n\n  .fz-f3e-opening__grid {\n    display: flex;\n\n    flex-direction: column;\n\n    gap: 23px;\n\n    align-items: stretch;\n  }\n\n\n  .fz-f3e-opening__copy {\n    order: 1;\n\n    padding:\n      15px\n      0\n      0;\n  }\n\n\n  .fz-f3e-opening__visual {\n    order: 2;\n\n    height: 410px;\n  }\n\n\n  .fz-f3e-opening__eyebrow {\n    margin-bottom: 13px;\n\n    font-size: 10px;\n  }\n\n\n  .fz-f3e-opening h1 {\n    max-width: 390px;\n\n    margin-bottom: 17px;\n\n    font-size: 41px;\n\n    line-height: 1.04;\n\n    letter-spacing: -1.1px;\n  }\n\n\n  .fz-f3e-opening__description {\n    margin-bottom: 20px;\n\n    font-size: 13px;\n\n    line-height: 1.72;\n  }\n\n\n  .fz-f3e-opening__audience {\n    margin-bottom: 22px;\n  }\n\n\n  .fz-f3e-opening__actions {\n    display: grid;\n\n    grid-template-columns:\n      1fr\n      1fr;\n\n    gap: 8px;\n  }\n\n\n  .fz-f3e-opening__btn {\n    width: 100%;\n\n    padding:\n      0\n      12px;\n\n    font-size: 10px;\n  }\n\n\n  .fz-f3e-opening__product-tag {\n    top: 13px;\n    left: 13px;\n  }\n\n\n  .fz-f3e-opening__licence {\n    right: 13px;\n    bottom: 13px;\n\n    min-width: 150px;\n  }\n\n\n  \/* stats *\/\n\n  .fz-f3e-opening__stats {\n    grid-template-columns:\n      1fr\n      1fr;\n  }\n\n\n  .fz-f3e-opening__stat {\n    min-height: 99px;\n\n    padding:\n      17px\n      15px;\n  }\n\n\n  .fz-f3e-opening__stat:nth-child(3),\n  .fz-f3e-opening__stat:nth-child(4) {\n    border-top:\n      1px solid\n      rgba(255,255,255,.11);\n  }\n\n\n  .fz-f3e-opening__stat:nth-child(3) {\n    border-left: 0;\n  }\n\n\n  .fz-f3e-opening__stat-number {\n    font-size: 24px;\n  }\n\n\n  .fz-f3e-opening__stat-label {\n    font-size: 9px;\n  }\n\n}\n\n\n\/* =========================================================\n   SMALL MOBILE\n========================================================= *\/\n\n@media (max-width: 390px) {\n\n  .fz-f3e-opening h1 {\n    font-size: 37px;\n  }\n\n\n  .fz-f3e-opening__visual {\n    height: 355px;\n  }\n\n\n  .fz-f3e-opening__actions {\n    grid-template-columns: 1fr;\n  }\n\n}\n\n\n\/* =========================================================\n   ACCESSIBILITY\n========================================================= *\/\n\n.fz-f3e-opening a:focus-visible {\n  outline:\n    2px solid\n    var(--orange);\n\n  outline-offset: 4px;\n}\n\n\n@media (prefers-reduced-motion: reduce) {\n\n  .fz-f3e-opening *,\n  .fz-f3e-opening *::before,\n  .fz-f3e-opening *::after {\n    animation: none !important;\n    transition: none !important;\n  }\n\n\n  .fz-f3e-opening__copy,\n  .fz-f3e-opening__visual {\n    opacity: 1;\n    transform: none;\n  }\n\n}\n<\/style>\n\n\n\n<section\n  class=\"fz-f3e-opening\"\n  id=\"f3e\">\n\n\n  <div class=\"fz-f3e-opening__inner\">\n\n\n    <!-- =====================================================\n         HERO\n    ====================================================== -->\n\n    <div class=\"fz-f3e-opening__grid\">\n\n\n      <!-- LEFT COPY -->\n\n      <div class=\"fz-f3e-opening__copy\">\n\n\n        <div class=\"fz-f3e-opening__eyebrow\">\n          Farizon F3E Singapore\n        <\/div>\n\n\n        <h1>\n          Farizon F3E Electric Truck\n          <span>Built for Singapore Business.<\/span>\n        <\/h1>\n\n\n        <p class=\"fz-f3e-opening__description\">\n          A practical electric commercial truck designed for\n          logistics, delivery, trade and contractor operations\n          in Singapore, with flexible deck configurations built\n          around the way businesses work.\n        <\/p>\n\n\n\n        <!-- AUDIENCE -->\n\n        <div class=\"fz-f3e-opening__audience\">\n\n          <span>\n            Logistics\n          <\/span>\n\n          <span>\n            Delivery\n          <\/span>\n\n          <span>\n            Trade\n          <\/span>\n\n          <span>\n            Contractor\n          <\/span>\n\n          <span>\n            Fleet\n          <\/span>\n\n        <\/div>\n\n\n\n        <!-- BUTTONS -->\n\n        <div class=\"fz-f3e-opening__actions\">\n\n\n          <a\n            class=\"fz-f3e-opening__btn fz-f3e-opening__btn--primary\"\n            href=\"#f3e-enquiry\">\n\n            Book a Test Drive\n\n            <span>\u2192<\/span>\n\n          <\/a>\n\n\n          <a\n            class=\"fz-f3e-opening__btn fz-f3e-opening__btn--secondary\"\n            href=\"#f3e-deck-options\">\n\n            Explore the F3E\n\n            <span>\u2193<\/span>\n\n          <\/a>\n\n\n        <\/div>\n\n\n\n        <div class=\"fz-f3e-opening__support\">\n\n          Flexible electric commercial mobility for\n          Singapore businesses.\n\n        <\/div>\n\n\n      <\/div>\n\n\n\n      <!-- ===================================================\n           RIGHT HERO IMAGE\n      ==================================================== -->\n\n      <div class=\"fz-f3e-opening__visual\">\n\n\n        <img\n          src=\"https:\/\/farizon.com.sg\/wp-content\/uploads\/2026\/09\/IMG_20260622_153428-1-scaled.jpg\"\n          alt=\"Farizon F3E electric truck for logistics delivery and business use in Singapore\"\n          fetchpriority=\"high\"\n          decoding=\"async\">\n\n\n\n        <div class=\"fz-f3e-opening__product-tag\">\n\n          <span>\n            100% Electric\n          <\/span>\n\n          <strong>\n            Farizon F3E\n          <\/strong>\n\n        <\/div>\n\n\n\n        <div class=\"fz-f3e-opening__licence\">\n\n          <span>\n            Commercial Usability\n          <\/span>\n\n          <strong>\n            Class 3 Licence\n          <\/strong>\n\n        <\/div>\n\n\n\n        <div class=\"fz-f3e-opening__scan\"><\/div>\n\n\n      <\/div>\n\n\n    <\/div>\n\n\n\n    <!-- =====================================================\n         KEY NUMBERS\n    ====================================================== -->\n\n    <div class=\"fz-f3e-opening__stats\">\n\n\n      <!-- RANGE -->\n\n      <div class=\"fz-f3e-opening__stat\">\n\n        <div class=\"fz-f3e-opening__stat-number\">\n\n          <span>\n            Up to&nbsp;\n          <\/span>\n\n          <span\n            class=\"fz-f3e-counter\"\n            data-value=\"367\"\n            data-decimals=\"0\">\n            0\n          <\/span>\n\n          <small>km<\/small>\n\n        <\/div>\n\n        <span class=\"fz-f3e-opening__stat-label\">\n          WLTP Range*\n        <\/span>\n\n      <\/div>\n\n\n\n      <!-- PAYLOAD -->\n\n      <div class=\"fz-f3e-opening__stat\">\n\n        <div class=\"fz-f3e-opening__stat-number\">\n\n          <span>\n            Up to&nbsp;\n          <\/span>\n\n          <span\n            class=\"fz-f3e-counter\"\n            data-value=\"2300\"\n            data-decimals=\"0\">\n            0\n          <\/span>\n\n          <small>kg<\/small>\n\n        <\/div>\n\n        <span class=\"fz-f3e-opening__stat-label\">\n          Payload Capacity\n        <\/span>\n\n      <\/div>\n\n\n\n      <!-- DECK -->\n\n      <div class=\"fz-f3e-opening__stat\">\n\n        <div class=\"fz-f3e-opening__stat-number\">\n          12ft \u2192 14ft\n        <\/div>\n\n        <span class=\"fz-f3e-opening__stat-label\">\n          Customisable Deck\n        <\/span>\n\n      <\/div>\n\n\n\n      <!-- LICENCE -->\n\n      <div class=\"fz-f3e-opening__stat\">\n\n        <div class=\"fz-f3e-opening__stat-number\">\n          Class 3\n        <\/div>\n\n        <span class=\"fz-f3e-opening__stat-label\">\n          Driving Licence\n        <\/span>\n\n      <\/div>\n\n\n    <\/div>\n\n\n\n    <!-- =====================================================\n         RANGE NOTE\n    ====================================================== -->\n\n    <div class=\"fz-f3e-opening__note\">\n\n      *WLTP range. Actual driving range may vary according\n      to payload, body configuration, route, traffic,\n      driving style, climate control and operating conditions.\n\n    <\/div>\n\n\n  <\/div>\n\n<\/section>\n\n\n\n<script>\n(function () {\n\n  const section =\n    document.querySelector(\n      \".fz-f3e-opening\"\n    );\n\n\n  if (!section) {\n    return;\n  }\n\n\n  const counters =\n    section.querySelectorAll(\n      \".fz-f3e-counter\"\n    );\n\n\n  let hasRun = false;\n\n\n  function startF3EHero() {\n\n    if (hasRun) {\n      return;\n    }\n\n\n    hasRun = true;\n\n\n    section.classList.add(\n      \"is-visible\"\n    );\n\n\n    counters.forEach(\n      function (counter) {\n\n\n        const target =\n          parseFloat(\n            counter.getAttribute(\n              \"data-value\"\n            )\n          );\n\n\n        const decimals =\n          parseInt(\n            counter.getAttribute(\n              \"data-decimals\"\n            ) || \"0\",\n            10\n          );\n\n\n        const duration =\n          1300;\n\n\n        const start =\n          performance.now();\n\n\n        function animate(now) {\n\n\n          const progress =\n            Math.min(\n              (now - start) \/\n              duration,\n              1\n            );\n\n\n          const eased =\n            1 -\n            Math.pow(\n              1 - progress,\n              3\n            );\n\n\n          const current =\n            target * eased;\n\n\n          if (decimals === 0) {\n\n            counter.textContent =\n              Math.round(\n                current\n              ).toLocaleString(\n                \"en-SG\"\n              );\n\n          } else {\n\n            counter.textContent =\n              current.toFixed(\n                decimals\n              );\n\n          }\n\n\n          if (progress < 1) {\n\n            requestAnimationFrame(\n              animate\n            );\n\n          }\n\n        }\n\n\n        requestAnimationFrame(\n          animate\n        );\n\n\n      }\n    );\n\n  }\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              if (\n                entry.isIntersecting\n              ) {\n\n\n                startF3EHero();\n\n\n                observer.disconnect();\n\n\n              }\n\n\n            }\n          );\n\n\n        },\n        {\n          threshold: .16\n        }\n      );\n\n\n    observer.observe(\n      section\n    );\n\n\n  } else {\n\n\n    startF3EHero();\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   F3E PAGE \u2014 REMOVE WORDPRESS \/ GUTENBERG SECTION GAPS\n========================================================= *\/\n\nbody .entry-content > .wp-block-html {\n  margin-top: 0 !important;\n  margin-bottom: 0 !important;\n  margin-block-start: 0 !important;\n  margin-block-end: 0 !important;\n  padding-top: 0 !important;\n  padding-bottom: 0 !important;\n}\n\nbody .entry-content {\n  gap: 0 !important;\n  row-gap: 0 !important;\n  --theme-content-spacing: 0px !important;\n}\n\nbody .wp-block-html:has(#f3e),\nbody .wp-block-html:has(#f3e-deck-options) {\n  margin: 0 !important;\n  padding: 0 !important;\n  margin-block: 0 !important;\n}\n\nbody .wp-block-html:has(#f3e) + .wp-block-html {\n  margin-top: 0 !important;\n  margin-block-start: 0 !important;\n}\n\n\n\/* =========================================================\n   FARIZON F3E\n   SECTION 02 \u2014 12FT \/ 14FT CINEMATIC SELECTOR\n========================================================= *\/\n\n.f3e-deck,\n.f3e-deck *,\n.f3e-deck *::before,\n.f3e-deck *::after {\n  box-sizing: border-box;\n}\n\n.f3e-deck {\n  --orange: #ff6433;\n  --orange-dark: #e95428;\n  --navy: #263648;\n  --deep: #162432;\n  --text: #5d6672;\n  --muted: #88939f;\n  --line: #e3e7eb;\n  --white: #ffffff;\n\n  position: relative;\n  width: 100%;\n\n  margin: 0 !important;\n\n  padding:\n    42px\n    24px\n    52px;\n\n  background:\n    #ffffff;\n\n  font-family:\n    Inter,\n    Arial,\n    sans-serif;\n\n  scroll-margin-top: 88px;\n}\n\n.f3e-deck__inner {\n  width: 100%;\n  max-width: 1280px;\n\n  margin: 0 auto;\n}\n\n\n\/* =========================================================\n   INTRO\n========================================================= *\/\n\n.f3e-deck__intro {\n  display: grid;\n\n  grid-template-columns:\n    minmax(0,1fr)\n    minmax(340px,.70fr);\n\n  gap: 62px;\n\n  align-items: end;\n\n  margin-bottom: 24px;\n}\n\n.f3e-deck__eyebrow {\n  display: flex;\n\n  align-items: center;\n\n  gap: 11px;\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.f3e-deck__eyebrow::before {\n  content: \"\";\n\n  width: 30px;\n  height: 2px;\n\n  background:\n    var(--orange);\n}\n\n.f3e-deck h2 {\n  max-width: 680px;\n\n  margin: 0;\n\n  color:\n    var(--navy);\n\n  font-size:\n    clamp(\n      38px,\n      4vw,\n      51px\n    );\n\n  font-weight: 700;\n\n  line-height: 1.04;\n\n  letter-spacing: -1.35px;\n}\n\n.f3e-deck h2 span {\n  display: block;\n\n  color:\n    var(--orange);\n}\n\n.f3e-deck__intro-copy {\n  max-width: 460px;\n\n  margin:\n    0\n    0\n    2px;\n\n  color:\n    var(--text);\n\n  font-size: 13px;\n\n  line-height: 1.72;\n}\n\n\n\/* =========================================================\n   SELECTOR\n========================================================= *\/\n\n.f3e-deck__selector {\n  display: inline-flex;\n\n  gap: 4px;\n\n  margin-bottom: 14px;\n\n  padding: 4px;\n\n  border:\n    1px solid\n    var(--line);\n\n  background:\n    #ffffff;\n}\n\n.f3e-deck__tab {\n  position: relative;\n\n  min-width: 92px;\n  min-height: 43px;\n\n  padding:\n    0\n    18px;\n\n  border: 0;\n\n  background:\n    transparent;\n\n  color:\n    var(--navy);\n\n  font-family: inherit;\n\n  font-size: 11px;\n  font-weight: 700;\n\n  cursor: pointer;\n\n  transition:\n    background .22s ease,\n    color .22s ease,\n    transform .22s ease;\n}\n\n.f3e-deck__tab:hover {\n  color:\n    var(--orange);\n}\n\n.f3e-deck__tab.is-active {\n  background:\n    var(--orange);\n\n  color:\n    #ffffff;\n\n  transform:\n    translateY(-1px);\n}\n\n\n\/* =========================================================\n   CINEMATIC STAGE\n========================================================= *\/\n\n.f3e-deck__stage {\n  position: relative;\n\n  height: 525px;\n\n  overflow: hidden;\n\n  background:\n    #dfe4e8;\n}\n\n.f3e-deck__image {\n  position: absolute;\n\n  inset: 0;\n\n  display: block;\n\n  width: 100%;\n  height: 100%;\n\n  object-fit: cover;\n\n  object-position: center;\n\n  transform:\n    scale(1.005);\n\n  transition:\n    opacity .3s ease,\n    transform .8s\n    cubic-bezier(.2,.65,.3,1);\n}\n\n.f3e-deck__stage.is-changing\n.f3e-deck__image {\n  opacity: .46;\n\n  transform:\n    scale(1.035);\n}\n\n\n\/* cinematic shading *\/\n\n.f3e-deck__stage::before {\n  content: \"\";\n\n  position: absolute;\n\n  z-index: 2;\n\n  inset: 0;\n\n  pointer-events: none;\n\n  background:\n    linear-gradient(\n      90deg,\n      rgba(15,27,39,.08) 0%,\n      rgba(15,27,39,.03) 40%,\n      rgba(15,27,39,.48) 68%,\n      rgba(15,27,39,.86) 100%\n    ),\n    linear-gradient(\n      0deg,\n      rgba(15,27,39,.24),\n      transparent 45%\n    );\n}\n\n\n\/* =========================================================\n   IMAGE BADGE\n========================================================= *\/\n\n.f3e-deck__badge {\n  position: absolute;\n\n  z-index: 5;\n\n  top: 20px;\n  left: 20px;\n\n  padding:\n    11px\n    14px;\n\n  background:\n    rgba(26,42,57,.90);\n\n  backdrop-filter:\n    blur(8px);\n\n  -webkit-backdrop-filter:\n    blur(8px);\n}\n\n.f3e-deck__badge 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.f3e-deck__badge strong {\n  color:\n    #ffffff;\n\n  font-size: 13px;\n  font-weight: 650;\n}\n\n\n\/* =========================================================\n   CONTENT OVERLAY\n========================================================= *\/\n\n.f3e-deck__content {\n  position: absolute;\n\n  z-index: 5;\n\n  top: 50%;\n  right: 38px;\n\n  width:\n    min(\n      420px,\n      42%\n    );\n\n  transform:\n    translateY(-50%);\n}\n\n.f3e-deck__content.is-changing {\n  animation:\n    f3eDeckContentIn\n    .35s ease both;\n}\n\n.f3e-deck__mode {\n  margin-bottom: 11px;\n\n  color:\n    var(--orange);\n\n  font-size: 9px;\n  font-weight: 700;\n\n  letter-spacing: 1.2px;\n\n  text-transform: uppercase;\n}\n\n.f3e-deck__content h3 {\n  margin:\n    0\n    0\n    13px;\n\n  color:\n    #ffffff;\n\n  font-size:\n    clamp(\n      31px,\n      3.8vw,\n      45px\n    );\n\n  font-weight: 700;\n\n  line-height: 1.03;\n\n  letter-spacing: -1px;\n\n  text-shadow:\n    0 2px 18px\n    rgba(0,0,0,.28);\n}\n\n.f3e-deck__content p {\n  margin:\n    0\n    0\n    20px;\n\n  color:\n    rgba(255,255,255,.74);\n\n  font-size: 12px;\n\n  line-height: 1.7;\n}\n\n\n\/* =========================================================\n   APPLICATIONS\n========================================================= *\/\n\n.f3e-deck__applications {\n  display: flex;\n\n  flex-wrap: wrap;\n\n  gap: 7px;\n\n  margin-bottom: 24px;\n}\n\n.f3e-deck__applications span {\n  padding:\n    7px\n    9px;\n\n  border:\n    1px solid\n    rgba(255,255,255,.17);\n\n  background:\n    rgba(19,33,46,.38);\n\n  backdrop-filter:\n    blur(6px);\n\n  -webkit-backdrop-filter:\n    blur(6px);\n\n  color:\n    #ffffff;\n\n  font-size: 9px;\n  font-weight: 600;\n}\n\n\n\/* =========================================================\n   DECK LENGTH GRAPHIC\n========================================================= *\/\n\n.f3e-deck__length {\n  padding-top: 16px;\n\n  border-top:\n    1px solid\n    rgba(255,255,255,.15);\n}\n\n.f3e-deck__length-head {\n  display: flex;\n\n  justify-content: space-between;\n\n  align-items: center;\n\n  gap: 15px;\n\n  margin-bottom: 11px;\n}\n\n.f3e-deck__length-head span {\n  color:\n    rgba(255,255,255,.40);\n\n  font-size: 8px;\n  font-weight: 700;\n\n  letter-spacing: .9px;\n\n  text-transform: uppercase;\n}\n\n.f3e-deck__length-head strong {\n  color:\n    #ffffff;\n\n  font-size: 11px;\n  font-weight: 700;\n}\n\n\n\/* line *\/\n\n.f3e-deck__track {\n  position: relative;\n\n  width: 100%;\n  height: 4px;\n\n  overflow: hidden;\n\n  background:\n    rgba(255,255,255,.16);\n}\n\n.f3e-deck__fill {\n  width: 68%;\n  height: 100%;\n\n  background:\n    var(--orange);\n\n  transition:\n    width .55s\n    cubic-bezier(.2,.7,.3,1);\n}\n\n.f3e-deck__track::before,\n.f3e-deck__track::after {\n  content: \"\";\n\n  position: absolute;\n\n  z-index: 3;\n\n  top: -2px;\n\n  width: 8px;\n  height: 8px;\n\n  border-radius: 50%;\n\n  background:\n    #ffffff;\n}\n\n.f3e-deck__track::before {\n  left: 0;\n}\n\n.f3e-deck__track::after {\n  right: 0;\n}\n\n.f3e-deck__length-labels {\n  display: flex;\n\n  justify-content: space-between;\n\n  margin-top: 8px;\n\n  color:\n    rgba(255,255,255,.36);\n\n  font-size: 8px;\n}\n\n\n\/* =========================================================\n   BOTTOM PRODUCT LINE\n========================================================= *\/\n\n.f3e-deck__bottom {\n  position: absolute;\n\n  z-index: 5;\n\n  left: 20px;\n  bottom: 18px;\n\n  display: flex;\n\n  align-items: center;\n\n  gap: 10px;\n\n  color:\n    rgba(255,255,255,.62);\n\n  font-size: 9px;\n  font-weight: 600;\n}\n\n.f3e-deck__bottom::before {\n  content: \"\";\n\n  width: 23px;\n  height: 1px;\n\n  background:\n    var(--orange);\n}\n\n\n\/* =========================================================\n   MOVING ORANGE LINE\n========================================================= *\/\n\n.f3e-deck__scan {\n  position: absolute;\n\n  z-index: 6;\n\n  left: 0;\n  right: 0;\n  bottom: 0;\n\n  height: 3px;\n\n  overflow: hidden;\n\n  background:\n    rgba(255,255,255,.10);\n}\n\n.f3e-deck__scan::before {\n  content: \"\";\n\n  position: absolute;\n\n  width: 30%;\n  height: 100%;\n\n  left: -30%;\n\n  background:\n    linear-gradient(\n      90deg,\n      transparent,\n      var(--orange),\n      transparent\n    );\n\n  animation:\n    f3eDeckScan\n    3.8s linear infinite;\n}\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width: 1024px) {\n\n  .f3e-deck {\n    padding:\n      38px\n      22px\n      48px;\n  }\n\n\n  .f3e-deck__intro {\n    gap: 38px;\n  }\n\n\n  .f3e-deck__stage {\n    height: 500px;\n  }\n\n\n  .f3e-deck__content {\n    right: 28px;\n\n    width: 44%;\n  }\n\n}\n\n\n@media (max-width: 767px) {\n\n  .f3e-deck {\n    padding:\n      38px\n      16px\n      42px;\n  }\n\n\n  .f3e-deck__intro {\n    display: block;\n\n    margin-bottom: 19px;\n  }\n\n\n  .f3e-deck__eyebrow {\n    margin-bottom: 10px;\n\n    font-size: 9px;\n  }\n\n\n  .f3e-deck h2 {\n    max-width: 390px;\n\n    margin-bottom: 12px;\n\n    font-size: 35px;\n\n    line-height: 1.06;\n\n    letter-spacing: -.9px;\n  }\n\n\n  .f3e-deck__intro-copy {\n    max-width: none;\n\n    font-size: 12px;\n\n    line-height: 1.65;\n  }\n\n\n  .f3e-deck__selector {\n    width: 100%;\n\n    display: grid;\n\n    grid-template-columns:\n      1fr\n      1fr;\n  }\n\n\n  .f3e-deck__tab {\n    width: 100%;\n  }\n\n\n  .f3e-deck__stage {\n    height: auto;\n\n    min-height: 0;\n\n    background:\n      var(--deep);\n  }\n\n\n  .f3e-deck__image {\n    position: relative;\n\n    width: 100%;\n    height: 315px;\n\n    object-fit: cover;\n  }\n\n\n  .f3e-deck__stage::before {\n    background:\n      linear-gradient(\n        0deg,\n        rgba(17,29,41,.36),\n        transparent 48%\n      );\n  }\n\n\n  .f3e-deck__content {\n    position: relative;\n\n    top: auto;\n    right: auto;\n\n    width: 100%;\n\n    padding:\n      28px\n      21px\n      31px;\n\n    transform: none;\n\n    background:\n      linear-gradient(\n        145deg,\n        #263648,\n        #192938\n      );\n  }\n\n\n  .f3e-deck__content h3 {\n    font-size: 30px;\n  }\n\n\n  .f3e-deck__bottom {\n    display: none;\n  }\n\n\n  .f3e-deck__badge {\n    top: 13px;\n    left: 13px;\n  }\n\n}\n\n\n@media (max-width: 390px) {\n\n  .f3e-deck h2 {\n    font-size: 32px;\n  }\n\n\n  .f3e-deck__image {\n    height: 280px;\n  }\n\n\n  .f3e-deck__content h3 {\n    font-size: 27px;\n  }\n\n}\n\n\n\/* =========================================================\n   ANIMATION\n========================================================= *\/\n\n@keyframes f3eDeckContentIn {\n\n  from {\n    opacity: .2;\n\n    transform:\n      translateY(calc(-50% + 8px));\n  }\n\n  to {\n    opacity: 1;\n\n    transform:\n      translateY(-50%);\n  }\n\n}\n\n\n@media (max-width: 767px) {\n\n  @keyframes f3eDeckContentIn {\n\n    from {\n      opacity: .2;\n      transform:\n        translateY(8px);\n    }\n\n    to {\n      opacity: 1;\n      transform:\n        translateY(0);\n    }\n\n  }\n\n}\n\n\n@keyframes f3eDeckScan {\n\n  from {\n    left: -30%;\n  }\n\n  to {\n    left: 110%;\n  }\n\n}\n\n\n@media (prefers-reduced-motion: reduce) {\n\n  .f3e-deck *,\n  .f3e-deck *::before,\n  .f3e-deck *::after {\n    animation: none !important;\n    transition: none !important;\n  }\n\n}\n<\/style>\n\n\n<section\n  class=\"f3e-deck\"\n  id=\"f3e-deck-options\">\n\n\n  <div class=\"f3e-deck__inner\">\n\n\n    <!-- =====================================================\n         INTRO\n    ====================================================== -->\n\n    <div class=\"f3e-deck__intro\">\n\n\n      <div>\n\n        <div class=\"f3e-deck__eyebrow\">\n          Farizon F3E Configuration\n        <\/div>\n\n\n        <h2>\n          Choose the Deck\n          <span>That Fits the Job.<\/span>\n        <\/h2>\n\n      <\/div>\n\n\n      <p class=\"f3e-deck__intro-copy\">\n        Choose between 12ft and 14ft Farizon F3E electric\n        truck configurations for different delivery,\n        logistics, trade and commercial cargo requirements\n        in Singapore.\n      <\/p>\n\n\n    <\/div>\n\n\n\n    <!-- =====================================================\n         SELECTOR\n    ====================================================== -->\n\n    <div class=\"f3e-deck__selector\">\n\n\n      <button\n        class=\"f3e-deck__tab is-active\"\n        type=\"button\"\n        data-f3e-deck=\"12\">\n\n        12FT\n\n      <\/button>\n\n\n      <button\n        class=\"f3e-deck__tab\"\n        type=\"button\"\n        data-f3e-deck=\"14\">\n\n        14FT\n\n      <\/button>\n\n\n    <\/div>\n\n\n\n    <!-- =====================================================\n         EXPERIENCE\n    ====================================================== -->\n\n    <div\n      class=\"f3e-deck__stage\"\n      id=\"f3e-deck-stage\">\n\n\n      <img\n        class=\"f3e-deck__image\"\n        id=\"f3e-deck-image\"\n        src=\"https:\/\/farizon.com.sg\/wp-content\/uploads\/2026\/09\/IMG_20260622_153813-1-scaled.jpg\"\n        alt=\"Farizon F3E 12ft electric truck Singapore\"\n        loading=\"lazy\"\n        decoding=\"async\">\n\n\n\n      <!-- BADGE -->\n\n      <div class=\"f3e-deck__badge\">\n\n        <span>\n          Farizon F3E\n        <\/span>\n\n        <strong id=\"f3e-deck-badge\">\n          12ft Configuration\n        <\/strong>\n\n      <\/div>\n\n\n\n      <!-- CONTENT -->\n\n      <div\n        class=\"f3e-deck__content\"\n        id=\"f3e-deck-content\">\n\n\n        <div\n          class=\"f3e-deck__mode\"\n          id=\"f3e-deck-mode\">\n\n          Everyday Commercial Flexibility\n\n        <\/div>\n\n\n        <h3 id=\"f3e-deck-title\">\n          Farizon F3E 12ft\n        <\/h3>\n\n\n        <p id=\"f3e-deck-description\">\n          A practical electric truck setup for local\n          delivery, trade and everyday commercial work\n          where versatile cargo space matters.\n        <\/p>\n\n\n\n        <div\n          class=\"f3e-deck__applications\"\n          id=\"f3e-deck-applications\">\n\n          <span>Local Delivery<\/span>\n\n          <span>Trade<\/span>\n\n          <span>Contractor<\/span>\n\n        <\/div>\n\n\n\n        <!-- LENGTH -->\n\n        <div class=\"f3e-deck__length\">\n\n\n          <div class=\"f3e-deck__length-head\">\n\n            <span>\n              Deck Configuration\n            <\/span>\n\n            <strong id=\"f3e-deck-length\">\n              12FT Deck\n            <\/strong>\n\n          <\/div>\n\n\n          <div class=\"f3e-deck__track\">\n\n            <div\n              class=\"f3e-deck__fill\"\n              id=\"f3e-deck-fill\">\n            <\/div>\n\n          <\/div>\n\n\n          <div class=\"f3e-deck__length-labels\">\n\n            <span>\n              12FT\n            <\/span>\n\n            <span>\n              14FT\n            <\/span>\n\n          <\/div>\n\n\n        <\/div>\n\n\n      <\/div>\n\n\n\n      <div class=\"f3e-deck__bottom\">\n        Flexible deck configurations for commercial operations.\n      <\/div>\n\n\n      <div class=\"f3e-deck__scan\"><\/div>\n\n\n    <\/div>\n\n\n  <\/div>\n\n<\/section>\n\n\n<script>\n(function () {\n\n  const section =\n    document.querySelector(\n      \".f3e-deck\"\n    );\n\n\n  if (!section) {\n    return;\n  }\n\n\n  const tabs =\n    section.querySelectorAll(\n      \"[data-f3e-deck]\"\n    );\n\n\n  const stage =\n    document.getElementById(\n      \"f3e-deck-stage\"\n    );\n\n\n  const image =\n    document.getElementById(\n      \"f3e-deck-image\"\n    );\n\n\n  const content =\n    document.getElementById(\n      \"f3e-deck-content\"\n    );\n\n\n  const badge =\n    document.getElementById(\n      \"f3e-deck-badge\"\n    );\n\n\n  const mode =\n    document.getElementById(\n      \"f3e-deck-mode\"\n    );\n\n\n  const title =\n    document.getElementById(\n      \"f3e-deck-title\"\n    );\n\n\n  const description =\n    document.getElementById(\n      \"f3e-deck-description\"\n    );\n\n\n  const applications =\n    document.getElementById(\n      \"f3e-deck-applications\"\n    );\n\n\n  const length =\n    document.getElementById(\n      \"f3e-deck-length\"\n    );\n\n\n  const fill =\n    document.getElementById(\n      \"f3e-deck-fill\"\n    );\n\n\n  const data = {\n\n\n    \"12\": {\n\n      image:\n        \"https:\/\/farizon.com.sg\/wp-content\/uploads\/2026\/09\/IMG_20260622_153813-1-scaled.jpg\",\n\n      alt:\n        \"Farizon F3E 12ft electric truck Singapore\",\n\n      badge:\n        \"12ft Configuration\",\n\n      mode:\n        \"Everyday Commercial Flexibility\",\n\n      title:\n        \"Farizon F3E 12ft\",\n\n      description:\n        \"A practical electric truck setup for local delivery, trade and everyday commercial work where versatile cargo space matters.\",\n\n      applications:\n        [\n          \"Local Delivery\",\n          \"Trade\",\n          \"Contractor\"\n        ],\n\n      length:\n        \"12FT Deck\",\n\n      fill:\n        \"68%\"\n\n    },\n\n\n    \"14\": {\n\n      image:\n        \"https:\/\/farizon.com.sg\/wp-content\/uploads\/2026\/09\/WhatsApp-Image-2026-08-19-at-11.26.27-AM-1.jpg\",\n\n      alt:\n        \"Farizon F3E 14ft electric truck Singapore\",\n\n      badge:\n        \"14ft Configuration\",\n\n      mode:\n        \"More Usable Deck Length\",\n\n      title:\n        \"Farizon F3E 14ft\",\n\n      description:\n        \"A longer deck configuration for businesses moving longer or bulkier cargo across logistics, delivery, trade and commercial operations.\",\n\n      applications:\n        [\n          \"Logistics\",\n          \"Bulkier Cargo\",\n          \"Commercial Delivery\"\n        ],\n\n      length:\n        \"14FT Deck\",\n\n      fill:\n        \"100%\"\n\n    }\n\n  };\n\n\n  function renderApplications(items) {\n\n\n    applications.innerHTML =\n      \"\";\n\n\n    items.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        applications.appendChild(\n          span\n        );\n\n\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          const key =\n            tab.getAttribute(\n              \"data-f3e-deck\"\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          stage.classList.add(\n            \"is-changing\"\n          );\n\n\n          setTimeout(\n            function () {\n\n\n              image.src =\n                selected.image;\n\n\n              image.alt =\n                selected.alt;\n\n\n              badge.textContent =\n                selected.badge;\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              length.textContent =\n                selected.length;\n\n\n              fill.style.width =\n                selected.fill;\n\n\n              renderApplications(\n                selected.applications\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              image.onload =\n                function () {\n\n                  stage.classList.remove(\n                    \"is-changing\"\n                  );\n\n                };\n\n\n              if (image.complete) {\n\n                stage.classList.remove(\n                  \"is-changing\"\n                );\n\n              }\n\n\n            },\n            160\n          );\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 F3E\n   SECTION 03 \u2014 BODY CONFIGURATION STUDIO (REVAMPED)\n========================================================= *\/\n\n.f3e-body,\n.f3e-body *,\n.f3e-body *::before,\n.f3e-body *::after {\n  box-sizing: border-box;\n}\n\n.f3e-body {\n  --orange: #ff6433;\n  --orange-dark: #e95428;\n  --navy: #263648;\n  --navy-2: #31465d;\n  --deep: #172532;\n  --text: #5d6672;\n  --muted: #88939e;\n  --line: #e3e7eb;\n  --line-soft: rgba(38,54,72,.08);\n  --light: #f5f6f8;\n  --white: #ffffff;\n\n  position: relative;\n  width: 100%;\n  margin: 0 !important;\n  padding: 56px 24px;\n  overflow: hidden;\n  background: linear-gradient(180deg, #f5f6f8 0%, #ffffff 100%);\n  font-family: Inter, Arial, sans-serif;\n}\n\n.f3e-body__inner {\n  width: 100%;\n  max-width: 1280px;\n  margin: 0 auto;\n}\n\n\/* =========================================================\n   INTRO\n========================================================= *\/\n\n.f3e-body__top {\n  display: grid;\n  grid-template-columns: minmax(0,1fr) minmax(340px,.72fr);\n  gap: 60px;\n  align-items: end;\n  margin-bottom: 28px;\n}\n\n.f3e-body__eyebrow {\n  display: flex;\n  align-items: center;\n  gap: 11px;\n  margin-bottom: 13px;\n  color: var(--orange);\n  font-size: 10px;\n  font-weight: 700;\n  letter-spacing: 1.5px;\n  text-transform: uppercase;\n}\n\n.f3e-body__eyebrow::before {\n  content: \"\";\n  width: 30px;\n  height: 2px;\n  background: var(--orange);\n}\n\n.f3e-body h2 {\n  max-width: 720px;\n  margin: 0;\n  color: var(--navy);\n  font-size: clamp(39px, 4.2vw, 54px);\n  font-weight: 700;\n  line-height: 1.03;\n  letter-spacing: -1.4px;\n}\n\n.f3e-body h2 span {\n  display: block;\n  color: var(--orange);\n}\n\n.f3e-body__intro {\n  max-width: 460px;\n  margin: 0 0 3px;\n  color: var(--text);\n  font-size: 13px;\n  line-height: 1.72;\n}\n\n\/* =========================================================\n   SELECTOR\n========================================================= *\/\n\n.f3e-body__tabs {\n  display: grid;\n  grid-template-columns: repeat(4,1fr);\n  margin-bottom: 18px;\n  border: 1px solid var(--line);\n  background: #ffffff;\n}\n\n.f3e-body__tab {\n  position: relative;\n  min-height: 72px;\n  padding: 0 20px;\n  display: grid;\n  grid-template-columns: 28px 1fr auto;\n  gap: 11px;\n  align-items: center;\n  border: 0;\n  border-right: 1px solid var(--line);\n  background: #ffffff;\n  font-family: inherit;\n  cursor: pointer;\n  transition: background .22s ease, color .22s ease, transform .22s ease;\n}\n\n.f3e-body__tab:last-child {\n  border-right: 0;\n}\n\n.f3e-body__tab-number {\n  color: var(--orange);\n  font-size: 9px;\n  font-weight: 700;\n}\n\n.f3e-body__tab strong {\n  color: var(--navy);\n  font-size: 11px;\n  font-weight: 700;\n  text-align: left;\n}\n\n.f3e-body__tab-dot {\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  background: #cfd5da;\n  transition: background .22s ease, transform .22s ease, box-shadow .22s ease;\n}\n\n.f3e-body__tab:hover,\n.f3e-body__tab.is-active {\n  background: var(--navy);\n}\n\n.f3e-body__tab:hover strong,\n.f3e-body__tab.is-active strong {\n  color: #ffffff;\n}\n\n.f3e-body__tab.is-active .f3e-body__tab-dot {\n  background: var(--orange);\n  transform: scale(1.18);\n  box-shadow: 0 0 0 7px rgba(255,100,51,.10);\n}\n\n\/* =========================================================\n   STUDIO WRAP\n========================================================= *\/\n\n.f3e-body__studio {\n  position: relative;\n  min-height: 560px;\n  display: grid;\n  grid-template-columns: minmax(0,1.28fr) minmax(350px,.72fr);\n  overflow: hidden;\n  border: 1px solid var(--line);\n  background: #ffffff;\n  box-shadow: 0 22px 55px rgba(31,48,65,.08);\n}\n\n.f3e-body__visual {\n  position: relative;\n  min-width: 0;\n  overflow: hidden;\n  background:\n    linear-gradient(135deg, rgba(38,54,72,.03), rgba(38,54,72,0) 45%),\n    radial-gradient(circle at 50% 45%, #ffffff 0%, #f6f7f9 56%, #edf0f3 100%);\n}\n\n.f3e-body__visual::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  opacity: .38;\n  pointer-events: none;\n  background-image:\n    linear-gradient(rgba(38,54,72,.045) 1px, transparent 1px),\n    linear-gradient(90deg, rgba(38,54,72,.045) 1px, transparent 1px);\n  background-size: 46px 46px;\n  mask-image: radial-gradient(circle at center, #000 22%, transparent 78%);\n}\n\n.f3e-body__visual::after {\n  content: \"\";\n  position: absolute;\n  width: 440px;\n  height: 440px;\n  left: 50%;\n  bottom: -220px;\n  transform: translateX(-50%);\n  border-radius: 50%;\n  background: radial-gradient(circle, rgba(255,100,51,.12), transparent 68%);\n  animation: f3eBodyGlow 5s ease-in-out infinite;\n}\n\n\/* =========================================================\n   STUDIO FRAME\n========================================================= *\/\n\n.f3e-body__frame {\n  position: absolute;\n  z-index: 3;\n  inset: 40px 42px 78px 42px;\n  overflow: hidden;\n  border-radius: 26px;\n  background:\n    linear-gradient(180deg, #fbfcfd 0%, #f1f4f7 100%);\n  border: 1px solid rgba(38,54,72,.06);\n  box-shadow:\n    inset 0 1px 0 rgba(255,255,255,.8),\n    0 16px 35px rgba(31,48,65,.08);\n}\n\n\/* soft masks to hide PNG defects *\/\n.f3e-body__frame::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  z-index: 5;\n  pointer-events: none;\n  background:\n    linear-gradient(90deg, rgba(251,252,253,.92) 0%, rgba(251,252,253,0) 18%, rgba(251,252,253,0) 82%, rgba(251,252,253,.88) 100%),\n    linear-gradient(180deg, rgba(251,252,253,.94) 0%, rgba(251,252,253,0) 12%, rgba(251,252,253,0) 82%, rgba(243,246,249,.92) 100%);\n}\n\n\/* extra side fade for rough edges *\/\n.f3e-body__frame::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  z-index: 4;\n  pointer-events: none;\n  background:\n    radial-gradient(circle at 16% 50%, rgba(255,255,255,.55), transparent 28%),\n    radial-gradient(circle at 86% 48%, rgba(255,255,255,.46), transparent 24%);\n}\n\n.f3e-body__focus-ring {\n  position: absolute;\n  z-index: 1;\n  width: 500px;\n  height: 500px;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%,-50%);\n  border-radius: 50%;\n  border: 1px solid rgba(38,54,72,.06);\n  box-shadow:\n    0 0 0 46px rgba(255,255,255,.28),\n    0 0 0 92px rgba(255,255,255,.16);\n  opacity: .95;\n}\n\n.f3e-body__truck-wrap {\n  position: absolute;\n  inset: 0;\n  z-index: 3;\n}\n\n\/* =========================================================\n   VEHICLE IMAGE\n========================================================= *\/\n\n.f3e-body__truck {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  width: min(88%, 690px);\n  transform: translate(-50%, -47%) scale(1.08);\n  transition: opacity .25s ease, transform .42s cubic-bezier(.2,.7,.3,1);\n  filter: drop-shadow(0 26px 25px rgba(26,42,57,.17));\n}\n\n.f3e-body__studio.is-changing .f3e-body__truck {\n  opacity: .16;\n  transform: translate(-48%, -47%) scale(1.03);\n}\n\n.f3e-body__truck img {\n  display: block;\n  width: 100%;\n  height: auto;\n}\n\n\/* lower floor line *\/\n.f3e-body__platform {\n  position: absolute;\n  z-index: 2;\n  left: 10%;\n  right: 10%;\n  bottom: 56px;\n  height: 2px;\n  overflow: hidden;\n  background: rgba(38,54,72,.10);\n}\n\n.f3e-body__platform::before {\n  content: \"\";\n  position: absolute;\n  width: 110px;\n  height: 100%;\n  left: -110px;\n  background: linear-gradient(90deg, transparent, var(--orange), transparent);\n  animation: f3eBodyPlatform 2.8s linear infinite;\n}\n\n\/* floor reflection veil *\/\n.f3e-body__floor-fade {\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  height: 130px;\n  z-index: 3;\n  background: linear-gradient(180deg, rgba(243,246,249,0) 0%, rgba(243,246,249,.78) 48%, #f3f6f9 100%);\n  pointer-events: none;\n}\n\n\/* =========================================================\n   BADGES \/ CHIPS\n========================================================= *\/\n\n.f3e-body__visual-label {\n  position: absolute;\n  z-index: 7;\n  left: 18px;\n  top: 18px;\n  padding: 12px 14px;\n  border-radius: 16px;\n  background: rgba(38,54,72,.92);\n  backdrop-filter: blur(10px);\n  -webkit-backdrop-filter: blur(10px);\n}\n\n.f3e-body__visual-label span {\n  display: block;\n  margin-bottom: 4px;\n  color: var(--orange);\n  font-size: 8px;\n  font-weight: 700;\n  letter-spacing: 1px;\n  text-transform: uppercase;\n}\n\n.f3e-body__visual-label strong {\n  color: #ffffff;\n  font-size: 12px;\n  font-weight: 650;\n}\n\n.f3e-body__config-status {\n  position: absolute;\n  z-index: 7;\n  left: 18px;\n  bottom: 18px;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  color: var(--navy);\n  font-size: 9px;\n  font-weight: 650;\n}\n\n.f3e-body__config-status::before {\n  content: \"\";\n  width: 24px;\n  height: 1px;\n  background: var(--orange);\n}\n\n.f3e-body__mini-specs {\n  position: absolute;\n  z-index: 7;\n  right: 18px;\n  bottom: 18px;\n  display: flex;\n  gap: 8px;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  max-width: 280px;\n}\n\n.f3e-body__mini-specs span {\n  padding: 9px 12px;\n  border-radius: 999px;\n  background: rgba(255,255,255,.82);\n  border: 1px solid rgba(38,54,72,.08);\n  color: var(--navy);\n  font-size: 9px;\n  font-weight: 700;\n  box-shadow: 0 8px 18px rgba(31,48,65,.06);\n}\n\n\/* =========================================================\n   RIGHT CONTENT\n========================================================= *\/\n\n.f3e-body__content {\n  position: relative;\n  padding: 42px 36px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  background: linear-gradient(145deg, #263648 0%, #192938 100%);\n  color: #ffffff;\n}\n\n.f3e-body__content.is-changing {\n  animation: f3eBodyContentIn .35s ease both;\n}\n\n.f3e-body__mode {\n  margin-bottom: 11px;\n  color: var(--orange);\n  font-size: 9px;\n  font-weight: 700;\n  letter-spacing: 1.2px;\n  text-transform: uppercase;\n}\n\n.f3e-body__content h3 {\n  margin: 0 0 13px;\n  color: #ffffff;\n  font-size: clamp(29px, 3.5vw, 39px);\n  font-weight: 700;\n  line-height: 1.06;\n  letter-spacing: -.8px;\n}\n\n.f3e-body__content p {\n  margin: 0 0 24px;\n  color: rgba(255,255,255,.68);\n  font-size: 12px;\n  line-height: 1.72;\n}\n\n.f3e-body__use-label {\n  display: block;\n  margin-bottom: 10px;\n  color: rgba(255,255,255,.34);\n  font-size: 8px;\n  font-weight: 700;\n  letter-spacing: 1px;\n  text-transform: uppercase;\n}\n\n.f3e-body__uses {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 7px;\n}\n\n.f3e-body__uses span {\n  padding: 8px 10px;\n  border: 1px solid rgba(255,255,255,.14);\n  background: rgba(255,255,255,.045);\n  color: #ffffff;\n  font-size: 9px;\n  font-weight: 600;\n}\n\n.f3e-body__note {\n  margin-top: 27px;\n  padding-top: 16px;\n  border-top: 1px solid rgba(255,255,255,.11);\n  color: rgba(255,255,255,.38);\n  font-size: 8px;\n  line-height: 1.6;\n}\n\n\/* =========================================================\n   ANIMATION\n========================================================= *\/\n\n@keyframes f3eBodyPlatform {\n  from { left: -110px; }\n  to { left: 110%; }\n}\n\n@keyframes f3eBodyGlow {\n  0%,100% {\n    opacity: .65;\n    transform: translateX(-50%) scale(.95);\n  }\n  50% {\n    opacity: 1;\n    transform: translateX(-50%) scale(1.05);\n  }\n}\n\n@keyframes f3eBodyContentIn {\n  from {\n    opacity: .2;\n    transform: translateY(8px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width: 1024px) {\n  .f3e-body {\n    padding: 50px 22px;\n  }\n\n  .f3e-body__top {\n    gap: 38px;\n  }\n\n  .f3e-body__studio {\n    grid-template-columns: minmax(0,1.18fr) minmax(320px,.82fr);\n    min-height: 520px;\n  }\n\n  .f3e-body__frame {\n    inset: 32px 26px 70px 26px;\n  }\n\n  .f3e-body__truck {\n    width: 92%;\n    transform: translate(-50%, -47%) scale(1.06);\n  }\n}\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width: 767px) {\n  .f3e-body {\n    padding: 44px 16px;\n  }\n\n  .f3e-body__top {\n    display: block;\n    margin-bottom: 21px;\n  }\n\n  .f3e-body__eyebrow {\n    margin-bottom: 10px;\n    font-size: 9px;\n  }\n\n  .f3e-body h2 {\n    max-width: 390px;\n    margin-bottom: 13px;\n    font-size: 35px;\n    line-height: 1.06;\n    letter-spacing: -.9px;\n  }\n\n  .f3e-body__intro {\n    max-width: none;\n    font-size: 12px;\n  }\n\n  .f3e-body__tabs {\n    display: flex;\n    overflow-x: auto;\n    scrollbar-width: none;\n    scroll-snap-type: x proximity;\n  }\n\n  .f3e-body__tabs::-webkit-scrollbar {\n    display: none;\n  }\n\n  .f3e-body__tab {\n    flex: 0 0 165px;\n    min-height: 64px;\n    scroll-snap-align: start;\n  }\n\n  .f3e-body__studio {\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n  }\n\n  .f3e-body__visual {\n    height: 390px;\n  }\n\n  .f3e-body__frame {\n    inset: 18px 14px 66px 14px;\n    border-radius: 20px;\n  }\n\n  .f3e-body__focus-ring {\n    width: 320px;\n    height: 320px;\n    box-shadow:\n      0 0 0 28px rgba(255,255,255,.24),\n      0 0 0 56px rgba(255,255,255,.12);\n  }\n\n  .f3e-body__truck {\n    width: 96%;\n    transform: translate(-50%, -47%) scale(1.06);\n  }\n\n  .f3e-body__platform {\n    left: 9%;\n    right: 9%;\n    bottom: 44px;\n  }\n\n  .f3e-body__floor-fade {\n    height: 100px;\n  }\n\n  .f3e-body__mini-specs {\n    right: 14px;\n    left: 14px;\n    justify-content: flex-start;\n    max-width: none;\n  }\n\n  .f3e-body__content {\n    padding: 29px 21px 31px;\n  }\n\n  .f3e-body__content h3 {\n    font-size: 28px;\n  }\n}\n\n@media (max-width: 390px) {\n  .f3e-body h2 {\n    font-size: 32px;\n  }\n\n  .f3e-body__visual {\n    height: 360px;\n  }\n}\n\n\/* =========================================================\n   ACCESSIBILITY\n========================================================= *\/\n\n.f3e-body button:focus-visible {\n  outline: 2px solid var(--orange);\n  outline-offset: -3px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .f3e-body *,\n  .f3e-body *::before,\n  .f3e-body *::after {\n    animation: none !important;\n    transition: none !important;\n  }\n}\n<\/style>\n\n<section class=\"f3e-body\" id=\"f3e-body-configurations\">\n  <div class=\"f3e-body__inner\">\n\n    <div class=\"f3e-body__top\">\n      <div>\n        <div class=\"f3e-body__eyebrow\">F3E Body Configuration<\/div>\n        <h2>\n          One Electric Truck.\n          <span>Multiple Ways to Work.<\/span>\n        <\/h2>\n      <\/div>\n\n      <p class=\"f3e-body__intro\">\n        Configure the Farizon F3E around different commercial operations \u2014 from\n        open cargo and contractor work to protected delivery and temperature-sensitive\n        transport.\n      <\/p>\n    <\/div>\n\n    <div class=\"f3e-body__tabs\">\n      <button class=\"f3e-body__tab is-active\" type=\"button\" data-f3e-body=\"open\">\n        <span class=\"f3e-body__tab-number\">01<\/span>\n        <strong>Open Deck<\/strong>\n        <span class=\"f3e-body__tab-dot\"><\/span>\n      <\/button>\n\n      <button class=\"f3e-body__tab\" type=\"button\" data-f3e-body=\"high\">\n        <span class=\"f3e-body__tab-number\">02<\/span>\n        <strong>High Box<\/strong>\n        <span class=\"f3e-body__tab-dot\"><\/span>\n      <\/button>\n\n      <button class=\"f3e-body__tab\" type=\"button\" data-f3e-body=\"tailgate\">\n        <span class=\"f3e-body__tab-number\">03<\/span>\n        <strong>Tailgate<\/strong>\n        <span class=\"f3e-body__tab-dot\"><\/span>\n      <\/button>\n\n      <button class=\"f3e-body__tab\" type=\"button\" data-f3e-body=\"freezer\">\n        <span class=\"f3e-body__tab-number\">04<\/span>\n        <strong>Freezer Box<\/strong>\n        <span class=\"f3e-body__tab-dot\"><\/span>\n      <\/button>\n    <\/div>\n\n    <div class=\"f3e-body__studio\" id=\"f3e-body-studio\">\n\n      <div class=\"f3e-body__visual\">\n\n        <div class=\"f3e-body__frame\">\n          <div class=\"f3e-body__focus-ring\"><\/div>\n\n          <div class=\"f3e-body__visual-label\">\n            <span>Selected Configuration<\/span>\n            <strong id=\"f3e-body-visual-label\">Open Deck<\/strong>\n          <\/div>\n\n          <div class=\"f3e-body__truck-wrap\">\n            <div class=\"f3e-body__truck\">\n              <img\n                id=\"f3e-body-image\"\n                src=\"https:\/\/farizon.com.sg\/wp-content\/uploads\/2026\/09\/Farizon-f3e-Sept-ad.png\"\n                alt=\"Farizon F3E Open Deck electric truck Singapore\"\n                loading=\"lazy\"\n                decoding=\"async\">\n            <\/div>\n          <\/div>\n\n          <div class=\"f3e-body__platform\"><\/div>\n          <div class=\"f3e-body__floor-fade\"><\/div>\n\n          <div class=\"f3e-body__config-status\">\n            Configured for commercial work\n          <\/div>\n\n          <div class=\"f3e-body__mini-specs\" id=\"f3e-body-mini-specs\">\n            <span>12ft \/ 14ft Ready<\/span>\n            <span>Business Configurable<\/span>\n          <\/div>\n        <\/div>\n\n      <\/div>\n\n      <div class=\"f3e-body__content\" id=\"f3e-body-content\">\n        <div class=\"f3e-body__mode\" id=\"f3e-body-mode\">Flexible Open Cargo<\/div>\n\n        <h3 id=\"f3e-body-title\">Open Deck<\/h3>\n\n        <p id=\"f3e-body-description\">\n          A flexible open-deck setup for businesses moving tools, equipment,\n          materials and general commercial cargo with straightforward loading access.\n        <\/p>\n\n        <span class=\"f3e-body__use-label\">Typical Applications<\/span>\n\n        <div class=\"f3e-body__uses\" id=\"f3e-body-uses\">\n          <span>Contractor<\/span>\n          <span>Trade<\/span>\n          <span>General Cargo<\/span>\n        <\/div>\n\n        <div class=\"f3e-body__note\">\n          Body configurations shown are commercial application examples. Final\n          specifications and body build may vary according to operational requirements.\n        <\/div>\n      <\/div>\n\n    <\/div>\n  <\/div>\n<\/section>\n\n<script>\n(function () {\n  const section = document.querySelector(\".f3e-body\");\n  if (!section) return;\n\n  const tabs = section.querySelectorAll(\"[data-f3e-body]\");\n  const studio = document.getElementById(\"f3e-body-studio\");\n  const image = document.getElementById(\"f3e-body-image\");\n  const content = document.getElementById(\"f3e-body-content\");\n  const visualLabel = document.getElementById(\"f3e-body-visual-label\");\n  const mode = document.getElementById(\"f3e-body-mode\");\n  const title = document.getElementById(\"f3e-body-title\");\n  const description = document.getElementById(\"f3e-body-description\");\n  const uses = document.getElementById(\"f3e-body-uses\");\n  const miniSpecs = document.getElementById(\"f3e-body-mini-specs\");\n\n  const data = {\n    open: {\n      image: \"https:\/\/farizon.com.sg\/wp-content\/uploads\/2026\/09\/Farizon-f3e-Sept-ad.png\",\n      alt: \"Farizon F3E Open Deck electric truck Singapore\",\n      label: \"Open Deck\",\n      mode: \"Flexible Open Cargo\",\n      title: \"Open Deck\",\n      description: \"A flexible open-deck setup for businesses moving tools, equipment, materials and general commercial cargo with straightforward loading access.\",\n      uses: [\"Contractor\", \"Trade\", \"General Cargo\"],\n      chips: [\"12ft \/ 14ft Ready\", \"Easy Loading\"]\n    },\n\n    high: {\n      image: \"https:\/\/farizon.com.sg\/wp-content\/uploads\/2026\/09\/Farizon-f3e-Sept-ad-1.png\",\n      alt: \"Farizon F3E High Box electric truck Singapore\",\n      label: \"High Box\",\n      mode: \"Protected Cargo Volume\",\n      title: \"High Box\",\n      description: \"An enclosed high-box configuration for businesses that need protected cargo space for logistics, distribution and commercial delivery operations.\",\n      uses: [\"Logistics\", \"Distribution\", \"Protected Cargo\"],\n      chips: [\"Enclosed Body\", \"Delivery Ready\"]\n    },\n\n    tailgate: {\n      image: \"https:\/\/farizon.com.sg\/wp-content\/uploads\/2026\/09\/Farizon-f3e-Sept-ad-2.png\",\n      alt: \"Farizon F3E Tailgate electric truck Singapore\",\n      label: \"Tailgate\",\n      mode: \"Loading Support\",\n      title: \"Tailgate\",\n      description: \"A loading-focused configuration designed to support businesses handling regular cargo movement where easier loading and unloading can improve workflow.\",\n      uses: [\"Delivery\", \"Cargo Handling\", \"Fleet Operations\"],\n      chips: [\"Loading Assist\", \"Workflow Friendly\"]\n    },\n\n    freezer: {\n      image: \"https:\/\/farizon.com.sg\/wp-content\/uploads\/2026\/09\/Farizon-f3e-Sept-ad-3.png\",\n      alt: \"Farizon F3E Freezer Box electric truck Singapore\",\n      label: \"Freezer Box\",\n      mode: \"Cold Chain Transport\",\n      title: \"Freezer Box\",\n      description: \"A temperature-controlled body configuration for food supply, cold-chain delivery and other commercial operations involving temperature-sensitive goods.\",\n      uses: [\"Cold Chain\", \"Food Delivery\", \"Temperature-Sensitive Cargo\"],\n      chips: [\"Temperature Controlled\", \"Cold Chain Ready\"]\n    }\n  };\n\n  function renderUses(items) {\n    uses.innerHTML = \"\";\n    items.forEach(function (item) {\n      const span = document.createElement(\"span\");\n      span.textContent = item;\n      uses.appendChild(span);\n    });\n  }\n\n  function renderChips(items) {\n    miniSpecs.innerHTML = \"\";\n    items.forEach(function (item) {\n      const span = document.createElement(\"span\");\n      span.textContent = item;\n      miniSpecs.appendChild(span);\n    });\n  }\n\n  tabs.forEach(function (tab) {\n    tab.addEventListener(\"click\", function () {\n      const key = tab.getAttribute(\"data-f3e-body\");\n      const selected = data[key];\n      if (!selected) return;\n\n      tabs.forEach(function (item) {\n        item.classList.remove(\"is-active\");\n      });\n\n      tab.classList.add(\"is-active\");\n      studio.classList.add(\"is-changing\");\n\n      setTimeout(function () {\n        image.src = selected.image;\n        image.alt = selected.alt;\n        visualLabel.textContent = selected.label;\n        mode.textContent = selected.mode;\n        title.textContent = selected.title;\n        description.textContent = selected.description;\n        renderUses(selected.uses);\n        renderChips(selected.chips);\n\n        content.classList.remove(\"is-changing\");\n        void content.offsetWidth;\n        content.classList.add(\"is-changing\");\n\n        image.onload = function () {\n          studio.classList.remove(\"is-changing\");\n        };\n\n        if (image.complete) {\n          studio.classList.remove(\"is-changing\");\n        }\n      }, 140);\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 F3E\n   SECTION 04 \u2014 SMART DRIVER WORKSPACE\n========================================================= *\/\n\n.f3e-cabin,\n.f3e-cabin *,\n.f3e-cabin *::before,\n.f3e-cabin *::after {\n  box-sizing: border-box;\n}\n\n.f3e-cabin {\n  --orange: #ff6433;\n  --orange-dark: #e95428;\n  --navy: #263648;\n  --deep: #182635;\n  --text: #5d6672;\n  --muted: #89939e;\n  --line: #e3e7eb;\n  --light: #f5f6f8;\n  --white: #ffffff;\n\n  position: relative;\n  width: 100%;\n  margin: 0 !important;\n\n  padding: 56px 24px;\n\n  overflow: hidden;\n\n  background: #ffffff;\n\n  font-family: Inter, Arial, sans-serif;\n}\n\n.f3e-cabin__inner {\n  width: 100%;\n  max-width: 1280px;\n  margin: 0 auto;\n}\n\n\/* =========================================================\n   INTRO\n========================================================= *\/\n\n.f3e-cabin__top {\n  display: grid;\n  grid-template-columns:\n    minmax(0,1fr)\n    minmax(340px,.72fr);\n\n  gap: 60px;\n  align-items: end;\n\n  margin-bottom: 28px;\n}\n\n.f3e-cabin__eyebrow {\n  display: flex;\n  align-items: center;\n  gap: 11px;\n\n  margin-bottom: 13px;\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.f3e-cabin__eyebrow::before {\n  content: \"\";\n\n  width: 30px;\n  height: 2px;\n\n  background: var(--orange);\n}\n\n.f3e-cabin h2 {\n  max-width: 720px;\n  margin: 0;\n\n  color: var(--navy);\n\n  font-size:\n    clamp(\n      39px,\n      4.2vw,\n      54px\n    );\n\n  font-weight: 700;\n  line-height: 1.03;\n  letter-spacing: -1.4px;\n}\n\n.f3e-cabin h2 span {\n  display: block;\n\n  color: var(--orange);\n}\n\n.f3e-cabin__intro {\n  max-width: 460px;\n\n  margin: 0 0 3px;\n\n  color: var(--text);\n\n  font-size: 13px;\n  line-height: 1.72;\n}\n\n\n\/* =========================================================\n   EXPERIENCE\n========================================================= *\/\n\n.f3e-cabin__experience {\n  display: grid;\n\n  grid-template-columns:\n    minmax(0,1.3fr)\n    minmax(350px,.7fr);\n\n  min-height: 555px;\n\n  overflow: hidden;\n\n  border: 1px solid var(--line);\n\n  background: var(--navy);\n\n  box-shadow:\n    0 20px 55px\n    rgba(31,48,65,.08);\n}\n\n\n\/* =========================================================\n   LARGE IMAGE\n========================================================= *\/\n\n.f3e-cabin__visual {\n  position: relative;\n\n  min-width: 0;\n  overflow: hidden;\n\n  background: #dfe3e7;\n}\n\n.f3e-cabin__visual img {\n  display: block;\n\n  width: 100%;\n  height: 100%;\n\n  object-fit: cover;\n  object-position: center;\n\n  transform: scale(1.005);\n\n  transition:\n    opacity .3s ease,\n    transform .8s cubic-bezier(.2,.65,.3,1);\n}\n\n.f3e-cabin__experience.is-changing\n.f3e-cabin__visual img {\n  opacity: .42;\n\n  transform: scale(1.035);\n}\n\n.f3e-cabin__visual:hover img {\n  transform: scale(1.025);\n}\n\n\n\/* subtle shading *\/\n\n.f3e-cabin__visual::before {\n  content: \"\";\n\n  position: absolute;\n  z-index: 2;\n\n  inset: 0;\n\n  pointer-events: none;\n\n  background:\n    linear-gradient(\n      0deg,\n      rgba(19,31,43,.36) 0%,\n      transparent 42%\n    );\n}\n\n\n\/* =========================================================\n   FLOAT LABEL\n========================================================= *\/\n\n.f3e-cabin__visual-label {\n  position: absolute;\n\n  z-index: 5;\n\n  top: 20px;\n  left: 20px;\n\n  padding: 12px 14px;\n\n  background:\n    rgba(28,43,58,.90);\n\n  backdrop-filter: blur(9px);\n  -webkit-backdrop-filter: blur(9px);\n}\n\n.f3e-cabin__visual-label span {\n  display: block;\n\n  margin-bottom: 4px;\n\n  color: var(--orange);\n\n  font-size: 8px;\n  font-weight: 700;\n\n  letter-spacing: 1px;\n\n  text-transform: uppercase;\n}\n\n.f3e-cabin__visual-label strong {\n  color: #ffffff;\n\n  font-size: 12px;\n  font-weight: 650;\n}\n\n\n\/* =========================================================\n   IMAGE STATUS\n========================================================= *\/\n\n.f3e-cabin__image-status {\n  position: absolute;\n\n  z-index: 5;\n\n  left: 20px;\n  bottom: 20px;\n\n  display: flex;\n  align-items: center;\n  gap: 10px;\n\n  color: rgba(255,255,255,.84);\n\n  font-size: 9px;\n  font-weight: 650;\n}\n\n.f3e-cabin__image-status::before {\n  content: \"\";\n\n  width: 24px;\n  height: 1px;\n\n  background: var(--orange);\n}\n\n\n\/* =========================================================\n   ORANGE SCAN\n========================================================= *\/\n\n.f3e-cabin__scan {\n  position: absolute;\n\n  z-index: 6;\n\n  left: 0;\n  right: 0;\n  bottom: 0;\n\n  height: 3px;\n\n  overflow: hidden;\n\n  background:\n    rgba(255,255,255,.10);\n}\n\n.f3e-cabin__scan::before {\n  content: \"\";\n\n  position: absolute;\n\n  width: 30%;\n  height: 100%;\n\n  left: -30%;\n\n  background:\n    linear-gradient(\n      90deg,\n      transparent,\n      var(--orange),\n      transparent\n    );\n\n  animation:\n    f3eCabinScan\n    3.8s linear infinite;\n}\n\n\n\/* =========================================================\n   RIGHT PANEL\n========================================================= *\/\n\n.f3e-cabin__panel {\n  padding:\n    38px\n    34px;\n\n  display: flex;\n  flex-direction: column;\n\n  justify-content: center;\n\n  background:\n    linear-gradient(\n      145deg,\n      #263648 0%,\n      #192938 100%\n    );\n}\n\n\n\/* =========================================================\n   TABS\n========================================================= *\/\n\n.f3e-cabin__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.f3e-cabin__tab {\n  min-height: 55px;\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: transparent;\n\n  font-family: inherit;\n\n  cursor: pointer;\n}\n\n.f3e-cabin__tab-number {\n  color: var(--orange);\n\n  font-size: 8px;\n  font-weight: 700;\n}\n\n.f3e-cabin__tab strong {\n  color:\n    rgba(255,255,255,.55);\n\n  font-size: 11px;\n  font-weight: 650;\n\n  text-align: left;\n\n  transition:\n    color .22s ease;\n}\n\n.f3e-cabin__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.f3e-cabin__tab:hover strong,\n.f3e-cabin__tab.is-active strong {\n  color: #ffffff;\n}\n\n.f3e-cabin__tab.is-active\n.f3e-cabin__tab-dot {\n  background: 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.f3e-cabin__content.is-changing {\n  animation:\n    f3eCabinContentIn\n    .35s ease both;\n}\n\n.f3e-cabin__mode {\n  margin-bottom: 10px;\n\n  color: var(--orange);\n\n  font-size: 9px;\n  font-weight: 700;\n\n  letter-spacing: 1.2px;\n\n  text-transform: uppercase;\n}\n\n.f3e-cabin__content h3 {\n  max-width: 390px;\n\n  margin:\n    0\n    0\n    13px;\n\n  color: #ffffff;\n\n  font-size:\n    clamp(\n      27px,\n      3vw,\n      35px\n    );\n\n  font-weight: 700;\n\n  line-height: 1.08;\n\n  letter-spacing: -.7px;\n}\n\n.f3e-cabin__content p {\n  max-width: 420px;\n\n  margin:\n    0\n    0\n    22px;\n\n  color:\n    rgba(255,255,255,.64);\n\n  font-size: 12px;\n\n  line-height: 1.72;\n}\n\n\n\/* =========================================================\n   FEATURE TAGS\n========================================================= *\/\n\n.f3e-cabin__features {\n  display: flex;\n\n  flex-wrap: wrap;\n\n  gap: 7px;\n}\n\n.f3e-cabin__features span {\n  padding:\n    8px\n    10px;\n\n  border:\n    1px solid\n    rgba(255,255,255,.14);\n\n  background:\n    rgba(255,255,255,.045);\n\n  color: #ffffff;\n\n  font-size: 9px;\n  font-weight: 600;\n}\n\n\n\/* =========================================================\n   SECONDARY IMAGE\n========================================================= *\/\n\n.f3e-cabin__secondary {\n  margin-top: 24px;\n\n  display: grid;\n\n  grid-template-columns:\n    112px\n    1fr;\n\n  gap: 14px;\n\n  align-items: center;\n\n  padding-top: 18px;\n\n  border-top:\n    1px solid\n    rgba(255,255,255,.11);\n}\n\n.f3e-cabin__secondary-image {\n  height: 78px;\n\n  overflow: hidden;\n\n  background:\n    rgba(255,255,255,.05);\n}\n\n.f3e-cabin__secondary-image img {\n  display: block;\n\n  width: 100%;\n  height: 100%;\n\n  object-fit: cover;\n\n  transition:\n    transform .5s ease;\n}\n\n.f3e-cabin__secondary:hover\n.f3e-cabin__secondary-image img {\n  transform: scale(1.05);\n}\n\n.f3e-cabin__secondary span {\n  display: block;\n\n  margin-bottom: 5px;\n\n  color:\n    rgba(255,255,255,.34);\n\n  font-size: 8px;\n  font-weight: 700;\n\n  letter-spacing: 1px;\n\n  text-transform: uppercase;\n}\n\n.f3e-cabin__secondary strong {\n  display: block;\n\n  color: #ffffff;\n\n  font-size: 11px;\n  font-weight: 650;\n\n  line-height: 1.5;\n}\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width: 1024px) {\n\n  .f3e-cabin {\n    padding:\n      50px\n      22px;\n  }\n\n  .f3e-cabin__top {\n    gap: 38px;\n  }\n\n  .f3e-cabin__experience {\n    grid-template-columns:\n      minmax(0,1.12fr)\n      minmax(330px,.88fr);\n  }\n\n}\n\n\n@media (max-width: 767px) {\n\n  .f3e-cabin {\n    padding:\n      44px\n      16px;\n  }\n\n\n  .f3e-cabin__top {\n    display: block;\n\n    margin-bottom: 21px;\n  }\n\n\n  .f3e-cabin__eyebrow {\n    margin-bottom: 10px;\n\n    font-size: 9px;\n  }\n\n\n  .f3e-cabin h2 {\n    max-width: 390px;\n\n    margin-bottom: 13px;\n\n    font-size: 35px;\n\n    line-height: 1.06;\n\n    letter-spacing: -.9px;\n  }\n\n\n  .f3e-cabin__intro {\n    max-width: none;\n\n    font-size: 12px;\n  }\n\n\n  .f3e-cabin__experience {\n    display: flex;\n\n    flex-direction: column;\n\n    min-height: 0;\n  }\n\n\n  .f3e-cabin__visual {\n    height: 360px;\n  }\n\n\n  .f3e-cabin__panel {\n    padding:\n      29px\n      21px\n      31px;\n  }\n\n\n  .f3e-cabin__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: 25px;\n  }\n\n\n  .f3e-cabin__tab {\n    min-height: 65px;\n\n    display: flex;\n\n    flex-direction: column;\n\n    align-items: flex-start;\n    justify-content: center;\n\n    gap: 4px;\n\n    padding:\n      0\n      10px;\n\n    border-bottom: 0;\n    border-right:\n      1px solid\n      rgba(255,255,255,.11);\n  }\n\n\n  .f3e-cabin__tab:last-child {\n    border-right: 0;\n  }\n\n\n  .f3e-cabin__tab-dot {\n    display: none;\n  }\n\n\n  .f3e-cabin__secondary {\n    grid-template-columns:\n      95px\n      1fr;\n  }\n\n}\n\n\n@media (max-width: 390px) {\n\n  .f3e-cabin h2 {\n    font-size: 32px;\n  }\n\n\n  .f3e-cabin__visual {\n    height: 320px;\n  }\n\n\n  .f3e-cabin__tab strong {\n    font-size: 9px;\n  }\n\n}\n\n\n\/* =========================================================\n   ANIMATION\n========================================================= *\/\n\n@keyframes f3eCabinScan {\n\n  from {\n    left: -30%;\n  }\n\n  to {\n    left: 110%;\n  }\n\n}\n\n\n@keyframes f3eCabinContentIn {\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@media (prefers-reduced-motion: reduce) {\n\n  .f3e-cabin *,\n  .f3e-cabin *::before,\n  .f3e-cabin *::after {\n    animation: none !important;\n    transition: none !important;\n  }\n\n}\n<\/style>\n\n\n<section\n  class=\"f3e-cabin\"\n  id=\"f3e-driver-workspace\">\n\n\n  <div class=\"f3e-cabin__inner\">\n\n\n    <!-- =====================================================\n         INTRO\n    ====================================================== -->\n\n    <div class=\"f3e-cabin__top\">\n\n\n      <div>\n\n        <div class=\"f3e-cabin__eyebrow\">\n          Driver Workspace\n        <\/div>\n\n\n        <h2>\n          A Smarter Workspace\n          <span>for the Working Day.<\/span>\n        <\/h2>\n\n      <\/div>\n\n\n      <p class=\"f3e-cabin__intro\">\n        Inside the Farizon F3E, practical controls,\n        connectivity and driver-focused comfort come together\n        to support everyday commercial operations.\n      <\/p>\n\n\n    <\/div>\n\n\n\n    <!-- =====================================================\n         EXPERIENCE\n    ====================================================== -->\n\n    <div\n      class=\"f3e-cabin__experience\"\n      id=\"f3e-cabin-experience\">\n\n\n      <!-- ===================================================\n           LARGE IMAGE\n      ==================================================== -->\n\n      <div class=\"f3e-cabin__visual\">\n\n\n        <img\n          id=\"f3e-cabin-main-image\"\n          src=\"https:\/\/farizon.com.sg\/wp-content\/uploads\/2026\/10\/IMG_20260622_154128-2-scaled.jpg\"\n          alt=\"Farizon F3E dashboard and driver workspace\"\n          loading=\"lazy\"\n          decoding=\"async\">\n\n\n        <div class=\"f3e-cabin__visual-label\">\n\n          <span>\n            Farizon F3E Interior\n          <\/span>\n\n          <strong id=\"f3e-cabin-visual-label\">\n            Smart Controls\n          <\/strong>\n\n        <\/div>\n\n\n        <div class=\"f3e-cabin__image-status\">\n          Designed around everyday commercial driving\n        <\/div>\n\n\n        <div class=\"f3e-cabin__scan\"><\/div>\n\n\n      <\/div>\n\n\n\n      <!-- ===================================================\n           PANEL\n      ==================================================== -->\n\n      <div class=\"f3e-cabin__panel\">\n\n\n        <!-- TABS -->\n\n        <div class=\"f3e-cabin__tabs\">\n\n\n          <button\n            class=\"f3e-cabin__tab is-active\"\n            type=\"button\"\n            data-f3e-cabin=\"controls\">\n\n            <span class=\"f3e-cabin__tab-number\">\n              01\n            <\/span>\n\n            <strong>\n              Smart Controls\n            <\/strong>\n\n            <span class=\"f3e-cabin__tab-dot\"><\/span>\n\n          <\/button>\n\n\n          <button\n            class=\"f3e-cabin__tab\"\n            type=\"button\"\n            data-f3e-cabin=\"connect\">\n\n            <span class=\"f3e-cabin__tab-number\">\n              02\n            <\/span>\n\n            <strong>\n              Connectivity\n            <\/strong>\n\n            <span class=\"f3e-cabin__tab-dot\"><\/span>\n\n          <\/button>\n\n\n          <button\n            class=\"f3e-cabin__tab\"\n            type=\"button\"\n            data-f3e-cabin=\"comfort\">\n\n            <span class=\"f3e-cabin__tab-number\">\n              03\n            <\/span>\n\n            <strong>\n              Driver Comfort\n            <\/strong>\n\n            <span class=\"f3e-cabin__tab-dot\"><\/span>\n\n          <\/button>\n\n\n        <\/div>\n\n\n\n        <!-- CONTENT -->\n\n        <div\n          class=\"f3e-cabin__content\"\n          id=\"f3e-cabin-content\">\n\n\n          <div\n            class=\"f3e-cabin__mode\"\n            id=\"f3e-cabin-mode\">\n\n            Driver-Focused Controls\n\n          <\/div>\n\n\n          <h3 id=\"f3e-cabin-title\">\n            Practical Controls Within Easy Reach.\n          <\/h3>\n\n\n          <p id=\"f3e-cabin-description\">\n            A driver-focused layout brings key controls together\n            in a clean and practical workspace designed around\n            everyday commercial driving.\n          <\/p>\n\n\n          <div\n            class=\"f3e-cabin__features\"\n            id=\"f3e-cabin-features\">\n\n            <span>Multifunction Steering<\/span>\n\n            <span>Push Start<\/span>\n\n            <span>Keyless Entry<\/span>\n\n          <\/div>\n\n\n        <\/div>\n\n\n\n        <!-- SECONDARY IMAGE -->\n\n        <div class=\"f3e-cabin__secondary\">\n\n\n          <div class=\"f3e-cabin__secondary-image\">\n\n            <img\n              id=\"f3e-cabin-secondary-image\"\n              src=\"https:\/\/farizon.com.sg\/wp-content\/uploads\/2026\/10\/IMG_20260622_154149-2-scaled.jpg\"\n              alt=\"Farizon F3E driver seat\"\n              loading=\"lazy\"\n              decoding=\"async\">\n\n          <\/div>\n\n\n          <div>\n\n            <span>\n              Working Environment\n            <\/span>\n\n            <strong id=\"f3e-cabin-secondary-text\">\n              A practical cabin designed for the working day.\n            <\/strong>\n\n          <\/div>\n\n\n        <\/div>\n\n\n      <\/div>\n\n\n    <\/div>\n\n\n  <\/div>\n\n<\/section>\n\n\n<script>\n(function () {\n\n  const section =\n    document.querySelector(\n      \".f3e-cabin\"\n    );\n\n\n  if (!section) {\n    return;\n  }\n\n\n  const tabs =\n    section.querySelectorAll(\n      \"[data-f3e-cabin]\"\n    );\n\n\n  const experience =\n    document.getElementById(\n      \"f3e-cabin-experience\"\n    );\n\n\n  const mainImage =\n    document.getElementById(\n      \"f3e-cabin-main-image\"\n    );\n\n\n  const visualLabel =\n    document.getElementById(\n      \"f3e-cabin-visual-label\"\n    );\n\n\n  const content =\n    document.getElementById(\n      \"f3e-cabin-content\"\n    );\n\n\n  const mode =\n    document.getElementById(\n      \"f3e-cabin-mode\"\n    );\n\n\n  const title =\n    document.getElementById(\n      \"f3e-cabin-title\"\n    );\n\n\n  const description =\n    document.getElementById(\n      \"f3e-cabin-description\"\n    );\n\n\n  const features =\n    document.getElementById(\n      \"f3e-cabin-features\"\n    );\n\n\n  const secondaryImage =\n    document.getElementById(\n      \"f3e-cabin-secondary-image\"\n    );\n\n\n  const secondaryText =\n    document.getElementById(\n      \"f3e-cabin-secondary-text\"\n    );\n\n\n  const dashboard =\n    \"https:\/\/farizon.com.sg\/wp-content\/uploads\/2026\/10\/IMG_20260622_154128-2-scaled.jpg\";\n\n\n  const seat =\n    \"https:\/\/farizon.com.sg\/wp-content\/uploads\/2026\/10\/IMG_20260622_154149-2-scaled.jpg\";\n\n\n  const data = {\n\n\n    controls: {\n\n      mainImage:\n        dashboard,\n\n      mainAlt:\n        \"Farizon F3E dashboard and driver controls\",\n\n      visualLabel:\n        \"Smart Controls\",\n\n      mode:\n        \"Driver-Focused Controls\",\n\n      title:\n        \"Practical Controls Within Easy Reach.\",\n\n      description:\n        \"A driver-focused layout brings key controls together in a clean and practical workspace designed around everyday commercial driving.\",\n\n      features:\n        [\n          \"Multifunction Steering\",\n          \"Push Start\",\n          \"Keyless Entry\"\n        ],\n\n      secondaryImage:\n        seat,\n\n      secondaryAlt:\n        \"Farizon F3E driver seat\",\n\n      secondaryText:\n        \"A practical cabin designed for the working day.\"\n\n    },\n\n\n    connect: {\n\n      mainImage:\n        dashboard,\n\n      mainAlt:\n        \"Farizon F3E infotainment and dashboard\",\n\n      visualLabel:\n        \"Connectivity\",\n\n      mode:\n        \"Connected Workspace\",\n\n      title:\n        \"Information and Connectivity at Hand.\",\n\n      description:\n        \"The F3E cabin combines its infotainment display with everyday connectivity features to support a more connected working environment.\",\n\n      features:\n        [\n          \"12.3-inch Display\",\n          \"Apple CarPlay\",\n          \"Bluetooth\"\n        ],\n\n      secondaryImage:\n        seat,\n\n      secondaryAlt:\n        \"Farizon F3E commercial vehicle cabin\",\n\n      secondaryText:\n        \"Designed to keep everyday driving practical and connected.\"\n\n    },\n\n\n    comfort: {\n\n      mainImage:\n        seat,\n\n      mainAlt:\n        \"Farizon F3E driver seat and cabin comfort\",\n\n      visualLabel:\n        \"Driver Comfort\",\n\n      mode:\n        \"Working-Day Comfort\",\n\n      title:\n        \"A Cabin Built Around the Driver.\",\n\n      description:\n        \"The driving environment is designed to support comfort and practicality during regular delivery, trade and commercial driving operations.\",\n\n      features:\n        [\n          \"Driver-Focused Seating\",\n          \"Practical Cabin Layout\",\n          \"Daily Commercial Comfort\"\n        ],\n\n      secondaryImage:\n        dashboard,\n\n      secondaryAlt:\n        \"Farizon F3E dashboard\",\n\n      secondaryText:\n        \"Controls and information remain within a clean, modern workspace.\"\n\n    }\n\n  };\n\n\n  function renderFeatures(items) {\n\n    features.innerHTML =\n      \"\";\n\n\n    items.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        features.appendChild(\n          span\n        );\n\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          const key =\n            tab.getAttribute(\n              \"data-f3e-cabin\"\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          setTimeout(\n            function () {\n\n\n              mainImage.src =\n                selected.mainImage;\n\n\n              mainImage.alt =\n                selected.mainAlt;\n\n\n              visualLabel.textContent =\n                selected.visualLabel;\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              renderFeatures(\n                selected.features\n              );\n\n\n              secondaryImage.src =\n                selected.secondaryImage;\n\n\n              secondaryImage.alt =\n                selected.secondaryAlt;\n\n\n              secondaryText.textContent =\n                selected.secondaryText;\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              mainImage.onload =\n                function () {\n\n                  experience.classList.remove(\n                    \"is-changing\"\n                  );\n\n                };\n\n\n              if (mainImage.complete) {\n\n                experience.classList.remove(\n                  \"is-changing\"\n                );\n\n              }\n\n\n            },\n            150\n          );\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 F3E\n   SECTION 05 \u2014 ELECTRIC WORK TECHNOLOGY\n   REFINED \/ SMALLER VEHICLE VISUAL\n========================================================= *\/\n\n.f3e-tech,\n.f3e-tech *,\n.f3e-tech *::before,\n.f3e-tech *::after {\n  box-sizing: border-box;\n}\n\n.f3e-tech {\n  --orange: #ff6433;\n  --navy: #263648;\n  --deep: #111e2a;\n  --deep2: #192a3a;\n  --white: #ffffff;\n  --line: rgba(255,255,255,.11);\n  --soft: rgba(255,255,255,.55);\n\n  width: 100%;\n  margin: 0 !important;\n\n  padding: 58px 24px;\n\n  position: relative;\n  overflow: hidden;\n\n  background:\n    radial-gradient(\n      circle at 84% 20%,\n      rgba(255,100,51,.10),\n      transparent 26%\n    ),\n    linear-gradient(\n      135deg,\n      #263648 0%,\n      #111e2a 100%\n    );\n\n  font-family:\n    Inter,\n    Arial,\n    sans-serif;\n}\n\n.f3e-tech::before {\n  content: \"\";\n\n  position: absolute;\n  inset: 0;\n\n  opacity: .32;\n\n  pointer-events: none;\n\n  background-image:\n    linear-gradient(\n      rgba(255,255,255,.026) 1px,\n      transparent 1px\n    ),\n    linear-gradient(\n      90deg,\n      rgba(255,255,255,.026) 1px,\n      transparent 1px\n    );\n\n  background-size: 48px 48px;\n}\n\n.f3e-tech__inner {\n  width: 100%;\n  max-width: 1280px;\n\n  margin: 0 auto;\n\n  position: relative;\n  z-index: 2;\n}\n\n\n\/* =========================================================\n   INTRO\n========================================================= *\/\n\n.f3e-tech__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.f3e-tech__eyebrow {\n  display: flex;\n  align-items: center;\n\n  gap: 11px;\n\n  margin-bottom: 13px;\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.f3e-tech__eyebrow::before {\n  content: \"\";\n\n  width: 30px;\n  height: 2px;\n\n  background: var(--orange);\n}\n\n.f3e-tech h2 {\n  max-width: 720px;\n\n  margin: 0;\n\n  color: #ffffff;\n\n  font-size:\n    clamp(\n      39px,\n      4.2vw,\n      54px\n    );\n\n  line-height: 1.03;\n\n  font-weight: 700;\n\n  letter-spacing: -1.4px;\n}\n\n.f3e-tech h2 span {\n  display: block;\n\n  color:\n    rgba(255,255,255,.42);\n}\n\n.f3e-tech__intro {\n  max-width: 470px;\n\n  margin: 0 0 3px;\n\n  color:\n    rgba(255,255,255,.60);\n\n  font-size: 13px;\n\n  line-height: 1.72;\n}\n\n\n\/* =========================================================\n   TABS\n========================================================= *\/\n\n.f3e-tech__tabs {\n  display: grid;\n\n  grid-template-columns:\n    repeat(4,1fr);\n\n  margin-bottom: 16px;\n\n  border:\n    1px solid\n    var(--line);\n\n  background:\n    rgba(255,255,255,.02);\n}\n\n.f3e-tech__tab {\n  min-height: 70px;\n\n  padding: 0 18px;\n\n  display: grid;\n\n  grid-template-columns:\n    25px 1fr auto;\n\n  gap: 10px;\n\n  align-items: center;\n\n  border: 0;\n\n  border-right:\n    1px solid\n    var(--line);\n\n  background: transparent;\n\n  color: #ffffff;\n\n  font-family: inherit;\n\n  cursor: pointer;\n\n  transition:\n    background .22s ease;\n}\n\n.f3e-tech__tab:last-child {\n  border-right: 0;\n}\n\n.f3e-tech__tab:hover,\n.f3e-tech__tab.is-active {\n  background:\n    rgba(255,255,255,.06);\n}\n\n.f3e-tech__tab-number {\n  color:\n    var(--orange);\n\n  font-size: 8px;\n  font-weight: 700;\n}\n\n.f3e-tech__tab-copy strong {\n  display: block;\n\n  margin-bottom: 4px;\n\n  color: #ffffff;\n\n  font-size: 11px;\n}\n\n.f3e-tech__tab-copy span {\n  display: block;\n\n  color:\n    rgba(255,255,255,.34);\n\n  font-size: 8px;\n}\n\n.f3e-tech__tab-dot {\n  width: 7px;\n  height: 7px;\n\n  border-radius: 50%;\n\n  background:\n    rgba(255,255,255,.2);\n}\n\n.f3e-tech__tab.is-active\n.f3e-tech__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   MAIN EXPERIENCE\n========================================================= *\/\n\n.f3e-tech__experience {\n  min-height: 535px;\n\n  display: grid;\n\n  grid-template-columns:\n    minmax(330px,.70fr)\n    minmax(0,1.30fr);\n\n  overflow: hidden;\n\n  border:\n    1px solid\n    var(--line);\n\n  background:\n    rgba(255,255,255,.015);\n}\n\n\n\/* =========================================================\n   CONTENT\n========================================================= *\/\n\n.f3e-tech__content {\n  padding:\n    46px\n    40px;\n\n  display: flex;\n\n  flex-direction: column;\n\n  justify-content: center;\n\n  border-right:\n    1px solid\n    var(--line);\n}\n\n.f3e-tech__state {\n  display: none;\n}\n\n.f3e-tech__state.is-active {\n  display: block;\n\n  animation:\n    f3eTechFade\n    .32s ease both;\n}\n\n.f3e-tech__mode {\n  margin-bottom: 12px;\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.f3e-tech__metric {\n  margin-bottom: 5px;\n\n  color: #ffffff;\n\n  font-size:\n    clamp(\n      44px,\n      5vw,\n      65px\n    );\n\n  line-height: .96;\n\n  font-weight: 700;\n\n  letter-spacing: -1.7px;\n}\n\n.f3e-tech__metric-sub {\n  margin-bottom: 21px;\n\n  color:\n    rgba(255,255,255,.35);\n\n  font-size: 9px;\n  font-weight: 600;\n}\n\n.f3e-tech__content h3 {\n  max-width: 410px;\n\n  margin:\n    0\n    0\n    13px;\n\n  color: #ffffff;\n\n  font-size: 26px;\n\n  line-height: 1.13;\n}\n\n.f3e-tech__content p {\n  max-width: 420px;\n\n  margin:\n    0\n    0\n    23px;\n\n  color:\n    rgba(255,255,255,.58);\n\n  font-size: 12px;\n\n  line-height: 1.72;\n}\n\n.f3e-tech__tags {\n  display: flex;\n\n  flex-wrap: wrap;\n\n  gap: 7px;\n}\n\n.f3e-tech__tags span {\n  padding:\n    8px\n    10px;\n\n  border:\n    1px solid\n    var(--line);\n\n  color:\n    rgba(255,255,255,.72);\n\n  font-size: 8px;\n  font-weight: 600;\n}\n\n\n\/* =========================================================\n   VISUAL CHAMBER\n========================================================= *\/\n\n.f3e-tech__visual {\n  min-height: 535px;\n\n  position: relative;\n\n  overflow: hidden;\n}\n\n\n\/* large technical circle *\/\n\n.f3e-tech__circle {\n  width: 430px;\n  height: 430px;\n\n  position: absolute;\n\n  left: 52%;\n  top: 50%;\n\n  transform:\n    translate(-50%,-50%);\n\n  border-radius: 50%;\n\n  border:\n    1px solid\n    rgba(255,255,255,.07);\n}\n\n.f3e-tech__circle::before,\n.f3e-tech__circle::after {\n  content: \"\";\n\n  position: absolute;\n\n  border-radius: 50%;\n\n  border:\n    1px solid\n    rgba(255,255,255,.05);\n}\n\n.f3e-tech__circle::before {\n  inset: 45px;\n}\n\n.f3e-tech__circle::after {\n  inset: 100px;\n}\n\n\n\/* subtle orange arc *\/\n\n.f3e-tech__arc {\n  width: 430px;\n  height: 430px;\n\n  position: absolute;\n\n  left: 52%;\n  top: 50%;\n\n  transform:\n    translate(-50%,-50%);\n\n  border-radius: 50%;\n\n  border:\n    1px dashed\n    rgba(255,100,51,.20);\n\n  animation:\n    f3eTechRotate\n    24s linear infinite;\n}\n\n\n\/* floor *\/\n\n.f3e-tech__floor {\n  width: 58%;\n  height: 1px;\n\n  position: absolute;\n\n  left: 52%;\n  bottom: 89px;\n\n  transform:\n    translateX(-50%);\n\n  background:\n    rgba(255,255,255,.12);\n}\n\n.f3e-tech__floor::before {\n  content: \"\";\n\n  width: 100px;\n  height: 2px;\n\n  position: absolute;\n\n  left: -100px;\n  top: -1px;\n\n  background:\n    linear-gradient(\n      90deg,\n      transparent,\n      var(--orange),\n      transparent\n    );\n\n  animation:\n    f3eTechFlow\n    3s linear infinite;\n}\n\n\n\/* =========================================================\n   VEHICLE \u2014 IMPORTANT FIX\n========================================================= *\/\n\n.f3e-tech__truck {\n  position: absolute;\n\n  z-index: 7;\n\n  left: 52%;\n  top: 50%;\n\n  \/*\n     IMPORTANT:\n     Do not enlarge the PNG.\n     Smaller size hides aliasing\/pixel defects.\n  *\/\n\n  width:\n    min(\n      62%,\n      520px\n    );\n\n  transform:\n    translate(-50%,-47%);\n\n  filter:\n    drop-shadow(\n      0 20px 18px\n      rgba(0,0,0,.26)\n    );\n}\n\n.f3e-tech__truck img {\n  display: block;\n\n  width: 100%;\n  height: auto;\n\n  max-width: 100%;\n\n  image-rendering: auto;\n\n  transform: none !important;\n}\n\n\n\/* =========================================================\n   TECH TELEMETRY\n========================================================= *\/\n\n.f3e-tech__telemetry {\n  position: absolute;\n\n  z-index: 8;\n\n  min-width: 120px;\n\n  padding:\n    10px\n    12px;\n\n  border:\n    1px solid\n    rgba(255,255,255,.11);\n\n  background:\n    rgba(17,30,42,.72);\n\n  backdrop-filter:\n    blur(7px);\n\n  -webkit-backdrop-filter:\n    blur(7px);\n}\n\n.f3e-tech__telemetry span {\n  display: block;\n\n  margin-bottom: 4px;\n\n  color:\n    rgba(255,255,255,.32);\n\n  font-size: 7px;\n  font-weight: 700;\n\n  letter-spacing: .8px;\n\n  text-transform: uppercase;\n}\n\n.f3e-tech__telemetry strong {\n  display: block;\n\n  color: #ffffff;\n\n  font-size: 9px;\n  font-weight: 650;\n}\n\n.f3e-tech__telemetry--left {\n  left: 6%;\n  top: 29%;\n}\n\n.f3e-tech__telemetry--right {\n  right: 5%;\n  top: 26%;\n}\n\n.f3e-tech__telemetry--bottom {\n  right: 8%;\n  bottom: 16%;\n}\n\n\n\/* line from telemetry *\/\n\n.f3e-tech__telemetry--left::after {\n  content: \"\";\n\n  width: 70px;\n  height: 1px;\n\n  position: absolute;\n\n  left: 100%;\n  top: 50%;\n\n  background:\n    linear-gradient(\n      90deg,\n      rgba(255,100,51,.55),\n      transparent\n    );\n}\n\n.f3e-tech__telemetry--right::after {\n  content: \"\";\n\n  width: 65px;\n  height: 1px;\n\n  position: absolute;\n\n  right: 100%;\n  top: 50%;\n\n  background:\n    linear-gradient(\n      270deg,\n      rgba(255,100,51,.55),\n      transparent\n    );\n}\n\n\n\/* =========================================================\n   GRAPHIC MODES\n========================================================= *\/\n\n.f3e-tech__graphic {\n  position: absolute;\n\n  inset: 0;\n\n  opacity: 0;\n\n  pointer-events: none;\n\n  transition:\n    opacity .3s ease;\n}\n\n.f3e-tech__graphic.is-active {\n  opacity: 1;\n}\n\n\n\/* ENERGY *\/\n\n.f3e-tech__pulse {\n  position: absolute;\n\n  width: 270px;\n  height: 270px;\n\n  left: 52%;\n  top: 50%;\n\n  transform:\n    translate(-50%,-50%);\n\n  border-radius: 50%;\n\n  border:\n    1px solid\n    rgba(255,100,51,.30);\n\n  animation:\n    f3eTechPulse\n    2.8s ease-in-out infinite;\n}\n\n.f3e-tech__pulse--2 {\n  width: 345px;\n  height: 345px;\n\n  animation-delay: .5s;\n}\n\n\n\/* CHARGING *\/\n\n.f3e-tech__charge-flow {\n  width: 43%;\n  height: 2px;\n\n  position: absolute;\n\n  right: 3%;\n  bottom: 113px;\n\n  overflow: hidden;\n\n  background:\n    rgba(255,255,255,.09);\n}\n\n.f3e-tech__charge-flow::before {\n  content: \"\";\n\n  position: absolute;\n\n  width: 90px;\n  height: 100%;\n\n  left: -90px;\n\n  background:\n    linear-gradient(\n      90deg,\n      transparent,\n      var(--orange),\n      transparent\n    );\n\n  animation:\n    f3eTechCharge\n    1.8s linear infinite;\n}\n\n\n\/* PLATFORM *\/\n\n.f3e-tech__platform-line {\n  width: 52%;\n  height: 3px;\n\n  position: absolute;\n\n  left: 52%;\n  bottom: 104px;\n\n  transform:\n    translateX(-50%);\n\n  background:\n    rgba(255,255,255,.10);\n}\n\n.f3e-tech__platform-line::before {\n  content: \"\";\n\n  width: 45%;\n  height: 100%;\n\n  position: absolute;\n\n  left: 0;\n\n  background:\n    var(--orange);\n\n  animation:\n    f3eTechPlatform\n    3s ease-in-out infinite;\n}\n\n\n\/* SAFETY *\/\n\n.f3e-tech__radar {\n  position: absolute;\n\n  width: 360px;\n  height: 360px;\n\n  left: 52%;\n  top: 50%;\n\n  transform:\n    translate(-50%,-50%);\n\n  border-radius: 50%;\n\n  border:\n    1px solid\n    rgba(255,100,51,.20);\n\n  animation:\n    f3eTechRadar\n    2.8s ease-in-out infinite;\n}\n\n.f3e-tech__radar--2 {\n  width: 280px;\n  height: 280px;\n\n  animation-delay: .5s;\n}\n\n\n\/* =========================================================\n   MODE STATUS\n========================================================= *\/\n\n.f3e-tech__status {\n  position: absolute;\n\n  z-index: 9;\n\n  left: 20px;\n  bottom: 18px;\n\n  padding:\n    10px\n    12px;\n\n  background:\n    rgba(17,30,42,.78);\n\n  border:\n    1px solid\n    rgba(255,255,255,.10);\n}\n\n.f3e-tech__status 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.f3e-tech__status strong {\n  color: #ffffff;\n\n  font-size: 9px;\n}\n\n\n\/* =========================================================\n   ANIMATIONS\n========================================================= *\/\n\n@keyframes f3eTechFade {\n  from {\n    opacity: .15;\n    transform: translateY(7px);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes f3eTechRotate {\n  from {\n    transform:\n      translate(-50%,-50%)\n      rotate(0);\n  }\n\n  to {\n    transform:\n      translate(-50%,-50%)\n      rotate(360deg);\n  }\n}\n\n@keyframes f3eTechFlow {\n  from {\n    left: -100px;\n  }\n\n  to {\n    left: 110%;\n  }\n}\n\n@keyframes f3eTechPulse {\n  0%,\n  100% {\n    opacity: .20;\n\n    transform:\n      translate(-50%,-50%)\n      scale(.94);\n  }\n\n  50% {\n    opacity: .65;\n\n    transform:\n      translate(-50%,-50%)\n      scale(1.05);\n  }\n}\n\n@keyframes f3eTechCharge {\n  from {\n    left: -90px;\n  }\n\n  to {\n    left: 110%;\n  }\n}\n\n@keyframes f3eTechPlatform {\n  0%,\n  100% {\n    width: 32%;\n  }\n\n  50% {\n    width: 72%;\n  }\n}\n\n@keyframes f3eTechRadar {\n  0%,\n  100% {\n    opacity: .18;\n\n    transform:\n      translate(-50%,-50%)\n      scale(.94);\n  }\n\n  50% {\n    opacity: .58;\n\n    transform:\n      translate(-50%,-50%)\n      scale(1.04);\n  }\n}\n\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width: 1024px) {\n\n  .f3e-tech {\n    padding:\n      52px\n      22px;\n  }\n\n  .f3e-tech__top {\n    gap: 38px;\n  }\n\n  .f3e-tech__experience {\n    grid-template-columns:\n      minmax(310px,.78fr)\n      minmax(0,1.22fr);\n  }\n\n  .f3e-tech__content {\n    padding:\n      40px\n      30px;\n  }\n\n  .f3e-tech__truck {\n    width:\n      min(\n        64%,\n        470px\n      );\n  }\n\n  .f3e-tech__circle,\n  .f3e-tech__arc {\n    width: 370px;\n    height: 370px;\n  }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width: 767px) {\n\n  .f3e-tech {\n    padding:\n      45px\n      16px;\n  }\n\n  .f3e-tech__top {\n    display: block;\n\n    margin-bottom: 21px;\n  }\n\n  .f3e-tech__eyebrow {\n    font-size: 9px;\n  }\n\n  .f3e-tech h2 {\n    max-width: 390px;\n\n    margin-bottom: 13px;\n\n    font-size: 35px;\n\n    line-height: 1.06;\n  }\n\n  .f3e-tech__intro {\n    max-width: none;\n\n    font-size: 12px;\n  }\n\n\n  \/* tabs *\/\n\n  .f3e-tech__tabs {\n    display: flex;\n\n    overflow-x: auto;\n\n    scrollbar-width: none;\n\n    scroll-snap-type:\n      x proximity;\n  }\n\n  .f3e-tech__tabs::-webkit-scrollbar {\n    display: none;\n  }\n\n  .f3e-tech__tab {\n    flex:\n      0 0 165px;\n\n    min-height: 65px;\n\n    scroll-snap-align: start;\n  }\n\n\n  \/* experience *\/\n\n  .f3e-tech__experience {\n    display: flex;\n\n    flex-direction: column;\n\n    min-height: 0;\n  }\n\n  .f3e-tech__content {\n    padding:\n      31px\n      21px\n      28px;\n\n    border-right: 0;\n\n    border-bottom:\n      1px solid\n      var(--line);\n  }\n\n  .f3e-tech__visual {\n    min-height: 380px;\n  }\n\n  .f3e-tech__truck {\n    width:\n      min(\n        68%,\n        350px\n      );\n  }\n\n  .f3e-tech__circle,\n  .f3e-tech__arc {\n    width: 290px;\n    height: 290px;\n  }\n\n  .f3e-tech__circle::before {\n    inset: 35px;\n  }\n\n  .f3e-tech__circle::after {\n    inset: 75px;\n  }\n\n  .f3e-tech__telemetry {\n    min-width: 95px;\n\n    padding:\n      8px\n      9px;\n  }\n\n  .f3e-tech__telemetry--left {\n    left: 3%;\n    top: 23%;\n  }\n\n  .f3e-tech__telemetry--right {\n    right: 3%;\n    top: 25%;\n  }\n\n  .f3e-tech__telemetry--bottom {\n    right: 5%;\n    bottom: 13%;\n  }\n\n  .f3e-tech__pulse {\n    width: 210px;\n    height: 210px;\n  }\n\n  .f3e-tech__pulse--2 {\n    width: 275px;\n    height: 275px;\n  }\n\n  .f3e-tech__radar {\n    width: 270px;\n    height: 270px;\n  }\n\n  .f3e-tech__radar--2 {\n    width: 205px;\n    height: 205px;\n  }\n\n}\n\n\n@media (max-width: 390px) {\n\n  .f3e-tech h2 {\n    font-size: 32px;\n  }\n\n  .f3e-tech__visual {\n    min-height: 350px;\n  }\n\n  .f3e-tech__truck {\n    width: 70%;\n  }\n\n  .f3e-tech__telemetry--bottom {\n    display: none;\n  }\n\n}\n\n\n\/* =========================================================\n   REDUCED MOTION\n========================================================= *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n  .f3e-tech *,\n  .f3e-tech *::before,\n  .f3e-tech *::after {\n    animation: none !important;\n    transition: none !important;\n  }\n\n}\n<\/style>\n\n\n<section\n  class=\"f3e-tech\"\n  id=\"f3e-electric-technology\">\n\n\n  <div class=\"f3e-tech__inner\">\n\n\n    <!-- =====================================================\n         INTRO\n    ====================================================== -->\n\n    <div class=\"f3e-tech__top\">\n\n\n      <div>\n\n        <div class=\"f3e-tech__eyebrow\">\n          Electric Work Technology\n        <\/div>\n\n\n        <h2>\n          Technology Built\n          <span>for Commercial Work.<\/span>\n        <\/h2>\n\n      <\/div>\n\n\n      <p class=\"f3e-tech__intro\">\n        Explore the energy system, charging capability,\n        commercial platform and safety technologies supporting\n        the Farizon F3E in everyday business operations.\n      <\/p>\n\n\n    <\/div>\n\n\n\n    <!-- =====================================================\n         TABS\n    ====================================================== -->\n\n    <div class=\"f3e-tech__tabs\">\n\n\n      <button\n        class=\"f3e-tech__tab is-active\"\n        type=\"button\"\n        data-f3e-tech=\"energy\">\n\n        <span class=\"f3e-tech__tab-number\">\n          01\n        <\/span>\n\n        <span class=\"f3e-tech__tab-copy\">\n\n          <strong>\n            Energy\n          <\/strong>\n\n          <span>\n            Battery &amp; efficiency\n          <\/span>\n\n        <\/span>\n\n        <span class=\"f3e-tech__tab-dot\"><\/span>\n\n      <\/button>\n\n\n\n      <button\n        class=\"f3e-tech__tab\"\n        type=\"button\"\n        data-f3e-tech=\"charging\">\n\n        <span class=\"f3e-tech__tab-number\">\n          02\n        <\/span>\n\n        <span class=\"f3e-tech__tab-copy\">\n\n          <strong>\n            Charging &amp; Power\n          <\/strong>\n\n          <span>\n            DC \u00b7 V2L \u00b7 PTO\n          <\/span>\n\n        <\/span>\n\n        <span class=\"f3e-tech__tab-dot\"><\/span>\n\n      <\/button>\n\n\n\n      <button\n        class=\"f3e-tech__tab\"\n        type=\"button\"\n        data-f3e-tech=\"platform\">\n\n        <span class=\"f3e-tech__tab-number\">\n          03\n        <\/span>\n\n        <span class=\"f3e-tech__tab-copy\">\n\n          <strong>\n            Platform\n          <\/strong>\n\n          <span>\n            Motor \u00b7 chassis \u00b7 wheels\n          <\/span>\n\n        <\/span>\n\n        <span class=\"f3e-tech__tab-dot\"><\/span>\n\n      <\/button>\n\n\n\n      <button\n        class=\"f3e-tech__tab\"\n        type=\"button\"\n        data-f3e-tech=\"safety\">\n\n        <span class=\"f3e-tech__tab-number\">\n          04\n        <\/span>\n\n        <span class=\"f3e-tech__tab-copy\">\n\n          <strong>\n            Safety\n          <\/strong>\n\n          <span>\n            Driver &amp; vehicle support\n          <\/span>\n\n        <\/span>\n\n        <span class=\"f3e-tech__tab-dot\"><\/span>\n\n      <\/button>\n\n\n    <\/div>\n\n\n\n    <!-- =====================================================\n         EXPERIENCE\n    ====================================================== -->\n\n    <div class=\"f3e-tech__experience\">\n\n\n      <!-- CONTENT -->\n\n      <div class=\"f3e-tech__content\">\n\n\n        <!-- ENERGY -->\n\n        <div\n          class=\"f3e-tech__state is-active\"\n          data-f3e-tech-content=\"energy\">\n\n\n          <div class=\"f3e-tech__mode\">\n            Energy System\n          <\/div>\n\n\n          <div class=\"f3e-tech__metric\">\n            73kWh\n          <\/div>\n\n\n          <div class=\"f3e-tech__metric-sub\">\n            High-voltage battery\n          <\/div>\n\n\n          <h3>\n            Electric Energy Designed for Daily Business Use.\n          <\/h3>\n\n\n          <p>\n            The F3E uses a 73kWh high-voltage battery and\n            is rated at 30.7kWh\/100km combined energy\n            consumption for commercial operation.\n          <\/p>\n\n\n          <div class=\"f3e-tech__tags\">\n\n            <span>73kWh Battery<\/span>\n\n            <span>30.7kWh\/100km Combined<\/span>\n\n            <span>100% Electric<\/span>\n\n          <\/div>\n\n\n        <\/div>\n\n\n\n        <!-- CHARGING -->\n\n        <div\n          class=\"f3e-tech__state\"\n          data-f3e-tech-content=\"charging\">\n\n\n          <div class=\"f3e-tech__mode\">\n            Charging &amp; External Power\n          <\/div>\n\n\n          <div class=\"f3e-tech__metric\">\n            100kW\n          <\/div>\n\n\n          <div class=\"f3e-tech__metric-sub\">\n            Up to \u00b7 DC fast charging\n          <\/div>\n\n\n          <h3>\n            Power for the Truck \u2014 and the Job.\n          <\/h3>\n\n\n          <p>\n            Alongside DC fast charging, the F3E supports\n            external power capability for business applications,\n            including V2L and optional DC power take-off equipment.\n          <\/p>\n\n\n          <div class=\"f3e-tech__tags\">\n\n            <span>Up to 100kW DC<\/span>\n\n            <span>3.3kW V2L<\/span>\n\n            <span>Optional 10kW DC PTO<\/span>\n\n          <\/div>\n\n\n        <\/div>\n\n\n\n        <!-- PLATFORM -->\n\n        <div\n          class=\"f3e-tech__state\"\n          data-f3e-tech-content=\"platform\">\n\n\n          <div class=\"f3e-tech__mode\">\n            Commercial Platform\n          <\/div>\n\n\n          <div class=\"f3e-tech__metric\">\n            110kW\n          <\/div>\n\n\n          <div class=\"f3e-tech__metric-sub\">\n            Peak motor output\n          <\/div>\n\n\n          <h3>\n            Engineered Around Commercial Duty.\n          <\/h3>\n\n\n          <p>\n            The F3E combines a reinforced Class II chassis,\n            six-wheel setup and electric powertrain designed\n            around everyday commercial transport requirements.\n          <\/p>\n\n\n          <div class=\"f3e-tech__tags\">\n\n            <span>4,300kg GVW<\/span>\n\n            <span>Reinforced Class II<\/span>\n\n            <span>6-Wheel Setup<\/span>\n\n          <\/div>\n\n\n        <\/div>\n\n\n\n        <!-- SAFETY -->\n\n        <div\n          class=\"f3e-tech__state\"\n          data-f3e-tech-content=\"safety\">\n\n\n          <div class=\"f3e-tech__mode\">\n            Safety &amp; Driver Support\n          <\/div>\n\n\n          <div class=\"f3e-tech__metric\">\n            ADAS\n          <\/div>\n\n\n          <div class=\"f3e-tech__metric-sub\">\n            Driver-assistance technology\n          <\/div>\n\n\n          <h3>\n            Technology Supporting Everyday Driving.\n          <\/h3>\n\n\n          <p>\n            Driver-assistance and vehicle-control systems\n            support awareness, braking and stability during\n            regular commercial driving operations.\n          <\/p>\n\n\n          <div class=\"f3e-tech__tags\">\n\n            <span>Dual Airbags<\/span>\n\n            <span>EHB<\/span>\n\n            <span>ESC<\/span>\n\n            <span>EPB<\/span>\n\n          <\/div>\n\n\n        <\/div>\n\n\n      <\/div>\n\n\n\n      <!-- ===================================================\n           VISUAL\n      ==================================================== -->\n\n      <div class=\"f3e-tech__visual\">\n\n\n        <!-- TECH CHAMBER -->\n\n        <div class=\"f3e-tech__circle\"><\/div>\n\n        <div class=\"f3e-tech__arc\"><\/div>\n\n        <div class=\"f3e-tech__floor\"><\/div>\n\n\n\n        <!-- ENERGY GRAPHIC -->\n\n        <div\n          class=\"f3e-tech__graphic is-active\"\n          data-f3e-tech-graphic=\"energy\">\n\n          <div class=\"f3e-tech__pulse\"><\/div>\n\n          <div class=\"f3e-tech__pulse f3e-tech__pulse--2\"><\/div>\n\n        <\/div>\n\n\n\n        <!-- CHARGING -->\n\n        <div\n          class=\"f3e-tech__graphic\"\n          data-f3e-tech-graphic=\"charging\">\n\n          <div class=\"f3e-tech__charge-flow\"><\/div>\n\n        <\/div>\n\n\n\n        <!-- PLATFORM -->\n\n        <div\n          class=\"f3e-tech__graphic\"\n          data-f3e-tech-graphic=\"platform\">\n\n          <div class=\"f3e-tech__platform-line\"><\/div>\n\n        <\/div>\n\n\n\n        <!-- SAFETY -->\n\n        <div\n          class=\"f3e-tech__graphic\"\n          data-f3e-tech-graphic=\"safety\">\n\n          <div class=\"f3e-tech__radar\"><\/div>\n\n          <div class=\"f3e-tech__radar f3e-tech__radar--2\"><\/div>\n\n        <\/div>\n\n\n\n        <!-- TELEMETRY -->\n\n        <div\n          class=\"f3e-tech__telemetry f3e-tech__telemetry--left\">\n\n          <span id=\"f3e-tech-left-label\">\n            Energy\n          <\/span>\n\n          <strong id=\"f3e-tech-left-value\">\n            73kWh Battery\n          <\/strong>\n\n        <\/div>\n\n\n\n        <div\n          class=\"f3e-tech__telemetry f3e-tech__telemetry--right\">\n\n          <span id=\"f3e-tech-right-label\">\n            Efficiency\n          <\/span>\n\n          <strong id=\"f3e-tech-right-value\">\n            30.7kWh\/100km\n          <\/strong>\n\n        <\/div>\n\n\n\n        <div\n          class=\"f3e-tech__telemetry f3e-tech__telemetry--bottom\">\n\n          <span>\n            Vehicle\n          <\/span>\n\n          <strong>\n            Farizon F3E\n          <\/strong>\n\n        <\/div>\n\n\n\n        <!-- VEHICLE -->\n\n        <div class=\"f3e-tech__truck\">\n\n          <img\n            src=\"https:\/\/farizon.com.sg\/wp-content\/uploads\/2026\/10\/Farizon-f3e-Sept-ad-4.png\"\n            alt=\"Farizon F3E electric commercial truck Singapore\"\n            loading=\"lazy\"\n            decoding=\"async\">\n\n        <\/div>\n\n\n\n        <!-- STATUS -->\n\n        <div class=\"f3e-tech__status\">\n\n          <span>\n            F3E Technical View\n          <\/span>\n\n          <strong id=\"f3e-tech-status\">\n            Energy System\n          <\/strong>\n\n        <\/div>\n\n\n      <\/div>\n\n\n    <\/div>\n\n\n  <\/div>\n\n<\/section>\n\n\n<script>\n(function () {\n\n  const section =\n    document.querySelector(\n      \".f3e-tech\"\n    );\n\n  if (!section) {\n    return;\n  }\n\n\n  const tabs =\n    section.querySelectorAll(\n      \"[data-f3e-tech]\"\n    );\n\n\n  const contents =\n    section.querySelectorAll(\n      \"[data-f3e-tech-content]\"\n    );\n\n\n  const graphics =\n    section.querySelectorAll(\n      \"[data-f3e-tech-graphic]\"\n    );\n\n\n  const status =\n    document.getElementById(\n      \"f3e-tech-status\"\n    );\n\n\n  const leftLabel =\n    document.getElementById(\n      \"f3e-tech-left-label\"\n    );\n\n\n  const leftValue =\n    document.getElementById(\n      \"f3e-tech-left-value\"\n    );\n\n\n  const rightLabel =\n    document.getElementById(\n      \"f3e-tech-right-label\"\n    );\n\n\n  const rightValue =\n    document.getElementById(\n      \"f3e-tech-right-value\"\n    );\n\n\n  const data = {\n\n    energy: {\n      status: \"Energy System\",\n      leftLabel: \"Energy\",\n      leftValue: \"73kWh Battery\",\n      rightLabel: \"Efficiency\",\n      rightValue: \"30.7kWh\/100km\"\n    },\n\n    charging: {\n      status: \"Charging & Power\",\n      leftLabel: \"DC Charging\",\n      leftValue: \"Up to 100kW\",\n      rightLabel: \"External Power\",\n      rightValue: \"3.3kW V2L\"\n    },\n\n    platform: {\n      status: \"Commercial Platform\",\n      leftLabel: \"Peak Motor\",\n      leftValue: \"110kW\",\n      rightLabel: \"GVW\",\n      rightValue: \"4,300kg\"\n    },\n\n    safety: {\n      status: \"Safety Systems\",\n      leftLabel: \"Driver Support\",\n      leftValue: \"ADAS\",\n      rightLabel: \"Vehicle Control\",\n      rightValue: \"EHB \u00b7 ESC \u00b7 EPB\"\n    }\n\n  };\n\n\n  tabs.forEach(\n    function (tab) {\n\n      tab.addEventListener(\n        \"click\",\n        function () {\n\n\n          const mode =\n            tab.getAttribute(\n              \"data-f3e-tech\"\n            );\n\n\n          const selected =\n            data[mode];\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          contents.forEach(\n            function (item) {\n\n              item.classList.remove(\n                \"is-active\"\n              );\n\n            }\n          );\n\n\n          graphics.forEach(\n            function (item) {\n\n              item.classList.remove(\n                \"is-active\"\n              );\n\n            }\n          );\n\n\n          const activeContent =\n            section.querySelector(\n              '[data-f3e-tech-content=\"' +\n              mode +\n              '\"]'\n            );\n\n\n          const activeGraphic =\n            section.querySelector(\n              '[data-f3e-tech-graphic=\"' +\n              mode +\n              '\"]'\n            );\n\n\n          if (activeContent) {\n            activeContent.classList.add(\n              \"is-active\"\n            );\n          }\n\n\n          if (activeGraphic) {\n            activeGraphic.classList.add(\n              \"is-active\"\n            );\n          }\n\n\n          status.textContent =\n            selected.status;\n\n\n          leftLabel.textContent =\n            selected.leftLabel;\n\n\n          leftValue.textContent =\n            selected.leftValue;\n\n\n          rightLabel.textContent =\n            selected.rightLabel;\n\n\n          rightValue.textContent =\n            selected.rightValue;\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 F3E\n   SECTION 06 \u2014 F3E IN ACTION\n   OFFICIAL TIKTOK IFRAME PLAYER\n========================================================= *\/\n\n.f3e-action,\n.f3e-action *,\n.f3e-action *::before,\n.f3e-action *::after {\n  box-sizing: border-box;\n}\n\n.f3e-action {\n  --orange: #ff6433;\n  --navy: #263648;\n  --deep: #142536;\n  --deep2: #1c3147;\n  --white: #ffffff;\n  --line: rgba(255,255,255,.11);\n\n  position: relative;\n\n  width: 100%;\n\n  margin: 0 !important;\n\n  padding:\n    60px\n    24px;\n\n  overflow: hidden;\n\n  background:\n    radial-gradient(\n      circle at 18% 50%,\n      rgba(255,100,51,.10),\n      transparent 30%\n    ),\n    linear-gradient(\n      135deg,\n      #263648 0%,\n      #142536 100%\n    );\n\n  font-family:\n    Inter,\n    Arial,\n    sans-serif;\n}\n\n\n\/* subtle background grid *\/\n\n.f3e-action::before {\n  content: \"\";\n\n  position: absolute;\n\n  inset: 0;\n\n  opacity: .25;\n\n  pointer-events: none;\n\n  background-image:\n    linear-gradient(\n      rgba(255,255,255,.025) 1px,\n      transparent 1px\n    ),\n    linear-gradient(\n      90deg,\n      rgba(255,255,255,.025) 1px,\n      transparent 1px\n    );\n\n  background-size:\n    54px 54px;\n}\n\n\n.f3e-action__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.f3e-action__head {\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: 31px;\n}\n\n\n.f3e-action__eyebrow {\n  display: flex;\n\n  align-items: center;\n\n  gap: 11px;\n\n  margin-bottom: 13px;\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.f3e-action__eyebrow::before {\n  content: \"\";\n\n  width: 30px;\n  height: 2px;\n\n  background:\n    var(--orange);\n}\n\n\n.f3e-action h2 {\n  max-width: 720px;\n\n  margin: 0;\n\n  color: #ffffff;\n\n  font-size:\n    clamp(\n      39px,\n      4.2vw,\n      54px\n    );\n\n  line-height: 1.03;\n\n  font-weight: 700;\n\n  letter-spacing: -1.4px;\n}\n\n\n.f3e-action h2 span {\n  display: block;\n\n  color:\n    rgba(255,255,255,.43);\n}\n\n\n.f3e-action__intro {\n  max-width: 470px;\n\n  margin:\n    0\n    0\n    3px;\n\n  color:\n    rgba(255,255,255,.62);\n\n  font-size: 13px;\n\n  line-height: 1.72;\n}\n\n\n\/* =========================================================\n   MAIN EXPERIENCE\n========================================================= *\/\n\n.f3e-action__experience {\n  display: grid;\n\n  grid-template-columns:\n    minmax(360px,.72fr)\n    minmax(0,1.28fr);\n\n  min-height: 620px;\n\n  overflow: hidden;\n\n  border:\n    1px solid\n    var(--line);\n\n  background:\n    rgba(255,255,255,.02);\n}\n\n\n\/* =========================================================\n   VIDEO SIDE\n========================================================= *\/\n\n.f3e-action__media {\n  position: relative;\n\n  padding:\n    31px;\n\n  display: flex;\n\n  flex-direction: column;\n\n  align-items: center;\n\n  justify-content: center;\n\n  overflow: hidden;\n\n  border-right:\n    1px solid\n    var(--line);\n\n  background:\n    radial-gradient(\n      circle at center,\n      rgba(255,255,255,.055),\n      transparent 67%\n    );\n}\n\n\n\/* decorative vertical title *\/\n\n.f3e-action__media-label {\n  position: absolute;\n\n  top: 24px;\n  left: 24px;\n\n  z-index: 6;\n}\n\n\n.f3e-action__media-label span {\n  display: block;\n\n  margin-bottom: 5px;\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.f3e-action__media-label strong {\n  color: #ffffff;\n\n  font-size: 11px;\n  font-weight: 650;\n}\n\n\n\/* =========================================================\n   PHONE \/ VIDEO FRAME\n========================================================= *\/\n\n.f3e-action__phone {\n  position: relative;\n\n  width:\n    min(\n      315px,\n      88%\n    );\n\n  aspect-ratio:\n    9 \/ 16;\n\n  padding: 8px;\n\n  border:\n    1px solid\n    rgba(255,255,255,.15);\n\n  border-radius: 30px;\n\n  background:\n    #0d1721;\n\n  box-shadow:\n    0 28px 60px\n    rgba(0,0,0,.32);\n}\n\n\n\/* top speaker *\/\n\n.f3e-action__phone::before {\n  content: \"\";\n\n  position: absolute;\n\n  z-index: 8;\n\n  top: 12px;\n  left: 50%;\n\n  width: 54px;\n  height: 4px;\n\n  transform:\n    translateX(-50%);\n\n  border-radius: 999px;\n\n  background:\n    rgba(255,255,255,.20);\n\n  pointer-events: none;\n}\n\n\n.f3e-action__player {\n  position: relative;\n\n  width: 100%;\n  height: 100%;\n\n  overflow: hidden;\n\n  border-radius: 23px;\n\n  background:\n    #000000;\n}\n\n\n.f3e-action__player iframe {\n  display: block;\n\n  width: 100%;\n  height: 100%;\n\n  margin: 0;\n\n  border: 0;\n\n  background:\n    #000000;\n}\n\n\n\/* =========================================================\n   VIDEO SWITCH\n========================================================= *\/\n\n.f3e-action__video-switch {\n  width: 315px;\n  max-width: 88%;\n\n  display: grid;\n\n  grid-template-columns:\n    1fr\n    1fr;\n\n  margin-top: 15px;\n\n  border:\n    1px solid\n    var(--line);\n}\n\n\n.f3e-action__video-btn {\n  min-height: 48px;\n\n  padding:\n    0\n    14px;\n\n  border: 0;\n\n  border-right:\n    1px solid\n    var(--line);\n\n  background:\n    rgba(255,255,255,.025);\n\n  color:\n    rgba(255,255,255,.55);\n\n  font-family: inherit;\n\n  font-size: 9px;\n  font-weight: 700;\n\n  letter-spacing: .7px;\n\n  text-transform: uppercase;\n\n  cursor: pointer;\n\n  transition:\n    background .22s ease,\n    color .22s ease;\n}\n\n\n.f3e-action__video-btn:last-child {\n  border-right: 0;\n}\n\n\n.f3e-action__video-btn:hover,\n.f3e-action__video-btn.is-active {\n  background:\n    var(--orange);\n\n  color:\n    #ffffff;\n}\n\n\n\/* source line *\/\n\n.f3e-action__source {\n  margin-top: 13px;\n\n  color:\n    rgba(255,255,255,.30);\n\n  font-size: 8px;\n\n  text-align: center;\n\n  line-height: 1.5;\n}\n\n\n\/* =========================================================\n   RIGHT CONTENT\n========================================================= *\/\n\n.f3e-action__content {\n  padding:\n    43px\n    40px;\n\n  display: flex;\n\n  flex-direction: column;\n\n  justify-content: center;\n}\n\n\n.f3e-action__section-label {\n  margin-bottom: 10px;\n\n  color:\n    var(--orange);\n\n  font-size: 9px;\n  font-weight: 700;\n\n  letter-spacing: 1.2px;\n\n  text-transform: uppercase;\n}\n\n\n.f3e-action__content h3 {\n  max-width: 580px;\n\n  margin:\n    0\n    0\n    14px;\n\n  color:\n    #ffffff;\n\n  font-size:\n    clamp(\n      30px,\n      3.6vw,\n      43px\n    );\n\n  line-height: 1.05;\n\n  font-weight: 700;\n\n  letter-spacing: -.8px;\n}\n\n\n.f3e-action__description {\n  max-width: 610px;\n\n  margin:\n    0\n    0\n    28px;\n\n  color:\n    rgba(255,255,255,.62);\n\n  font-size: 12px;\n\n  line-height: 1.75;\n}\n\n\n\/* =========================================================\n   USE CASE NAVIGATION\n========================================================= *\/\n\n.f3e-action__tabs {\n  display: grid;\n\n  grid-template-columns:\n    1fr\n    1fr;\n\n  margin-bottom: 27px;\n\n  border:\n    1px solid\n    var(--line);\n}\n\n\n.f3e-action__tab {\n  min-height: 66px;\n\n  padding:\n    0\n    15px;\n\n  display: flex;\n\n  align-items: center;\n\n  gap: 11px;\n\n  border: 0;\n\n  border-right:\n    1px solid\n    var(--line);\n\n  border-bottom:\n    1px solid\n    var(--line);\n\n  background:\n    rgba(255,255,255,.02);\n\n  color:\n    rgba(255,255,255,.55);\n\n  font-family: inherit;\n\n  cursor: pointer;\n\n  text-align: left;\n\n  transition:\n    background .22s ease,\n    color .22s ease;\n}\n\n\n.f3e-action__tab:nth-child(2n) {\n  border-right: 0;\n}\n\n\n.f3e-action__tab:nth-child(3),\n.f3e-action__tab:nth-child(4) {\n  border-bottom: 0;\n}\n\n\n.f3e-action__tab span {\n  color:\n    var(--orange);\n\n  font-size: 8px;\n  font-weight: 700;\n}\n\n\n.f3e-action__tab strong {\n  color: inherit;\n\n  font-size: 10px;\n  font-weight: 650;\n}\n\n\n.f3e-action__tab:hover,\n.f3e-action__tab.is-active {\n  background:\n    rgba(255,255,255,.07);\n\n  color:\n    #ffffff;\n}\n\n\n\/* =========================================================\n   APPLICATION CONTENT\n========================================================= *\/\n\n.f3e-action__use-content {\n  min-height: 180px;\n}\n\n\n.f3e-action__use-content.is-changing {\n  animation:\n    f3eActionFade\n    .32s ease both;\n}\n\n\n.f3e-action__use-title {\n  margin-bottom: 8px;\n\n  color:\n    rgba(255,255,255,.34);\n\n  font-size: 8px;\n  font-weight: 700;\n\n  letter-spacing: 1px;\n\n  text-transform: uppercase;\n}\n\n\n.f3e-action__use-content h4 {\n  margin:\n    0\n    0\n    11px;\n\n  color:\n    #ffffff;\n\n  font-size: 23px;\n  font-weight: 700;\n\n  line-height: 1.15;\n}\n\n\n.f3e-action__use-content p {\n  max-width: 600px;\n\n  margin:\n    0\n    0\n    18px;\n\n  color:\n    rgba(255,255,255,.58);\n\n  font-size: 11px;\n\n  line-height: 1.7;\n}\n\n\n\/* tags *\/\n\n.f3e-action__chips {\n  display: flex;\n\n  flex-wrap: wrap;\n\n  gap: 7px;\n}\n\n\n.f3e-action__chips span {\n  padding:\n    8px\n    10px;\n\n  border:\n    1px solid\n    var(--line);\n\n  color:\n    rgba(255,255,255,.74);\n\n  font-size: 8px;\n  font-weight: 600;\n}\n\n\n\/* =========================================================\n   FOOT NOTE\n========================================================= *\/\n\n.f3e-action__foot {\n  margin-top: 27px;\n\n  padding-top: 17px;\n\n  display: flex;\n\n  gap: 12px;\n\n  align-items: flex-start;\n\n  border-top:\n    1px solid\n    var(--line);\n}\n\n\n.f3e-action__foot::before {\n  content: \"\";\n\n  flex:\n    0 0\n    24px;\n\n  height: 1px;\n\n  margin-top: 7px;\n\n  background:\n    var(--orange);\n}\n\n\n.f3e-action__foot p {\n  margin: 0;\n\n  color:\n    rgba(255,255,255,.34);\n\n  font-size: 8px;\n\n  line-height: 1.6;\n}\n\n\n\/* =========================================================\n   ANIMATION\n========================================================= *\/\n\n@keyframes f3eActionFade {\n\n  from {\n    opacity: .15;\n\n    transform:\n      translateY(7px);\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  .f3e-action {\n    padding:\n      52px\n      22px;\n  }\n\n\n  .f3e-action__head {\n    gap: 38px;\n  }\n\n\n  .f3e-action__experience {\n    grid-template-columns:\n      minmax(330px,.78fr)\n      minmax(0,1.22fr);\n  }\n\n\n  .f3e-action__content {\n    padding:\n      38px\n      30px;\n  }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width: 767px) {\n\n  .f3e-action {\n    padding:\n      45px\n      16px;\n  }\n\n\n  .f3e-action__head {\n    display: block;\n\n    margin-bottom: 22px;\n  }\n\n\n  .f3e-action__eyebrow {\n    font-size: 9px;\n  }\n\n\n  .f3e-action h2 {\n    max-width: 390px;\n\n    margin-bottom: 13px;\n\n    font-size: 35px;\n\n    line-height: 1.06;\n  }\n\n\n  .f3e-action__intro {\n    max-width: none;\n\n    font-size: 12px;\n  }\n\n\n  .f3e-action__experience {\n    display: flex;\n\n    flex-direction: column;\n\n    min-height: 0;\n  }\n\n\n  .f3e-action__media {\n    padding:\n      65px\n      18px\n      28px;\n\n    border-right: 0;\n\n    border-bottom:\n      1px solid\n      var(--line);\n  }\n\n\n  .f3e-action__phone {\n    width:\n      min(\n        285px,\n        88%\n      );\n  }\n\n\n  .f3e-action__video-switch {\n    width: 285px;\n  }\n\n\n  .f3e-action__content {\n    padding:\n      31px\n      21px;\n  }\n\n\n  .f3e-action__content h3 {\n    font-size: 30px;\n  }\n\n}\n\n\n@media (max-width: 390px) {\n\n  .f3e-action h2 {\n    font-size: 32px;\n  }\n\n\n  .f3e-action__tabs {\n    display: block;\n  }\n\n\n  .f3e-action__tab {\n    width: 100%;\n\n    border-right: 0;\n\n    border-bottom:\n      1px solid\n      var(--line) !important;\n  }\n\n\n  .f3e-action__tab:last-child {\n    border-bottom: 0 !important;\n  }\n\n}\n\n\n\/* =========================================================\n   ACCESSIBILITY\n========================================================= *\/\n\n.f3e-action 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  .f3e-action *,\n  .f3e-action *::before,\n  .f3e-action *::after {\n    animation: none !important;\n    transition: none !important;\n  }\n\n}\n\n\/* =========================================================\n   FIX \u2014 REAL-WORLD F3E LABEL ABOVE VIDEO\n========================================================= *\/\n\n#f3e-in-action .f3e-action__media-label {\n  position: static !important;\n\n  width: min(315px, 88%);\n\n  margin:\n    0\n    auto\n    14px;\n\n  align-self: center;\n\n  text-align: left;\n}\n\n#f3e-in-action .f3e-action__media-label span {\n  display: block;\n\n  margin-bottom: 5px;\n}\n\n#f3e-in-action .f3e-action__media-label strong {\n  display: block;\n}\n\n\n\/* Mobile no longer needs extra top space *\/\n@media (max-width: 767px) {\n\n  #f3e-in-action .f3e-action__media {\n    padding:\n      28px\n      18px;\n  }\n\n}\n<\/style>\n\n\n<section class=\"f3e-action\" id=\"f3e-in-action\">\n\n\n  <div class=\"f3e-action__inner\">\n\n\n    <!-- =====================================================\n         HEADER\n    ====================================================== -->\n\n    <div class=\"f3e-action__head\">\n\n\n      <div>\n\n        <div class=\"f3e-action__eyebrow\">\n          F3E In Action\n        <\/div>\n\n\n        <h2>\n          Built for the Work\n          <span>Businesses Do Every Day.<\/span>\n        <\/h2>\n\n      <\/div>\n\n\n      <p class=\"f3e-action__intro\">\n        See the Farizon F3E beyond the specification sheet \u2014\n        supporting delivery, logistics, trade, contractor and\n        fleet operations in real commercial environments.\n      <\/p>\n\n\n    <\/div>\n\n\n\n    <!-- =====================================================\n         EXPERIENCE\n    ====================================================== -->\n\n    <div class=\"f3e-action__experience\">\n\n\n      <!-- ===================================================\n           VIDEO\n      ==================================================== -->\n\n      <div class=\"f3e-action__media\">\n\n\n        <div class=\"f3e-action__media-label\">\n\n          <span>\n            Real-World F3E\n          <\/span>\n\n          <strong>\n            Hong Seh Evolution\n          <\/strong>\n\n        <\/div>\n\n\n\n        <div class=\"f3e-action__phone\">\n\n\n          <div class=\"f3e-action__player\">\n\n\n            <iframe id=\"f3e-tiktok-player\" src=\"https:\/\/www.tiktok.com\/player\/v1\/7655652158653844756?controls=1&amp;autoplay=0&amp;music_info=0&amp;description=0&amp;rel=0\" title=\"Farizon F3E commercial vehicle video\" loading=\"lazy\" allow=\"fullscreen\" referrerpolicy=\"strict-origin-when-cross-origin\">\n            <\/iframe>\n\n\n          <\/div>\n\n\n        <\/div>\n\n\n\n        <!-- VIDEO SWITCH -->\n\n        <div class=\"f3e-action__video-switch\">\n\n\n          <button class=\"f3e-action__video-btn is-active\" type=\"button\" data-f3e-video=\"7655652158653844756\">\n\n            F3E Video 01\n\n          <\/button>\n\n\n          <button class=\"f3e-action__video-btn\" type=\"button\" data-f3e-video=\"7663009229531286802\">\n\n            F3E Video 02\n\n          <\/button>\n\n\n        <\/div>\n\n\n        <div class=\"f3e-action__source\">\n          Real-world F3E content from Hong Seh Evolution.\n        <\/div>\n\n\n      <\/div>\n\n\n\n      <!-- ===================================================\n           BUSINESS APPLICATIONS\n      ==================================================== -->\n\n      <div class=\"f3e-action__content\">\n\n\n        <div class=\"f3e-action__section-label\">\n          Business Applications\n        <\/div>\n\n\n        <h3>\n          One Commercial Platform.\n          Different Ways to Work.\n        <\/h3>\n\n\n        <p class=\"f3e-action__description\">\n          Different businesses use commercial vehicles in\n          different ways. Explore where the F3E can fit into\n          everyday operating requirements.\n        <\/p>\n\n\n\n        <!-- TABS -->\n\n        <div class=\"f3e-action__tabs\">\n\n\n          <button class=\"f3e-action__tab is-active\" type=\"button\" data-f3e-use=\"logistics\">\n\n            <span>01<\/span>\n\n            <strong>\n              Logistics &amp; Distribution\n            <\/strong>\n\n          <\/button>\n\n\n          <button class=\"f3e-action__tab\" type=\"button\" data-f3e-use=\"delivery\">\n\n            <span>02<\/span>\n\n            <strong>\n              Delivery &amp; Trade\n            <\/strong>\n\n          <\/button>\n\n\n          <button class=\"f3e-action__tab\" type=\"button\" data-f3e-use=\"contractor\">\n\n            <span>03<\/span>\n\n            <strong>\n              Contractor &amp; Equipment\n            <\/strong>\n\n          <\/button>\n\n\n          <button class=\"f3e-action__tab\" type=\"button\" data-f3e-use=\"fleet\">\n\n            <span>04<\/span>\n\n            <strong>\n              Fleet Operations\n            <\/strong>\n\n          <\/button>\n\n\n        <\/div>\n\n\n\n        <!-- DYNAMIC CONTENT -->\n\n        <div class=\"f3e-action__use-content\" id=\"f3e-action-use-content\">\n\n\n          <div class=\"f3e-action__use-title\">\n            Application\n          <\/div>\n\n\n          <h4 id=\"f3e-action-title\">\n            Logistics &amp; Distribution\n          <\/h4>\n\n\n          <p id=\"f3e-action-description\">\n            Support everyday cargo movement between warehouses,\n            businesses and customers with an electric commercial\n            truck configurable around different distribution needs.\n          <\/p>\n\n\n          <div class=\"f3e-action__chips\" id=\"f3e-action-chips\">\n\n            <span>Distribution<\/span>\n\n            <span>General Cargo<\/span>\n\n            <span>Business Delivery<\/span>\n\n          <\/div>\n\n\n        <\/div>\n\n\n\n        <div class=\"f3e-action__foot\">\n\n          <p>\n            Body configuration and final vehicle setup can be\n            selected according to individual business and\n            operational requirements.\n          <\/p>\n\n        <\/div>\n\n\n      <\/div>\n\n\n    <\/div>\n\n\n  <\/div>\n\n<\/section>\n\n\n<script>\n(function () {\n\n  const section =\n    document.querySelector(\n      \".f3e-action\"\n    );\n\n\n  if (!section) {\n    return;\n  }\n\n\n  \/* =========================================================\n     VIDEO SWITCHER\n  ========================================================= *\/\n\n  const player =\n    document.getElementById(\n      \"f3e-tiktok-player\"\n    );\n\n\n  const videoButtons =\n    section.querySelectorAll(\n      \"[data-f3e-video]\"\n    );\n\n\n  videoButtons.forEach(\n    function (button) {\n\n\n      button.addEventListener(\n        \"click\",\n        function () {\n\n\n          const videoID =\n            button.getAttribute(\n              \"data-f3e-video\"\n            );\n\n\n          if (!videoID) {\n            return;\n          }\n\n\n          videoButtons.forEach(\n            function (item) {\n\n              item.classList.remove(\n                \"is-active\"\n              );\n\n            }\n          );\n\n\n          button.classList.add(\n            \"is-active\"\n          );\n\n\n          \/*\n             Reload only ONE TikTok player.\n             This avoids loading two embeds simultaneously.\n          *\/\n\n          player.src =\n            \"https:\/\/www.tiktok.com\/player\/v1\/\" +\n            videoID +\n            \"?controls=1&autoplay=0&music_info=0&description=0&rel=0\";\n\n\n        }\n      );\n\n\n    }\n  );\n\n\n\n  \/* =========================================================\n     BUSINESS APPLICATIONS\n  ========================================================= *\/\n\n  const useButtons =\n    section.querySelectorAll(\n      \"[data-f3e-use]\"\n    );\n\n\n  const useContent =\n    document.getElementById(\n      \"f3e-action-use-content\"\n    );\n\n\n  const title =\n    document.getElementById(\n      \"f3e-action-title\"\n    );\n\n\n  const description =\n    document.getElementById(\n      \"f3e-action-description\"\n    );\n\n\n  const chips =\n    document.getElementById(\n      \"f3e-action-chips\"\n    );\n\n\n  const data = {\n\n\n    logistics: {\n\n      title:\n        \"Logistics & Distribution\",\n\n      description:\n        \"Support everyday cargo movement between warehouses, businesses and customers with an electric commercial truck configurable around different distribution needs.\",\n\n      chips:\n        [\n          \"Distribution\",\n          \"General Cargo\",\n          \"Business Delivery\"\n        ]\n\n    },\n\n\n    delivery: {\n\n      title:\n        \"Delivery & Trade\",\n\n      description:\n        \"A practical commercial platform for local delivery, supplier movement and trade businesses handling regular goods transport across Singapore.\",\n\n      chips:\n        [\n          \"Local Delivery\",\n          \"Trade\",\n          \"Commercial Transport\"\n        ]\n\n    },\n\n\n    contractor: {\n\n      title:\n        \"Contractor & Equipment\",\n\n      description:\n        \"Configure the F3E to support the movement of tools, equipment, materials and other operational cargo required by contractor and service businesses.\",\n\n      chips:\n        [\n          \"Tools\",\n          \"Equipment\",\n          \"Project Support\"\n        ]\n\n    },\n\n\n    fleet: {\n\n      title:\n        \"Fleet Operations\",\n\n      description:\n        \"Integrate the F3E into commercial fleets carrying out recurring transport, delivery and operational duties across different business environments.\",\n\n      chips:\n        [\n          \"Fleet Use\",\n          \"Business Mobility\",\n          \"Commercial EV\"\n        ]\n\n    }\n\n  };\n\n\n  function renderChips(items) {\n\n    chips.innerHTML = \"\";\n\n\n    items.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  useButtons.forEach(\n    function (button) {\n\n\n      button.addEventListener(\n        \"click\",\n        function () {\n\n\n          const key =\n            button.getAttribute(\n              \"data-f3e-use\"\n            );\n\n\n          const selected =\n            data[key];\n\n\n          if (!selected) {\n            return;\n          }\n\n\n          useButtons.forEach(\n            function (item) {\n\n              item.classList.remove(\n                \"is-active\"\n              );\n\n            }\n          );\n\n\n          button.classList.add(\n            \"is-active\"\n          );\n\n\n          useContent.classList.remove(\n            \"is-changing\"\n          );\n\n\n          void useContent.offsetWidth;\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          useContent.classList.add(\n            \"is-changing\"\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 F3E\n   FINAL SECTION \u2014 STABLE VERSION\n   OWNERSHIP + DIRECT ENQUIRY\n========================================================= *\/\n\n.f3e-final,\n.f3e-final *,\n.f3e-final *::before,\n.f3e-final *::after {\n  box-sizing: border-box;\n}\n\n.f3e-final {\n  --orange: #ff6433;\n  --navy: #263648;\n  --deep: #182938;\n  --text: #5d6672;\n  --muted: #89939e;\n  --line: #e3e7eb;\n  --white: #ffffff;\n  --light: #f5f6f8;\n\n  position: relative;\n\n  width: 100%;\n\n  margin: 0 !important;\n\n  padding:\n    60px\n    24px\n    64px;\n\n  overflow: hidden;\n\n  background:\n    linear-gradient(\n      180deg,\n      #f5f6f8 0%,\n      #ffffff 100%\n    );\n\n  font-family:\n    Inter,\n    Arial,\n    sans-serif;\n}\n\n\n\/* =========================================================\n   DECORATION\n========================================================= *\/\n\n.f3e-final::before {\n  content: \"\";\n\n  position: absolute;\n\n  width: 500px;\n  height: 500px;\n\n  left: -260px;\n  bottom: -170px;\n\n  border-radius: 50%;\n\n  background:\n    radial-gradient(\n      circle,\n      rgba(255,100,51,.08),\n      transparent 70%\n    );\n\n  pointer-events: none;\n}\n\n\n.f3e-final__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.f3e-final__head {\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.f3e-final__eyebrow {\n  display: flex;\n\n  align-items: center;\n\n  gap: 11px;\n\n  margin-bottom: 13px;\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.f3e-final__eyebrow::before {\n  content: \"\";\n\n  width: 30px;\n  height: 2px;\n\n  background:\n    var(--orange);\n}\n\n\n.f3e-final h2 {\n  max-width: 760px;\n\n  margin: 0;\n\n  color:\n    var(--navy);\n\n  font-size:\n    clamp(\n      39px,\n      4.2vw,\n      54px\n    );\n\n  font-weight: 700;\n\n  line-height: 1.03;\n\n  letter-spacing: -1.4px;\n}\n\n\n.f3e-final h2 span {\n  display: block;\n\n  color:\n    var(--orange);\n}\n\n\n.f3e-final__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.72;\n}\n\n\n\/* =========================================================\n   MAIN GRID\n========================================================= *\/\n\n.f3e-final__grid {\n  display: grid;\n\n  grid-template-columns:\n    minmax(0,.82fr)\n    minmax(470px,1.18fr);\n\n  gap: 18px;\n\n  align-items: stretch;\n}\n\n\n\/* =========================================================\n   OWNERSHIP PANEL\n========================================================= *\/\n\n.f3e-final__confidence {\n  position: relative;\n\n  min-width: 0;\n\n  padding:\n    43px\n    36px;\n\n  overflow: hidden;\n\n  background:\n    linear-gradient(\n      145deg,\n      #263648 0%,\n      #192938 100%\n    );\n\n  color:\n    #ffffff;\n}\n\n\n.f3e-final__confidence::before {\n  content: \"\";\n\n  position: absolute;\n\n  inset: 0;\n\n  opacity: .24;\n\n  pointer-events: none;\n\n  background-image:\n    linear-gradient(\n      rgba(255,255,255,.035) 1px,\n      transparent 1px\n    ),\n    linear-gradient(\n      90deg,\n      rgba(255,255,255,.035) 1px,\n      transparent 1px\n    );\n\n  background-size:\n    48px 48px;\n}\n\n\n.f3e-final__confidence::after {\n  content: \"\";\n\n  position: absolute;\n\n  width: 360px;\n  height: 360px;\n\n  right: -175px;\n  bottom: -180px;\n\n  border-radius: 50%;\n\n  background:\n    radial-gradient(\n      circle,\n      rgba(255,100,51,.18),\n      transparent 69%\n    );\n\n  pointer-events: none;\n}\n\n\n.f3e-final__confidence-inner {\n  position: relative;\n\n  z-index: 2;\n\n  min-height: 100%;\n\n  display: flex;\n\n  flex-direction: column;\n}\n\n\n\/* =========================================================\n   CONFIDENCE INTRO\n========================================================= *\/\n\n.f3e-final__small-label {\n  margin-bottom: 11px;\n\n  color:\n    var(--orange);\n\n  font-size: 9px;\n  font-weight: 700;\n\n  letter-spacing: 1.2px;\n\n  text-transform: uppercase;\n}\n\n\n.f3e-final__confidence h3 {\n  max-width: 450px;\n\n  margin:\n    0\n    0\n    15px;\n\n  color:\n    #ffffff;\n\n  font-size:\n    clamp(\n      29px,\n      3.2vw,\n      39px\n    );\n\n  font-weight: 700;\n\n  line-height: 1.08;\n\n  letter-spacing: -.8px;\n}\n\n\n.f3e-final__confidence-copy {\n  max-width: 455px;\n\n  margin:\n    0\n    0\n    30px;\n\n  color:\n    rgba(255,255,255,.62);\n\n  font-size: 12px;\n\n  line-height: 1.72;\n}\n\n\n\/* =========================================================\n   WARRANTIES\n========================================================= *\/\n\n.f3e-final__warranties {\n  border-top:\n    1px solid\n    rgba(255,255,255,.12);\n}\n\n\n.f3e-final__warranty {\n  display: grid;\n\n  grid-template-columns:\n    112px\n    1fr;\n\n  gap: 20px;\n\n  align-items: center;\n\n  min-height: 118px;\n\n  padding:\n    20px\n    0;\n\n  border-bottom:\n    1px solid\n    rgba(255,255,255,.12);\n}\n\n\n.f3e-final__number {\n  display: flex;\n\n  align-items: flex-end;\n\n  gap: 5px;\n}\n\n\n.f3e-final__number strong {\n  color:\n    #ffffff;\n\n  font-size: 46px;\n  font-weight: 700;\n\n  line-height: .9;\n\n  letter-spacing: -1.4px;\n}\n\n\n.f3e-final__number span {\n  padding-bottom: 4px;\n\n  color:\n    var(--orange);\n\n  font-size: 10px;\n  font-weight: 700;\n\n  text-transform: uppercase;\n}\n\n\n.f3e-final__warranty-copy span {\n  display: block;\n\n  margin-bottom: 5px;\n\n  color:\n    rgba(255,255,255,.34);\n\n  font-size: 8px;\n  font-weight: 700;\n\n  letter-spacing: 1px;\n\n  text-transform: uppercase;\n}\n\n\n.f3e-final__warranty-copy strong {\n  display: block;\n\n  margin-bottom: 5px;\n\n  color:\n    #ffffff;\n\n  font-size: 14px;\n  font-weight: 650;\n}\n\n\n.f3e-final__warranty-copy small {\n  display: block;\n\n  color:\n    rgba(255,255,255,.47);\n\n  font-size: 9px;\n\n  line-height: 1.55;\n}\n\n\n\/* =========================================================\n   LOCAL SUPPORT\n========================================================= *\/\n\n.f3e-final__support {\n  margin-top: 26px;\n\n  display: grid;\n\n  grid-template-columns:\n    38px\n    1fr;\n\n  gap: 14px;\n\n  align-items: start;\n}\n\n\n.f3e-final__support-icon {\n  width: 38px;\n  height: 38px;\n\n  display: flex;\n\n  align-items: center;\n  justify-content: center;\n\n  border:\n    1px solid\n    rgba(255,255,255,.14);\n\n  color:\n    var(--orange);\n}\n\n\n.f3e-final__support-icon svg {\n  width: 17px;\n  height: 17px;\n\n  stroke: currentColor;\n\n  fill: none;\n\n  stroke-width: 1.8;\n}\n\n\n.f3e-final__support-copy span {\n  display: block;\n\n  margin-bottom: 5px;\n\n  color:\n    rgba(255,255,255,.34);\n\n  font-size: 8px;\n  font-weight: 700;\n\n  letter-spacing: 1px;\n\n  text-transform: uppercase;\n}\n\n\n.f3e-final__support-copy strong {\n  display: block;\n\n  margin-bottom: 6px;\n\n  color:\n    #ffffff;\n\n  font-size: 14px;\n  font-weight: 650;\n}\n\n\n.f3e-final__support-copy p {\n  max-width: 390px;\n\n  margin: 0;\n\n  color:\n    rgba(255,255,255,.47);\n\n  font-size: 9px;\n\n  line-height: 1.6;\n}\n\n\n\/* =========================================================\n   ENQUIRY TYPES\n========================================================= *\/\n\n.f3e-final__enquiry-types {\n  margin-top: auto;\n\n  padding-top: 34px;\n}\n\n\n.f3e-final__enquiry-types-label {\n  display: block;\n\n  margin-bottom: 10px;\n\n  color:\n    rgba(255,255,255,.30);\n\n  font-size: 8px;\n  font-weight: 700;\n\n  letter-spacing: 1px;\n\n  text-transform: uppercase;\n}\n\n\n.f3e-final__chips {\n  display: flex;\n\n  flex-wrap: wrap;\n\n  gap: 7px;\n}\n\n\n.f3e-final__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,.03);\n\n  color:\n    rgba(255,255,255,.73);\n\n  font-size: 8px;\n  font-weight: 600;\n}\n\n\n\/* =========================================================\n   FORM PANEL\n========================================================= *\/\n\n.f3e-final__form {\n  position: relative;\n\n  min-width: 0;\n\n  padding:\n    36px\n    36px\n    26px;\n\n  overflow: visible;\n\n  border:\n    1px solid\n    var(--line);\n\n  background:\n    #ffffff;\n\n  box-shadow:\n    0 18px 48px\n    rgba(31,48,65,.07);\n}\n\n\n.f3e-final__form-label {\n  margin-bottom: 8px;\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.f3e-final__form h3 {\n  max-width: 610px;\n\n  margin:\n    0\n    0\n    13px;\n\n  color:\n    var(--navy);\n\n  font-size: 29px;\n  font-weight: 700;\n\n  line-height: 1.12;\n\n  letter-spacing: -.6px;\n}\n\n\n.f3e-final__form-desc {\n  max-width: 650px;\n\n  margin:\n    0\n    0\n    19px;\n\n  color:\n    var(--text);\n\n  font-size: 11px;\n\n  line-height: 1.7;\n}\n\n\n.f3e-final__divider {\n  width: 100%;\n  height: 1px;\n\n  margin-bottom: 8px;\n\n  background:\n    var(--line);\n}\n\n\n\/* =========================================================\n   FORM\n========================================================= *\/\n\n.f3e-final__form-frame {\n  position: relative;\n\n  width: 100%;\n\n  overflow: visible;\n\n  background:\n    #ffffff;\n}\n\n\n.f3e-final__form-frame iframe {\n  display: block;\n\n  width: 100%;\n\n  \/*\n    Enough room for the whole Peppercloud form.\n    No inner scrollbar.\n  *\/\n\n  height: 780px;\n\n  margin: 0;\n\n  padding: 0;\n\n  border: 0;\n\n  overflow: hidden;\n\n  background:\n    #ffffff;\n}\n\n\n\/* =========================================================\n   TRUST LINE\n========================================================= *\/\n\n.f3e-final__trust {\n  display: flex;\n\n  align-items: center;\n\n  gap: 10px;\n\n  margin-top: 5px;\n\n  color:\n    var(--muted);\n\n  font-size: 8px;\n}\n\n\n.f3e-final__trust::before {\n  content: \"\";\n\n  width: 24px;\n  height: 1px;\n\n  flex: 0 0 24px;\n\n  background:\n    var(--orange);\n}\n\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width: 1024px) {\n\n  .f3e-final {\n    padding:\n      54px\n      22px\n      60px;\n  }\n\n\n  .f3e-final__head {\n    gap: 38px;\n  }\n\n\n  .f3e-final__grid {\n    grid-template-columns:\n      minmax(310px,.82fr)\n      minmax(420px,1.18fr);\n  }\n\n\n  .f3e-final__confidence {\n    padding:\n      36px\n      28px;\n  }\n\n\n  .f3e-final__form {\n    padding:\n      32px\n      27px\n      24px;\n  }\n\n\n  .f3e-final__form-frame iframe {\n    height: 810px;\n  }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width: 767px) {\n\n  .f3e-final {\n    padding:\n      44px\n      16px\n      50px;\n  }\n\n\n  .f3e-final__head {\n    display: block;\n\n    margin-bottom: 22px;\n  }\n\n\n  .f3e-final__eyebrow {\n    font-size: 9px;\n\n    margin-bottom: 10px;\n  }\n\n\n  .f3e-final h2 {\n    max-width: 390px;\n\n    margin-bottom: 13px;\n\n    font-size: 35px;\n\n    line-height: 1.06;\n\n    letter-spacing: -.9px;\n  }\n\n\n  .f3e-final__intro {\n    max-width: none;\n\n    font-size: 12px;\n  }\n\n\n  .f3e-final__grid {\n    display: block;\n  }\n\n\n  .f3e-final__confidence {\n    padding:\n      31px\n      21px;\n\n    margin-bottom: 12px;\n  }\n\n\n  .f3e-final__confidence h3 {\n    font-size: 29px;\n  }\n\n\n  .f3e-final__warranty {\n    grid-template-columns:\n      96px\n      1fr;\n\n    min-height: 108px;\n  }\n\n\n  .f3e-final__number strong {\n    font-size: 40px;\n  }\n\n\n  .f3e-final__enquiry-types {\n    margin-top: 30px;\n  }\n\n\n  .f3e-final__form {\n    padding:\n      27px\n      17px\n      20px;\n  }\n\n\n  .f3e-final__form h3 {\n    font-size: 25px;\n  }\n\n\n  \/*\n    Peppercloud form becomes taller on mobile\n    because text and privacy content wrap.\n  *\/\n\n  .f3e-final__form-frame iframe {\n    height: 920px;\n  }\n\n}\n\n\n@media (max-width: 390px) {\n\n  .f3e-final h2 {\n    font-size: 32px;\n  }\n\n\n  .f3e-final__warranty {\n    grid-template-columns:\n      82px\n      1fr;\n  }\n\n\n  .f3e-final__number strong {\n    font-size: 36px;\n  }\n\n\n  .f3e-final__number span {\n    font-size: 9px;\n  }\n\n\n  .f3e-final__form-frame iframe {\n    height: 960px;\n  }\n\n}\n<\/style>\n\n\n<section\n  class=\"f3e-final\"\n  id=\"f3e-enquiry\">\n\n\n  <div class=\"f3e-final__inner\">\n\n\n    <!-- =====================================================\n         SECTION HEADER\n    ====================================================== -->\n\n    <div class=\"f3e-final__head\">\n\n\n      <div>\n\n        <div class=\"f3e-final__eyebrow\">\n          Ownership Confidence\n        <\/div>\n\n\n        <h2>\n          Built for Business.\n          <span>Supported for the Journey Ahead.<\/span>\n        <\/h2>\n\n      <\/div>\n\n\n      <p class=\"f3e-final__intro\">\n        From vehicle selection and body configuration to\n        ownership support, speak directly with the Farizon\n        Singapore team about the F3E that fits your operation.\n      <\/p>\n\n\n    <\/div>\n\n\n\n    <!-- =====================================================\n         MAIN CONTENT\n    ====================================================== -->\n\n    <div class=\"f3e-final__grid\">\n\n\n      <!-- ===================================================\n           LEFT \u2014 OWNERSHIP\n      ==================================================== -->\n\n      <div class=\"f3e-final__confidence\">\n\n\n        <div class=\"f3e-final__confidence-inner\">\n\n\n          <div class=\"f3e-final__small-label\">\n            F3E Ownership\n          <\/div>\n\n\n          <h3>\n            Confidence Beyond the Working Day.\n          <\/h3>\n\n\n          <p class=\"f3e-final__confidence-copy\">\n            Commercial vehicles need more than capability\n            on the road. The F3E is backed by warranty\n            coverage and local support through Hong Seh\n            Motors in Singapore.\n          <\/p>\n\n\n\n          <!-- BATTERY WARRANTY -->\n\n          <div class=\"f3e-final__warranties\">\n\n\n            <div class=\"f3e-final__warranty\">\n\n\n              <div class=\"f3e-final__number\">\n\n                <strong>\n                  8\n                <\/strong>\n\n                <span>\n                  Years\n                <\/span>\n\n              <\/div>\n\n\n              <div class=\"f3e-final__warranty-copy\">\n\n                <span>\n                  Battery Warranty\n                <\/span>\n\n                <strong>\n                  8 Years \/ 400,000km\n                <\/strong>\n\n                <small>\n                  Battery warranty coverage supporting\n                  long-term commercial ownership confidence.\n                <\/small>\n\n              <\/div>\n\n\n            <\/div>\n\n\n\n            <!-- MOTOR \/ VEHICLE -->\n\n            <div class=\"f3e-final__warranty\">\n\n\n              <div class=\"f3e-final__number\">\n\n                <strong>\n                  5\n                <\/strong>\n\n                <span>\n                  Years\n                <\/span>\n\n              <\/div>\n\n\n              <div class=\"f3e-final__warranty-copy\">\n\n                <span>\n                  Motor &amp; Vehicle Warranty\n                <\/span>\n\n                <strong>\n                  5 Years \/ 200,000km\n                <\/strong>\n\n                <small>\n                  Warranty coverage for the motor and\n                  vehicle for commercial ownership.\n                <\/small>\n\n              <\/div>\n\n\n            <\/div>\n\n\n          <\/div>\n\n\n\n          <!-- LOCAL SUPPORT -->\n\n          <div class=\"f3e-final__support\">\n\n\n            <div class=\"f3e-final__support-icon\">\n\n\n              <svg\n                viewBox=\"0 0 24 24\"\n                aria-hidden=\"true\">\n\n                <path d=\"M4 19h16\"><\/path>\n\n                <path d=\"M6 19V8l6-4 6 4v11\"><\/path>\n\n                <path d=\"M9 19v-5h6v5\"><\/path>\n\n              <\/svg>\n\n\n            <\/div>\n\n\n            <div class=\"f3e-final__support-copy\">\n\n              <span>\n                Local Support\n              <\/span>\n\n\n              <strong>\n                Supported by Hong Seh Motors\n              <\/strong>\n\n\n              <p>\n                Speak with the local team for vehicle\n                enquiries, commercial requirements and\n                ownership support in Singapore.\n              <\/p>\n\n            <\/div>\n\n\n          <\/div>\n\n\n\n          <!-- ENQUIRY OPTIONS -->\n\n          <div class=\"f3e-final__enquiry-types\">\n\n\n            <span class=\"f3e-final__enquiry-types-label\">\n              Talk to us about\n            <\/span>\n\n\n            <div class=\"f3e-final__chips\">\n\n              <span>\n                Test Drive\n              <\/span>\n\n              <span>\n                Quotation\n              <\/span>\n\n              <span>\n                12ft \/ 14ft\n              <\/span>\n\n              <span>\n                Body Configuration\n              <\/span>\n\n              <span>\n                Fleet Enquiry\n              <\/span>\n\n            <\/div>\n\n\n          <\/div>\n\n\n        <\/div>\n\n\n      <\/div>\n\n\n\n      <!-- ===================================================\n           RIGHT \u2014 ENQUIRY\n      ==================================================== -->\n\n      <div class=\"f3e-final__form\">\n\n\n        <div class=\"f3e-final__form-label\">\n          Direct Enquiry\n        <\/div>\n\n\n        <h3>\n          Talk to Us About the Farizon F3E.\n        <\/h3>\n\n\n        <p class=\"f3e-final__form-desc\">\n          Tell us what your business needs. Our team can\n          assist with test drive arrangements, quotations,\n          deck length, body configuration and fleet enquiries.\n        <\/p>\n\n\n        <div class=\"f3e-final__divider\"><\/div>\n\n\n\n        <!-- ===============================================\n             PEPPERCLOUD FORM\n        ================================================ -->\n\n        <div class=\"f3e-final__form-frame\">\n\n\n          <iframe\n            id=\"f3e-pc-iframe\"\n            src=\"https:\/\/app.peppercloud.com\/form\/4f15ac08-228d-46d1-8691-0d21e8ecd7df\/embed\"\n            title=\"Farizon F3E enquiry form\"\n            scrolling=\"no\">\n          <\/iframe>\n\n\n        <\/div>\n\n\n\n        <div class=\"f3e-final__trust\">\n          Enquire directly with Farizon Singapore.\n        <\/div>\n\n\n      <\/div>\n\n\n    <\/div>\n\n\n  <\/div>\n\n<\/section>\n\n\n<script>\n(function () {\n\n  \/*\n   * Keep only the Peppercloud parent-info integration.\n   * No reveal animation.\n   * No experimental iframe resizing.\n   * Therefore the section remains visible even if JS is delayed.\n   *\/\n\n  const iframe =\n    document.getElementById(\n      \"f3e-pc-iframe\"\n    );\n\n\n  if (!iframe) {\n    return;\n  }\n\n\n  function sendParentInfo() {\n\n    try {\n\n      iframe.contentWindow.postMessage(\n        {\n          type:\n            \"pc-parent-info\",\n\n          url:\n            window.location.href,\n\n          title:\n            document.title\n        },\n        \"*\"\n      );\n\n    } catch (error) {\n\n      \/* no action required *\/\n\n    }\n\n  }\n\n\n  iframe.addEventListener(\n    \"load\",\n    sendParentInfo\n  );\n\n\n  window.addEventListener(\n    \"message\",\n    function (event) {\n\n      if (\n        event &&\n        event.data &&\n        (\n          event.data.type ===\n          \"pc-request-parent-info\"\n          ||\n          event.data ===\n          \"pc-request-parent-info\"\n        )\n      ) {\n\n        sendParentInfo();\n\n      }\n\n    }\n  );\n\n})();\n<\/script>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Farizon F3E Singapore Farizon F3E Electric Truck Built for Singapore Business. A practical electric commercial truck designed for logistics, delivery, trade and contractor operations in Singapore, with flexible deck configurations built around the way businesses work. Logistics Delivery Trade Contractor Fleet Book a Test Drive \u2192 Explore the F3E \u2193 Flexible electric commercial mobility for [&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-452","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 F3E Singapore Farizon F3E Electric Truck Built for Singapore Business. A practical electric commercial truck designed for logistics, delivery, trade and contractor operations in Singapore, with flexible deck configurations built around the way businesses work. Logistics Delivery Trade Contractor Fleet Book a Test Drive \u2192 Explore the F3E \u2193 Flexible electric commercial mobility for&hellip;","_links":{"self":[{"href":"https:\/\/farizon.com.sg\/index.php?rest_route=\/wp\/v2\/pages\/452","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=452"}],"version-history":[{"count":19,"href":"https:\/\/farizon.com.sg\/index.php?rest_route=\/wp\/v2\/pages\/452\/revisions"}],"predecessor-version":[{"id":494,"href":"https:\/\/farizon.com.sg\/index.php?rest_route=\/wp\/v2\/pages\/452\/revisions\/494"}],"wp:attachment":[{"href":"https:\/\/farizon.com.sg\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=452"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}