{"id":6,"date":"2026-08-01T13:01:17","date_gmt":"2026-08-01T13:01:17","guid":{"rendered":"https:\/\/staging.teoribranding.com\/?page_id=6"},"modified":"2026-08-01T13:01:25","modified_gmt":"2026-08-01T13:01:25","slug":"6-2","status":"publish","type":"page","link":"https:\/\/staging.teoribranding.com\/","title":{"rendered":"Home"},"content":{"rendered":"\n<div id=\"tb-master-layout\">\n  <style>\n    \/* 1. VARIABEL CSS GLOBAL *\/\n    #tb-master-layout {\n      --bg-light: #f3f9fd;\n      --primary-navy: #1d2c77;\n      --primary-blue: #2a46d3;\n      --accent-yellow: #fcec2a;\n      --accent-green: #299354;\n      --accent-lime: #a7ce3c;\n      --text-body: rgba(29, 44, 119, 0.75);\n      --hairline: rgba(29, 44, 119, 0.15);\n      --section-padding: 160px 6%;\n      --transition-elegant: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);\n\n      font-family: \"Poppins\", sans-serif !important;\n      background-color: var(--bg-light) !important;\n      color: var(--primary-navy);\n      line-height: 1.6;\n      overflow-x: hidden;\n      -webkit-font-smoothing: antialiased;\n    }\n\n    \/* 2. ATURAN TIPOGRAFI GLOBAL *\/\n    #tb-master-layout h1 {\n      font-family: \"Poppins\", sans-serif !important;\n      font-size: clamp(4rem, 9vw, 9rem) !important;\n      font-weight: 500 !important;\n      line-height: 0.95 !important;\n      letter-spacing: -0.05em !important;\n      color: var(--primary-navy) !important;\n      margin-bottom: 0 !important;\n      text-transform: none !important;\n      position: relative;\n      z-index: 2;\n    }\n\n    #tb-master-layout h2 {\n      font-family: \"Poppins\", sans-serif !important;\n      font-size: clamp(2.8rem, 5.5vw, 5rem) !important;\n      font-weight: 500 !important;\n      line-height: 1.02 !important;\n      letter-spacing: -0.03em !important;\n      color: var(--primary-navy) !important;\n      margin-bottom: 32px !important;\n      position: relative;\n      z-index: 2;\n    }\n\n    #tb-master-layout .label-micro {\n      font-family: \"Poppins\", sans-serif !important;\n      font-size: 0.75rem !important;\n      font-weight: 600 !important;\n      text-transform: uppercase !important;\n      letter-spacing: 0.15em !important;\n      color: var(--primary-navy) !important;\n      opacity: 0.5;\n      display: inline-flex;\n      align-items: center;\n      margin-bottom: 24px;\n    }\n\n    #tb-master-layout .label-micro::before {\n      content: \"\";\n      display: inline-block;\n      width: 6px;\n      height: 6px;\n      background-color: var(--accent-green);\n      border-radius: 50%;\n      margin-right: 8px;\n    }\n    \n    #tb-master-layout .label-micro.no-dot::before {\n        display: none;\n    }\n\n    #tb-master-layout p.body-editorial {\n      font-family: \"Poppins\", sans-serif !important;\n      font-size: clamp(1.125rem, 2vw, 1.35rem) !important;\n      font-weight: 400 !important;\n      line-height: 1.65 !important;\n      color: var(--text-body) !important;\n      margin-bottom: 32px !important;\n      position: relative;\n      z-index: 2;\n    }\n\n    \/* TEKS WARNA LIME AKSEN MURNI TANPA GARIS BAWAH KUNO *\/\n    #tb-master-layout .text-strike-accent {\n      color: var(--accent-lime) !important;\n      display: inline-block;\n      position: relative;\n      z-index: 1;\n    }\n\n    \/* 3. LAYOUT & GRID SYSTEM (100% FLUID FULL WIDTH) *\/\n    #tb-master-layout section {\n      padding: var(--section-padding);\n      width: 100% !important;\n      max-width: 100% !important;\n      margin: 0 auto;\n      border-bottom: 1px solid var(--hairline);\n      background-color: transparent;\n      position: relative;\n    }\n\n    #tb-master-layout section:last-of-type {\n      border-bottom: none;\n    }\n\n    #tb-master-layout .grid-12 {\n      display: grid;\n      grid-template-columns: repeat(12, 1fr);\n      gap: 32px;\n      width: 100% !important;\n      max-width: 100% !important;\n      position: relative;\n      z-index: 2;\n    }\n\n    \/* HERO: PURE TYPOGRAPHY *\/\n    #tb-master-layout .hero-typo-wrapper {\n        padding-top: 12vh;\n        padding-bottom: 8vh;\n        grid-column: span 12;\n    }\n\n    #tb-master-layout .hero-typo-bottom {\n        grid-column: span 12;\n        display: grid;\n        grid-template-columns: repeat(12, 1fr);\n        gap: 32px;\n        padding-top: 40px;\n        border-top: 1px solid var(--hairline);\n    }\n    \n    #tb-master-layout .hero-typo-scroll-hint {\n        grid-column: 1 \/ span 4;\n        display: flex;\n        align-items: flex-start;\n    }\n\n    #tb-master-layout .hero-typo-desc {\n        grid-column: 7 \/ span 6;\n    }\n\n    \/* DARK SECTION *\/\n    #tb-master-layout section.section-dark {\n      background-color: var(--primary-navy) !important;\n      color: var(--bg-light) !important;\n      max-width: 100% !important;\n      border-bottom: 1px solid rgba(243, 249, 253, 0.1) !important;\n    }\n    #tb-master-layout section.section-dark h2 { color: var(--bg-light) !important; }\n    #tb-master-layout section.section-dark p.body-editorial { color: rgba(243, 249, 253, 0.75) !important; }\n    #tb-master-layout section.section-dark .label-micro { color: var(--bg-light) !important; opacity: 0.7; }\n\n    \/* ANTI-CARD LIST *\/\n    #tb-master-layout .editorial-list { grid-column: span 12; margin-top: 48px; }\n    #tb-master-layout .list-row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; padding: 40px 0; border-top: 1px solid var(--hairline); transition: var(--transition-elegant); align-items: start; }\n    #tb-master-layout .list-row:last-child { border-bottom: 1px solid var(--hairline); }\n    #tb-master-layout .list-row:hover { background-color: #ffffff; padding-left: 24px; padding-right: 24px; }\n    #tb-master-layout .list-num { grid-column: span 1; font-size: 0.9rem; font-weight: 600; color: var(--accent-green) !important; opacity: 1 !important; padding-top: 6px; }\n    #tb-master-layout .list-title { grid-column: span 4; font-size: clamp(1.5rem, 2.5vw, 2.2rem) !important; font-weight: 500 !important; line-height: 1.1 !important; letter-spacing: -0.02em !important; color: var(--primary-navy) !important; }\n    #tb-master-layout .list-desc { grid-column: span 7; font-size: 1.125rem !important; color: var(--text-body) !important; }\n\n    \/* HORIZONTAL SCROLL PORTFOLIO SYSTEM *\/\n    #tb-master-layout section.section-full-bleed { max-width: 100% !important; padding-right: 0 !important; padding-left: 0 !important; overflow: hidden; }\n    #tb-master-layout .full-bleed-header { padding: 0 6%; }\n    #tb-master-layout .works-header-flex { display: flex; justify-content: space-between; align-items: flex-end; padding-top: 180px; grid-column: span 12; }\n    \n    \/* CAROUSEL KONTINER & BUTTON GLASSPHORMISM *\/\n    #tb-master-layout .works-carousel-container {\n      position: relative;\n      width: 100%;\n      margin-top: 64px;\n    }\n\n    #tb-master-layout .nav-arrow {\n      position: absolute;\n      top: calc(50% - 40px);\n      transform: translateY(-50%);\n      height: 64px;\n      border-radius: 50%;\n      border: 1px solid rgba(29, 44, 119, 0.2);\n      background: rgba(255, 255, 255, 0.35);\n      backdrop-filter: blur(20px);\n      -webkit-backdrop-filter: blur(20px);\n      color: var(--primary-navy);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      z-index: 10;\n      cursor: pointer;\n      box-shadow: 0 8px 32px 0 rgba(29, 44, 119, 0.05);\n      text-decoration: none !important;\n      transition: width 0.5s cubic-bezier(0.25, 1, 0.5, 1), \n                  border-radius 0.5s cubic-bezier(0.25, 1, 0.5, 1), \n                  background-color 0.4s ease, \n                  color 0.4s ease, \n                  padding 0.5s cubic-bezier(0.25, 1, 0.5, 1), \n                  opacity 0.4s ease, \n                  transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);\n    }\n\n    #tb-master-layout .nav-arrow svg {\n      width: 24px;\n      height: 24px;\n      flex-shrink: 0;\n    }\n\n    #tb-master-layout .arrow-left {\n      left: 3%;\n      width: 64px;\n      opacity: 0;\n      pointer-events: none;\n    }\n    #tb-master-layout .arrow-left.is-visible {\n      opacity: 1;\n      pointer-events: auto;\n    }\n    #tb-master-layout .arrow-left:hover {\n      background: rgba(255, 255, 255, 0.6);\n      transform: translateY(-50%) scale(1.05);\n    }\n\n    #tb-master-layout .arrow-right {\n      right: 3%;\n      width: 64px;\n      padding: 0;\n    }\n    #tb-master-layout .arrow-right:hover {\n      background: rgba(255, 255, 255, 0.6);\n      transform: translateY(-50%) scale(1.05);\n    }\n\n    #tb-master-layout .arrow-text {\n      font-size: 0.95rem;\n      font-weight: 500;\n      white-space: nowrap;\n      max-width: 0;\n      opacity: 0;\n      overflow: hidden;\n      display: inline-block;\n      transition: max-width 0.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;\n    }\n\n    \/* KONDISI MORPHING MENTOK KANAN *\/\n    #tb-master-layout .arrow-right.is-morphed {\n      width: 230px;\n      border-radius: 50px;\n      background: var(--primary-blue) !important;\n      color: #ffffff !important;\n      border-color: var(--primary-blue) !important;\n      padding: 0 24px;\n      box-shadow: 0 12px 32px rgba(42, 70, 211, 0.3);\n    }\n    #tb-master-layout .arrow-right.is-morphed .arrow-text {\n      max-width: 150px;\n      opacity: 1;\n      margin-right: 10px;\n    }\n    #tb-master-layout .arrow-right.is-morphed:hover {\n      background: #1e35b5 !important;\n      transform: translateY(-50%) scale(1.03);\n    }\n\n    \/* TREK SCROLL SEJAJAR SEMPURNA KE KIRI (6%) *\/\n    #tb-master-layout .horizontal-scroll-wrapper {\n      display: flex !important;\n      gap: 40px !important;\n      overflow-x: auto !important;\n      padding-top: 0px !important;\n      padding-left: 6% !important;\n      padding-right: 6% !important;\n      padding-bottom: 80px !important;\n      scroll-snap-type: x mandatory !important;\n      scrollbar-width: none !important;\n      -ms-overflow-style: none !important;\n      cursor: grab !important;\n    }\n\n    #tb-master-layout .horizontal-scroll-wrapper::-webkit-scrollbar { display: none; }\n    #tb-master-layout .horizontal-scroll-wrapper:active { cursor: grabbing; }\n    \n    #tb-master-layout .scroll-item { flex: 0 0 auto; width: 700px; max-width: 85vw; scroll-snap-align: start; }\n    \n    \/* ======================================================= *\/\n    \/* EDIT: GLOBAL KONSISTENSI IMAGE GRAYSCALE TO COLOR ENGINE *\/\n    \/* ======================================================= *\/\n    #tb-master-layout .img-editorial-wrapper { position: relative; width: 100%; overflow: hidden; background-color: rgba(29, 44, 119, 0.03); z-index: 2; }\n    #tb-master-layout .scroll-item-img { width: 100%; aspect-ratio: 4\/3; overflow: hidden; background-color: rgba(29, 44, 119, 0.05); position: relative; }\n    \n    #tb-master-layout .img-editorial-wrapper img,\n    #tb-master-layout .scroll-item-img img {\n      width: 100% !important;\n      height: 100% !important;\n      object-fit: cover !important;\n      display: block !important;\n      transition: var(--transition-elegant);\n      filter: grayscale(100%) contrast(105%); \/* Dikunci ke Full Grayscale Semula *\/\n    }\n    \n    \/* Transisi Warna Muncul Sempurna Saat Hover *\/\n    #tb-master-layout .img-editorial-wrapper:hover img,\n    #tb-master-layout .scroll-item:hover .scroll-item-img img {\n      transform: scale(1.03);\n      filter: grayscale(0%) contrast(100%); \/* Warna Asli Mengudara *\/\n    }\n\n    #tb-master-layout .scroll-item-caption {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-top: 24px;\n      padding-bottom: 16px;\n      border-bottom: 1px solid var(--hairline);\n    }\n    \n    #tb-master-layout .scroll-item-title {\n      font-size: 1.5rem !important;\n      font-weight: 500 !important;\n      color: var(--primary-navy) !important;\n      letter-spacing: -0.02em;\n    }\n    \n    #tb-master-layout .scroll-item-category {\n      font-size: 0.75rem !important;\n      font-weight: 600 !important;\n      text-transform: uppercase !important;\n      letter-spacing: 0.1em !important;\n      color: var(--text-body) !important;\n      text-align: right;\n    }\n\n    #tb-master-layout a.btn-minimal {\n      display: inline-flex !important; align-items: center !important; padding: 14px 32px !important; border-radius: 50px !important; font-size: 1rem !important; font-weight: 500 !important; text-decoration: none !important; color: var(--bg-light) !important; background-color: var(--primary-navy) !important; transition: var(--transition-elegant) !important; border: 1px solid var(--primary-navy) !important; box-shadow: none !important; position: relative; z-index: 3;\n    }\n    #tb-master-layout a.btn-minimal:hover { background-color: transparent !important; color: var(--primary-navy) !important; transform: translateY(-4px) !important; }\n    \n    #tb-master-layout a.btn-link-line {\n      display: inline-flex !important; align-items: center !important; font-size: 1.125rem !important; font-weight: 500 !important; color: var(--primary-navy) !important; text-decoration: none !important; padding-bottom: 4px !important; border-bottom: 1px solid var(--primary-navy) !important; transition: var(--transition-elegant); margin-top: 16px; background: transparent !important; position: relative; z-index: 3;\n    }\n    #tb-master-layout a.btn-link-line:hover { opacity: 0.7 !important; padding-left: 8px !important; }\n\n    \/* AMBIENT GLOW EFFECTS *\/\n    #tb-master-layout .ambient-glow { position: absolute; width: 800px; height: 800px; border-radius: 50%; filter: blur(120px); pointer-events: none; z-index: 0; opacity: 0.5; }\n    #tb-master-layout .glow-blue { background: radial-gradient(circle, rgba(42, 70, 211, 0.12) 0%, transparent 60%); top: -10%; left: -5%; }\n    #tb-master-layout .glow-green { background: radial-gradient(circle, rgba(41, 147, 84, 0.1) 0%, transparent 60%); bottom: -15%; right: -5%; }\n    #tb-master-layout section.glow-container { overflow: hidden; }\n\n    \/* REVEAL ON SCROLL *\/\n    #tb-master-layout .reveal { opacity: 0; transform: translateY(50px); transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1), transform 1s cubic-bezier(0.25, 1, 0.5, 1); }\n    #tb-master-layout .reveal.active { opacity: 1; transform: translateY(0); }\n    .elementor-editor-active #tb-master-layout .reveal { opacity: 1 !important; transform: translateY(0) !important; }\n\n    \/* RESPONSIVE & MOBILE ENGINE *\/\n    @media (max-width: 992px) {\n      #tb-master-layout { --section-padding: 100px 5%; }\n      #tb-master-layout .grid-12 { display: flex; flex-direction: column; gap: 40px; }\n      #tb-master-layout .hero-typo-bottom { display: flex; flex-direction: column-reverse; gap: 32px; padding-top: 24px; }\n      #tb-master-layout .list-row { display: flex; flex-direction: column; gap: 12px; padding: 32px 0; }\n      #tb-master-layout .list-title { margin-bottom: 4px; }\n      #tb-master-layout h1 { letter-spacing: -0.03em !important; }\n      #tb-master-layout .works-header-flex { flex-direction: column; align-items: flex-start; gap: 24px; padding-top: 100px; }\n      #tb-master-layout .horizontal-scroll-wrapper { padding-left: 5% !important; padding-right: 5% !important; gap: 24px; }\n      #tb-master-layout .ambient-glow { width: 400px; height: 400px; }\n      \n      #tb-master-layout .arrow-left { display: none !important; }\n      #tb-master-layout .arrow-right { display: none !important; }\n      #tb-master-layout .arrow-right.is-morphed { \n        display: flex !important;\n        right: 5% !important;\n        top: calc(50% - 40px) !important;\n        transform: translateY(-50%) !important;\n      }\n      \n      #tb-master-layout .scroll-item-caption { flex-direction: column; align-items: flex-start; gap: 8px; }\n      #tb-master-layout .scroll-item-category { text-align: left; }\n    }\n  <\/style>\n\n  <section id=\"hero\" class=\"glow-container\" style=\"min-height: 90vh; display: flex; align-items: center;\">\n    <div class=\"ambient-glow glow-blue\"><\/div>\n    <div class=\"grid-12\" style=\"width: 100%;\">\n      \n      <div class=\"reveal hero-typo-wrapper\">\n        <span class=\"label-micro\">00 \/ Strategic Partner<\/span>\n        <h1>Make your brand<br \/>mean something.<\/h1>\n      <\/div>\n      \n      <div class=\"reveal hero-typo-bottom delay-1\">\n        \n        <div class=\"hero-typo-scroll-hint\">\n             <span class=\"label-micro no-dot\" style=\"margin-bottom: 0;\">Scroll to explore \u2193<\/span>\n         <\/div>\n\n        <div class=\"hero-typo-desc\">\n            <p class=\"body-editorial\">\n              Anda membangun bisnis bukan sekadar untuk transaksi, tapi untuk menciptakan makna. Namun, value besar sering terlihat kecil jika gagal dipahami market. Kami hadir sebagai partner strategis Anda\u2014membantu memperjelas identitas dan menerjemahkan visi Anda menjadi brand yang genuinely dipercaya dan dihargai manusia.\n            <\/p>\n            <div>\n                <a href=\"https:\/\/wa.link\/l0mjou\" class=\"btn-minimal\">Discuss Your Vision<\/a>\n            <\/div>\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n  <\/section>\n\n  <section id=\"problem\" class=\"section-dark\">\n    <div class=\"grid-12\">\n      <div class=\"reveal\" style=\"grid-column: span 4\">\n        <span class=\"label-micro\">01 \/ The Commodity Trap<\/span>\n      <\/div>\n      <div class=\"reveal\" style=\"grid-column: span 8\">\n        <h2>\n          Jika brand Anda tidak bermakna, bersiaplah\n          <span class=\"text-strike-accent\">perang harga<\/span>.\n        <\/h2>\n        <p class=\"body-editorial\" style=\"max-width: 720px\">\n          Banyak bisnis, edukator, dan institusi sebenarnya memiliki value yang kuat, tetapi gagal membangun persepsi yang tepat karena komunikasi atau identitas mereka tidak tersampaikan dengan jelas. Atensi bisa membuat orang datang melirik sesaat. Namun hanya makna yang membuat mereka bertahan.\n        <\/p>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <section id=\"paradigm\">\n    <div class=\"grid-12\" style=\"align-items: center\">\n      <div class=\"reveal\" style=\"grid-column: span 5\">\n        <div class=\"img-editorial-wrapper\" style=\"aspect-ratio: 1\/1\">\n          <img src=\"https:\/\/teoribranding.com\/wp-content\/uploads\/2026\/05\/Teoribranding_img_Produk-bisa-ditiru-tapi-makna-sulit-digantikan.webp\" alt=\"Produk bisa ditiru tapi makna sulit digantikan\" loading=\"lazy\" decoding=\"async\" \/>\n        <\/div>\n      <\/div>\n      <div class=\"reveal\" style=\"grid-column: 7 \/ span 6\">\n        <span class=\"label-micro\">02 \/ The Shift<\/span>\n        <h2>Produk bisa ditiru. <br \/>Makna lebih sulit digantikan.<\/h2>\n        <p class=\"body-editorial\">\n          Manusia tidak hanya membeli produk, tetapi juga mencari makna, identitas, dan gambaran tentang diri mereka di dalam sebuah brand. Ketika value Anda tidak terasa jelas, di situlah market mulai ragu memilih Anda. Kami hadir untuk memastikan pesan Anda mendarat dengan jernih di benak manusia yang tepat.\n        <\/p>\n        <a href=\"\/about-us\" class=\"btn-link-line\">Explore Our Core Beliefs<\/a>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <section id=\"process\">\n    <div class=\"grid-12\">\n      <div class=\"reveal\" style=\"grid-column: span 12\">\n        <span class=\"label-micro\">03 \/ Approach<\/span>\n        <h2>Rencana Kerja untuk <br \/>Membangun Kejelasan.<\/h2>\n      <\/div>\n\n      <div class=\"editorial-list reveal\">\n        <div class=\"list-row\">\n          <div class=\"list-num\">\/01<\/div>\n          <div class=\"list-title\">Discover the Core Value<\/div>\n          <div class=\"list-desc\">\n            Menggali visi, value, persepsi, audience, dan identitas bisnis secara lebih mendalam untuk menemukan apa yang sebenarnya membuat brand tersebut meaningful.\n          <\/div>\n        <\/div>\n        <div class=\"list-row\">\n          <div class=\"list-num\">\/02<\/div>\n          <div class=\"list-title\">Build Strategic Clarity<\/div>\n          <div class=\"list-desc\">\n            Memperjelas positioning, messaging, verbal identity, visual identity, dan arah persepsi agar bisnis memiliki identitas yang lebih kuat dan mudah dipahami manusia.\n          <\/div>\n        <\/div>\n        <div class=\"list-row\">\n          <div class=\"list-num\">\/03<\/div>\n          <div class=\"list-title\">Meaningful Experience<\/div>\n          <div class=\"list-desc\">\n            Menerjemahkan seluruh strategi ke dalam bentuk komunikasi nyata, desain visual, digital presence, dan pengalaman utuh yang konsisten membangun trust jangka panjang.\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <section id=\"works\" class=\"section-full-bleed\">\n    <div class=\"full-bleed-header grid-12\">\n      <div class=\"reveal works-header-flex\">\n        <div>\n          <span class=\"label-micro\">04 \/ Selected Works<\/span>\n          <h2 style=\"margin-bottom: 0\">\n            Karya yang berbicara <br \/>lebih keras.\n          <\/h2>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"works-carousel-container\">\n      \n      <button class=\"nav-arrow arrow-left\" aria-label=\"Slide Left\">\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"15 18 9 12 15 6\"><\/polyline><\/svg>\n      <\/button>\n      \n      <a href=\"\/portfolio\" class=\"nav-arrow arrow-right\" aria-label=\"Portofolio Lainnya\">\n        <span class=\"arrow-text\">Portofolio Lainnya<\/span>\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"9 18 15 12 9 6\"><\/polyline><\/svg>\n      <\/a>\n\n      <div class=\"horizontal-scroll-wrapper reveal\">\n        <div class=\"scroll-item\">\n          <div class=\"scroll-item-img\">\n            <img src=\"https:\/\/teoribranding.com\/wp-content\/uploads\/2026\/05\/AGGI_Logo_Branding-by-Teoribranding.webp\" alt=\"Asosiasi Grafologi Grafonomi\" loading=\"lazy\" decoding=\"async\" \/>\n          <\/div>\n          <div class=\"scroll-item-caption\">\n            <span class=\"scroll-item-title\">Asosiasi Grafologi Grafonomi Indonesia<\/span><span class=\"scroll-item-category\">Full Branding<\/span>\n          <\/div>\n        <\/div>\n        <div class=\"scroll-item\">\n          <div class=\"scroll-item-img\">\n            <img src=\"https:\/\/teoribranding.com\/wp-content\/uploads\/2026\/05\/Sekolah-Pijar-Semesta_Logo_Branding_by-Teoribranding.webp\" alt=\"Sekolah Pijar Semesta\" loading=\"lazy\" decoding=\"async\" \/>\n          <\/div>\n          <div class=\"scroll-item-caption\">\n            <span class=\"scroll-item-title\">Sekolah Pijar Semesta<\/span><span class=\"scroll-item-category\">Full Branding<\/span>\n          <\/div>\n        <\/div>\n        <div class=\"scroll-item\">\n          <div class=\"scroll-item-img\">\n            <img src=\"https:\/\/teoribranding.com\/wp-content\/uploads\/2026\/05\/Balisunsets_Logo_and_Website_by-Teoribranding.webp\" alt=\"Balisunsets\" loading=\"lazy\" decoding=\"async\" \/>\n          <\/div>\n          <div class=\"scroll-item-caption\">\n            <span class=\"scroll-item-title\">Balisunsets<\/span><span class=\"scroll-item-category\">Brand Identity &#038; Website<\/span>\n          <\/div>\n        <\/div>\n        <div class=\"scroll-item\">\n          <div class=\"scroll-item-img\">\n            <img src=\"https:\/\/teoribranding.com\/wp-content\/uploads\/2026\/05\/LKP-Grafologi-Indonesia_Logo_Branding_by-Teoribranding.webp\" alt=\"LKP Grafologi Indonesia\" loading=\"lazy\" decoding=\"async\" \/>\n          <\/div>\n          <div class=\"scroll-item-caption\">\n            <span class=\"scroll-item-title\">LKP Grafologi Indonesia<\/span><span class=\"scroll-item-category\">Full Branding &#038; Website<\/span>\n          <\/div>\n        <\/div>\n        <div class=\"scroll-item\">\n          <div class=\"scroll-item-img\">\n            <img src=\"https:\/\/teoribranding.com\/wp-content\/uploads\/2026\/05\/KAROHS_Logo_Branding_by-Teoribranding.webp\" alt=\"KAROHS School\" loading=\"lazy\" decoding=\"async\" \/>\n          <\/div>\n          <div class=\"scroll-item-caption\">\n            <span class=\"scroll-item-title\">KAROHS School<\/span><span class=\"scroll-item-category\">Full Branding &#038; Website<\/span>\n          <\/div>\n        <\/div>\n        <div class=\"scroll-item\" style=\"width: 240px !important; padding-right: 20px;\"><\/div>\n      <\/div>\n\n    <\/div>\n  <\/section>\n\n  <section id=\"cta\" class=\"glow-container\" style=\"padding-top: 180px; padding-bottom: 220px; background-color: #ffffff\">\n    <div class=\"ambient-glow glow-green\"><\/div>\n    <div class=\"grid-12\">\n      <div class=\"reveal\" style=\"grid-column: 2 \/ span 10; text-align: left; position: relative; z-index: 2;\">\n        <span class=\"label-micro\">Let&#8217;s build something that matters<\/span>\n        <h2 style=\"font-size: clamp(3rem, 6vw, 5.5rem) !important; margin-bottom: 40px !important;\">\n          Waktunya keluar dari <br \/>perangkap komoditas.\n        <\/h2>\n        <p class=\"body-editorial\" style=\"max-width: 680px; margin-bottom: 48px !important\">\n          Mari berdiskusi secara mendalam untuk memperjelas dan mengomunikasikan arah value bisnis Anda secara objektif. Kami hanya bekerja sama dengan founder yang serius memikirkan dampak jangka panjang.\n        <\/p>\n        <a href=\"https:\/\/wa.link\/l0mjou\" class=\"btn-minimal\">Discuss Your Vision<\/a>\n      <\/div>\n    <\/div>\n  <\/section>\n<\/div>\n\n<script>\n  function initRevealAnimations() {\n    const revealElements = document.querySelectorAll(\"#tb-master-layout .reveal\");\n    const observerOptions = { root: null, rootMargin: \"0px\", threshold: 0.1 };\n    const revealObserver = new IntersectionObserver(function (entries, observer) {\n      entries.forEach((entry) => {\n        if (entry.isIntersecting) {\n          entry.target.classList.add(\"active\");\n          revealObserver.unobserve(entry.target);\n        }\n      });\n    }, observerOptions);\n    revealElements.forEach((element) => {\n      revealObserver.observe(element);\n    });\n  }\n\n  \/\/ INTERACTION ENGINE ARCHITECT\n  function initMorphicCarousel() {\n    const track = document.querySelector(\"#tb-master-layout .horizontal-scroll-wrapper\");\n    const leftArrow = document.querySelector(\"#tb-master-layout .arrow-left\");\n    const rightArrow = document.querySelector(\"#tb-master-layout .arrow-right\");\n\n    if (!track || !leftArrow || !rightArrow) return;\n\n    track.addEventListener(\"scroll\", function() {\n      if (track.scrollLeft > 30) {\n        leftArrow.classList.add(\"is-visible\");\n      } else {\n        leftArrow.classList.remove(\"is-visible\");\n      }\n\n      const isEnd = (track.scrollLeft + track.clientWidth) >= (track.scrollWidth - 60);\n      \n      if (isEnd) {\n        rightArrow.classList.add(\"is-morphed\");\n      } else {\n        rightArrow.classList.remove(\"is-morphed\");\n      }\n    });\n\n    const scrollStep = 500;\n\n    leftArrow.addEventListener(\"click\", function() {\n      track.scrollBy({ left: -scrollStep, behavior: \"smooth\" });\n    });\n\n    rightArrow.addEventListener(\"click\", function(e) {\n      if (!rightArrow.classList.contains(\"is-morphed\")) {\n        e.preventDefault();\n        track.scrollBy({ left: scrollStep, behavior: \"smooth\" });\n      }\n    });\n  }\n\n  if (document.readyState === 'loading') {\n    document.addEventListener(\"DOMContentLoaded\", function() {\n      initRevealAnimations();\n      initMorphicCarousel();\n    });\n  } else {\n    initRevealAnimations();\n    initMorphicCarousel();\n  }\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>00 \/ Strategic Partner Make your brandmean something. Scroll to explore \u2193 Anda membangun bisnis bukan sekadar untuk transaksi, tapi untuk menciptakan makna. Namun, value besar sering terlihat kecil jika gagal dipahami market. Kami hadir sebagai partner strategis Anda\u2014membantu memperjelas identitas dan menerjemahkan visi Anda menjadi brand yang genuinely dipercaya dan dihargai manusia. Discuss Your [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-6","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/staging.teoribranding.com\/index.php\/wp-json\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/staging.teoribranding.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/staging.teoribranding.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/staging.teoribranding.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/staging.teoribranding.com\/index.php\/wp-json\/wp\/v2\/comments?post=6"}],"version-history":[{"count":2,"href":"https:\/\/staging.teoribranding.com\/index.php\/wp-json\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":9,"href":"https:\/\/staging.teoribranding.com\/index.php\/wp-json\/wp\/v2\/pages\/6\/revisions\/9"}],"wp:attachment":[{"href":"https:\/\/staging.teoribranding.com\/index.php\/wp-json\/wp\/v2\/media?parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}