{"id":7893,"date":"2026-07-29T13:36:21","date_gmt":"2026-07-29T13:36:21","guid":{"rendered":"https:\/\/cosignonline.com\/beta_cosign\/?page_id=7893"},"modified":"2026-07-31T06:41:46","modified_gmt":"2026-07-31T06:41:46","slug":"blogs","status":"publish","type":"page","link":"https:\/\/cosignonline.com\/beta_cosign\/blogs\/","title":{"rendered":"Blogs"},"content":{"rendered":"<p><div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-1 fusion-flex-container has-pattern-background has-mask-background hundred-percent-fullwidth non-hundred-percent-height-scrolling\" style=\"--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-padding-top:80px;--awb-padding-right:60px;--awb-padding-bottom:80px;--awb-padding-left:60px;--awb-margin-top:0px;--awb-margin-bottom:0px;--awb-flex-wrap:wrap;\" ><div class=\"fusion-builder-row fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap\" style=\"width:104% !important;max-width:104% !important;margin-left: calc(-4% \/ 2 );margin-right: calc(-4% \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-0 fusion_builder_column_1_1 1_1 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:0px;--awb-spacing-right-large:1.92%;--awb-margin-bottom-large:0px;--awb-spacing-left-large:1.92%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\" data-scroll-devices=\"small-visibility,medium-visibility,large-visibility\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-title title fusion-title-1 fusion-sep-none fusion-title-text fusion-title-size-two\" style=\"--awb-text-color:#030712;--awb-margin-top:0px;--awb-margin-bottom:40px;--awb-margin-top-small:10px;--awb-margin-right-small:0px;--awb-margin-bottom-small:10px;--awb-margin-left-small:0px;--awb-font-size:52px;\"><h2 class=\"fusion-title-heading title-heading-left\" style=\"font-family:&quot;Inter Tight&quot;;font-style:normal;font-weight:400;margin:0;letter-spacing:-1%;font-size:1em;line-height:110%;\">The Cosign Blog<\/h2><\/div><div class=\"fusion-post-cards fusion-post-cards-1 fusion-grid-archive\" style=\"--awb-dots-align:center;--awb-columns:1;--awb-active-filter-border-size:0px;--awb-filters-height:36px;--awb-columns-medium:100%;--awb-columns-small:100%;\" data-post-type-label=\"posts\"><ul class=\"fusion-grid fusion-stacking-posts-cards\"><li class=\"fusion-layout-column fusion_builder_column fusion-builder-column-1 fusion-flex-column post-card fusion-grid-column fusion-post-cards-grid-column\" style=\"--awb-max-height:397px;--awb-overflow:hidden;--awb-bg-blend:overlay;--awb-bg-size:cover;--awb-border-radius:4px 4px 4px 4px;--awb-flex-grow:0;--awb-flex-shrink:0;--awb-flex-grow-medium:;--awb-flex-shrink-medium:;--awb-flex-grow-small:;--awb-flex-shrink-small:;\" data-scroll-devices=\"small-visibility,medium-visibility,large-visibility\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-builder-row fusion-builder-row-inner fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap\" style=\"--awb-flex-grow:0;--awb-flex-grow-medium:0;--awb-flex-grow-small:0;--awb-flex-shrink:0;--awb-flex-shrink-medium:0;--awb-flex-shrink-small:0;width:104% !important;max-width:104% !important;margin-left: calc(-4% \/ 2 );margin-right: calc(-4% \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column_inner fusion-builder-nested-column-0 fusion_builder_column_inner_1_2 1_2 fusion-flex-column fusion-flex-align-self-stretch\" style=\"--awb-bg-position:center center;--awb-bg-size:cover;--awb-width-large:50%;--awb-margin-top-large:0px;--awb-spacing-right-large:0px;--awb-margin-bottom-large:0px;--awb-spacing-left-large:3.84%;--awb-width-medium:50%;--awb-order-medium:0;--awb-spacing-right-medium:0px;--awb-spacing-left-medium:3.84%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\" data-scroll-devices=\"small-visibility,medium-visibility,large-visibility\"><div class=\"fusion-column-wrapper lazyload fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column fusion-empty-column-bg-image fusion-column-has-bg-image\" data-bg-url=\"https:\/\/cosignonline.com\/beta_cosign\/wp-content\/uploads\/2026\/07\/f6e8b6b3b9d92f4057789f072a26500c6487a502-2.png\" data-bg=\"https:\/\/cosignonline.com\/beta_cosign\/wp-content\/uploads\/2026\/07\/f6e8b6b3b9d92f4057789f072a26500c6487a502-2.png\"><img decoding=\"async\" class=\"fusion-empty-dims-img-placeholder\" aria-label=\"f6e8b6b3b9d92f4057789f072a26500c6487a502 (2)\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271200%27%20height%3D%27675%27%20viewBox%3D%270%200%201200%20675%27%3E%3Crect%20width%3D%271200%27%20height%3D%27675%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\"><\/div><\/div><div class=\"fusion-layout-column fusion_builder_column_inner fusion-builder-nested-column-1 fusion_builder_column_inner_1_2 1_2 fusion-flex-column fusion-flex-align-self-stretch\" style=\"--awb-padding-top:32px;--awb-padding-right:32px;--awb-padding-bottom:32px;--awb-padding-left:40px;--awb-bg-color:#f3f4f6;--awb-bg-color-hover:#f3f4f6;--awb-bg-size:cover;--awb-width-large:50%;--awb-margin-top-large:0px;--awb-spacing-right-large:3.84%;--awb-margin-bottom-large:0px;--awb-spacing-left-large:0px;--awb-width-medium:50%;--awb-order-medium:0;--awb-spacing-right-medium:3.84%;--awb-spacing-left-medium:0px;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\" data-scroll-devices=\"small-visibility,medium-visibility,large-visibility\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-text fusion-text-1 fusion-text-no-margin\" style=\"--awb-content-alignment:left;--awb-font-size:13px;--awb-line-height:150%;--awb-letter-spacing:0%;--awb-text-color:#4a5565;--awb-margin-top:0px;--awb-margin-right:0px;--awb-margin-bottom:16px;--awb-margin-left:0px;--awb-text-font-family:&quot;Inter Tight&quot;;--awb-text-font-style:normal;--awb-text-font-weight:400;\"><p>July 29, 2026<\/p>\n<\/div><div class=\"fusion-title title fusion-title-2 fusion-sep-none fusion-title-text fusion-title-size-two\" style=\"--awb-text-color:#030712;--awb-margin-top:0px;--awb-margin-bottom:0px;--awb-margin-top-small:10px;--awb-margin-right-small:0px;--awb-margin-bottom-small:10px;--awb-margin-left-small:0px;--awb-font-size:36px;\"><h2 class=\"fusion-title-heading title-heading-left\" style=\"font-family:&quot;Inter Tight&quot;;font-style:normal;font-weight:500;margin:0;letter-spacing:-1%;font-size:1em;line-height:120%;\">Modular Signage vs Custom Signage: Which Is Better for Modern Businesses?<\/h2><\/div><div class=\"fusion-separator fusion-full-width-sep\" style=\"align-self: center;margin-left: auto;margin-right: auto;margin-top:0px;margin-bottom:160px;width:100%;\"><\/div><div style=\"text-align:left;\"><a class=\"fusion-button button-flat fusion-button-default-size button-custom fusion-button-default button-1 fusion-button-default-span fusion-button-default-type\" style=\"--awb-margin-top:0px;--awb-margin-right:0px;--awb-margin-bottom:0px;--awb-margin-left:0px;--awb-padding-top:10px;--awb-padding-right:28px;--awb-padding-bottom:10px;--awb-padding-left:28px;--button_accent_color:#201547;--button_border_color:#201547;--button_accent_hover_color:var(--awb-color1);--button_border_hover_color:#201547;--button_border_width-top:1.5px;--button_border_width-right:1.5px;--button_border_width-bottom:1.5px;--button_border_width-left:1.5px;--button-border-radius-top-left:2px;--button-border-radius-top-right:2px;--button-border-radius-bottom-right:2px;--button-border-radius-bottom-left:2px;--button_gradient_angle:270deg;--button_gradient_top_color:rgba(255,255,255,0);--button_gradient_bottom_color:rgba(255,255,255,0);--button_gradient_top_color_hover:#201547;--button_gradient_bottom_color_hover:#201547;--button_font_size:15px;--button_line_height:150%;--button_typography-letter-spacing:0%;--button_typography-font-family:&quot;Inter Tight&quot;;--button_typography-font-style:normal;--button_typography-font-weight:400;\" target=\"_self\" data-hover=\"bg_slide_right\" href=\"https:\/\/cosignonline.com\/beta_cosign\/modular-signage-vs-custom-signage-which-is-better-for-modern-businesses\/\"><span class=\"fusion-button-text awb-button__text awb-button__text--default\">Read Now<\/span><\/a><\/div><\/div><\/div><\/div><\/div><\/li>\n<\/ul><\/div><\/div><\/div><\/div><\/div><div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-2 fusion-flex-container has-pattern-background has-mask-background hundred-percent-fullwidth non-hundred-percent-height-scrolling\" style=\"--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-padding-top:0px;--awb-padding-right:60px;--awb-padding-bottom:0px;--awb-padding-left:60px;--awb-flex-wrap:wrap;\" ><div class=\"fusion-builder-row fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap\" style=\"width:104% !important;max-width:104% !important;margin-left: calc(-4% \/ 2 );margin-right: calc(-4% \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-2 fusion_builder_column_1_1 1_1 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:100%;--awb-flex-grow:0;--awb-flex-shrink:0;--awb-margin-top-large:0px;--awb-spacing-right-large:1.92%;--awb-margin-bottom-large:20px;--awb-spacing-left-large:1.92%;--awb-width-medium:100%;--awb-order-medium:0;--awb-flex-grow-medium:;--awb-flex-shrink-medium:;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-flex-grow-small:;--awb-flex-shrink-small:;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin=\"\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=IBM+Plex+Mono:wght@400&family=Inter+Tight:wght@400;450;500;600&display=swap\" rel=\"stylesheet\">\n\n<style>\n.bg *, .bg *::before, .bg *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n.bg {\n  width: 100%;\n  padding: 0;\n  font-family: 'Inter Tight', sans-serif;\n  -webkit-font-smoothing: antialiased;\n}\n\n\/* \u2500\u2500 Filter Bar \u2500\u2500 *\/\n.bg-filters {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 24px;\n  padding: 20px 0 24px;\n  border-bottom: 1px solid rgba(255,255,255,0.08);\n  margin-bottom: 28px;\n  flex-wrap: wrap;\n}\n\n.bg-tabs {\n  display: flex;\n  align-items: center;\n  gap: 0;\n  flex-wrap: wrap;\n  list-style: none;\n}\n\n.bg-tab {\n  font-family: 'Inter Tight', sans-serif;\n  font-size: 15px;\n  font-weight: 500;\n  line-height: 150%;\n  letter-spacing: 0;\n  color: #4A5565;\n  background: none;\n  border: none;\n  padding: 8px 16px;\n  cursor: pointer;\n  transition: color 0.2s ease;\n  white-space: nowrap;\n}\n.bg-tab:hover { color: #1E2939; }\n.bg-tab.active {\n  color: #22317F;\n  border-bottom: 2px solid #22317F;\n  padding-bottom: 6px;\n}\n\n.bg-right {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex-shrink: 0;\n}\n\n.bg-search {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  background: #F3F4F6;\n  border: none;\n  border-radius: 4px;\n  padding: 10px 16px;\n  width: 240px;\n  transition: background 0.2s;\n}\n.bg-search:focus-within { background: #EBEDF0; }\n.bg-search svg { flex-shrink: 0; color: #6A7282; }\n.bg-search input {\n  background: none; border: none; outline: none;\n  font-family: 'Inter Tight', sans-serif;\n  font-size: 15px; font-weight: 400;\n  color: #1E2939; width: 100%;\n}\n.bg-search input::placeholder { color: #6A7282; }\n\n.bg-sort-btn {\n  width: 44px; height: 44px;\n  border-radius: 4px;\n  border: 1.5px solid #201547;\n  background: transparent;\n  display: flex; align-items: center; justify-content: center;\n  cursor: pointer; color: #201547;\n  transition: background 0.2s, color 0.2s;\n}\n.bg-sort-btn:hover { background: #201547; color: #ffffff; }\n\n\/* \u2500\u2500 Mobile Dropdown (hidden on desktop) \u2500\u2500 *\/\n.bg-dropdown-wrap {\n  display: none;\n  position: relative;\n}\n.bg-dropdown-btn {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  font-family: 'Inter Tight', sans-serif;\n  font-size: 15px;\n  font-weight: 500;\n  color: #1E2939;\n  background: #F3F4F6;\n  border: 1px solid #E2E4E9;\n  border-radius: 4px;\n  padding: 12px 16px;\n  cursor: pointer;\n  min-width: 160px;\n  transition: border-color 0.2s;\n}\n.bg-dropdown-btn:focus { border-color: #201547; outline: none; }\n.bg-dropdown-btn svg { margin-left: auto; flex-shrink: 0; color: #4A5565; transition: transform 0.25s ease; }\n.bg-dropdown-wrap.open .bg-dropdown-btn svg { transform: rotate(180deg); }\n\n.bg-dropdown-menu {\n  display: none;\n  position: absolute;\n  top: calc(100% + 6px);\n  left: 0; right: 0;\n  background: #fff;\n  border: 1px solid #E2E4E9;\n  border-radius: 6px;\n  box-shadow: 0 8px 30px rgba(0,0,0,0.1);\n  z-index: 100;\n  max-height: 280px;\n  overflow-y: auto;\n  padding: 6px 0;\n}\n.bg-dropdown-wrap.open .bg-dropdown-menu { display: block; }\n\n.bg-dropdown-item {\n  display: block;\n  width: 100%;\n  font-family: 'Inter Tight', sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  color: #1E2939;\n  background: none;\n  border: none;\n  padding: 10px 16px;\n  text-align: left;\n  cursor: pointer;\n  transition: background 0.15s;\n}\n.bg-dropdown-item:hover { background: #F3F4F6; }\n.bg-dropdown-item.active { color: #22317F; font-weight: 500; background: rgba(34,49,127,0.05); }\n\n\/* \u2500\u2500 Mobile Search Icon (hidden on desktop) \u2500\u2500 *\/\n.bg-search-icon-btn {\n  display: none;\n  width: 44px; height: 44px;\n  border-radius: 4px;\n  border: 1.5px solid #201547;\n  background: transparent;\n  align-items: center; justify-content: center;\n  cursor: pointer; color: #201547;\n  transition: background 0.2s, color 0.2s;\n  flex-shrink: 0;\n}\n.bg-search-icon-btn:hover { background: #201547; color: #ffffff; }\n\n\/* \u2500\u2500 Mobile Inline Search (hidden on desktop, expands in same row) \u2500\u2500 *\/\n.bg-search-inline {\n  display: none;\n  align-items: center;\n  gap: 10px;\n  background: #F3F4F6;\n  border: 1px solid #E2E4E9;\n  border-radius: 4px;\n  padding: 0 12px;\n  height: 44px;\n  flex: 1;\n  min-width: 0;\n  opacity: 0;\n  transform: scaleX(0.8);\n  transform-origin: right center;\n  transition: opacity 0.25s ease, transform 0.25s ease;\n}\n.bg-search-inline.visible {\n  opacity: 1;\n  transform: scaleX(1);\n}\n.bg-search-inline svg { flex-shrink: 0; color: #6A7282; }\n.bg-search-inline input {\n  background: none; border: none; outline: none;\n  font-family: 'Inter Tight', sans-serif;\n  font-size: 15px; font-weight: 400;\n  color: #1E2939; width: 100%; min-width: 0;\n}\n.bg-search-inline input::placeholder { color: #6A7282; }\n.bg-search-close {\n  display: flex; align-items: center; justify-content: center;\n  width: 28px; height: 28px;\n  background: none; border: none;\n  cursor: pointer; color: #6A7282;\n  flex-shrink: 0;\n  border-radius: 4px;\n  transition: color 0.2s, background 0.2s;\n}\n.bg-search-close:hover { color: #1E2939; background: #E5E7EB; }\n\n\/* \u2500\u2500 Card Grid \u2500\u2500 *\/\n.bg-grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 20px;\n}\n\n\/* \u2500\u2500 Card \u2500\u2500 *\/\n.bg-card {\n  border-radius: 8px;\n  overflow: hidden;\n  background: #F3F4F6;\n  display: flex;\n  flex-direction: column;\n  transition: transform 0.25s ease, box-shadow 0.25s ease;\n}\n.bg-card:hover { transform: translateY(-3px); box-shadow: 0 8px 30px rgba(0,0,0,0.08); }\n\n.bg-card-img {\n  position: relative;\n  width: 100%;\n  aspect-ratio: 1.7 \/ 1;\n  background: #1a1a24;\n  overflow: hidden;\n}\n.bg-card-img img {\n  position: absolute; inset: 0;\n  width: 100%; height: 100%;\n  object-fit: cover; display: block;\n}\n.bg-card-img-overlay {\n  position: absolute; inset: 0;\n  background: linear-gradient(180deg, rgba(0,0,0,0.4) -10%, rgba(0,0,0,0) 50%);\n  pointer-events: none;\n}\n\n.bg-card-tag {\n  position: absolute;\n  top: 12px; left: 12px;\n  font-family: 'IBM Plex Mono', monospace;\n  font-size: 12px; font-weight: 400;\n  line-height: 150%; letter-spacing: 0;\n  text-transform: uppercase;\n  color: #ffffff;\n  background: rgba(255,255,255,0.1);\n  padding: 4px 8px;\n  border-radius: 2px;\n}\n\n.bg-card-body {\n  padding: 20px 22px 24px;\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n}\n\n.bg-card-meta {\n  font-family: 'IBM Plex Mono', monospace;\n  font-size: 13px; font-weight: 400;\n  line-height: 150%; letter-spacing: 0;\n  text-transform: uppercase;\n  color: #6A7282;\n  margin-bottom: 12px;\n  display: flex; align-items: center; gap: 8px;\n}\n.bg-meta-dot {\n  width: 4px; height: 4px;\n  border-radius: 50%;\n  background: #6A7282;\n}\n\n.bg-card-title {\n  font-family: 'Inter Tight', sans-serif;\n  font-weight: 450;\n  font-size: 20px;\n  line-height: 130%;\n  letter-spacing: -0.01em;\n  color: #030712;\n  flex: 1;\n}\n\n\/* \u2500\u2500 Read Now Link \u2500\u2500 *\/\n.bg-read {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  font-family: 'Inter Tight', sans-serif;\n  font-size: 14px; font-weight: 500;\n  color: #201547;\n  text-decoration: none;\n  margin-top: 20px;\n  position: relative;\n  align-self: flex-start;\n  transition: color 0.2s;\n  padding-bottom: 2px;\n}\n.bg-read::after {\n  content: '';\n  position: absolute;\n  left: -4px; right: -4px; bottom: -4px;\n  height: 1.5px;\n  background: #201547;\n  transform: scaleX(0);\n  transform-origin: left center;\n  transition: transform 0.35s cubic-bezier(0.25,0.46,0.45,0.94);\n}\n.bg-card:hover .bg-read::after { transform: scaleX(1); }\n\n\/* Arrow swap *\/\n.bg-arr {\n  position: relative; overflow: hidden;\n  display: inline-flex; align-items: center; justify-content: center;\n  width: 13px; height: 13px; flex-shrink: 0;\n}\n.bg-arr svg {\n  width: 13px; height: 13px;\n  transition: transform 0.35s cubic-bezier(0.25,0.46,0.45,0.94);\n}\n.bg-arr svg:last-child {\n  position: absolute;\n  transform: translate(-110%, 110%);\n}\n.bg-card:hover .bg-arr svg:first-child { transform: translate(110%, -110%); }\n.bg-card:hover .bg-arr svg:last-child { transform: translate(0, 0); }\n\n\/* \u2500\u2500 Pagination \u2500\u2500 *\/\n.bg-pagination {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  padding: 40px 0;\n}\n.bg-page-btn {\n  min-width: 40px; height: 40px;\n  border-radius: 6px;\n  border: none;\n  background: #F3F4F6;\n  font-family: 'Inter Tight', sans-serif;\n  font-size: 14px; font-weight: 500;\n  color: #1E2939;\n  cursor: pointer;\n  display: flex; align-items: center; justify-content: center;\n  padding: 0 12px;\n  transition: background 0.2s, color 0.2s;\n}\n.bg-page-btn:hover { background: #E5E7EB; }\n.bg-page-btn.active { background: #201547; color: #ffffff; }\n.bg-page-btn.active:hover { background: #1a1040; }\n.bg-page-btn.dots { cursor: default; background: #F3F4F6; color: #6A7282; }\n.bg-page-btn.dots:hover { background: #F3F4F6; }\n.bg-page-btn[disabled] { color: #c8cbd5; cursor: not-allowed; background: #F3F4F6; }\n.bg-page-btn[disabled]:hover { background: #F3F4F6; }\n\n\/* \u2500\u2500 Hidden \u2500\u2500 *\/\n.bg-card.hidden { display: none; }\n\n\/* \u2500\u2500 Loading \/ Empty States \u2500\u2500 *\/\n.bg-status {\n  grid-column: 1 \/ -1;\n  text-align: center;\n  padding: 60px 20px;\n  font-family: 'Inter Tight', sans-serif;\n  font-size: 15px;\n  color: #6A7282;\n}\n\n\/* \u2500\u2500 Responsive \u2500\u2500 *\/\n@media (max-width: 1024px) {\n  .bg { padding: 0; }\n  .bg-grid { grid-template-columns: repeat(2, 1fr); }\n}\n@media (max-width: 768px) {\n  .bg { padding: 0; }\n  .bg-grid { grid-template-columns: 1fr; }\n  .bg-filters { gap: 12px; padding: 16px 0 20px; }\n\n  .bg-tabs { display: none !important; }\n  .bg-dropdown-wrap { display: block; flex: 1; min-width: 0; transition: opacity 0.2s ease, width 0.25s ease; }\n\n  .bg-search { display: none !important; }\n  .bg-search-icon-btn { display: flex; }\n\n  .bg-filters.search-active .bg-dropdown-wrap { display: none; }\n  .bg-filters.search-active .bg-search-icon-btn { display: none; }\n  .bg-filters.search-active .bg-search-inline { display: flex; }\n}\n@media (max-width: 480px) {\n  .bg-dropdown-btn { font-size: 14px; padding: 10px 14px; min-width: 140px; }\n}\n<\/style>\n\n<div class=\"bg\">\n\n  <div class=\"bg-filters\">\n\n    <div class=\"bg-tabs\" id=\"bgTabs\">\n      <button class=\"bg-tab active\" data-cat=\"all\">All<\/button>\n      <button class=\"bg-tab\" data-cat=\"healthcare\">Healthcare<\/button>\n      <button class=\"bg-tab\" data-cat=\"education\">Education<\/button>\n      <button class=\"bg-tab\" data-cat=\"corporate\">Corporate & Industry<\/button>\n      <button class=\"bg-tab\" data-cat=\"banking\">Banking<\/button>\n      <button class=\"bg-tab\" data-cat=\"retail\">Retail<\/button>\n      <button class=\"bg-tab\" data-cat=\"realestate\">Real Estate<\/button>\n      <button class=\"bg-tab\" data-cat=\"infrastructure\">Public Infrastructure<\/button>\n    <\/div>\n\n    <div class=\"bg-dropdown-wrap\" id=\"bgDropdownWrap\">\n      <button class=\"bg-dropdown-btn\" id=\"bgDropdownBtn\">\n        <span id=\"bgDropdownLabel\">All Industry<\/span>\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"6 9 12 15 18 9\"><\/polyline><\/svg>\n      <\/button>\n      <div class=\"bg-dropdown-menu\" id=\"bgDropdownMenu\">\n        <button class=\"bg-dropdown-item active\" data-cat=\"all\">All Industry<\/button>\n        <button class=\"bg-dropdown-item\" data-cat=\"healthcare\">Healthcare<\/button>\n        <button class=\"bg-dropdown-item\" data-cat=\"education\">Education<\/button>\n        <button class=\"bg-dropdown-item\" data-cat=\"corporate\">Corporate & Industry<\/button>\n        <button class=\"bg-dropdown-item\" data-cat=\"banking\">Banking<\/button>\n        <button class=\"bg-dropdown-item\" data-cat=\"retail\">Retail<\/button>\n        <button class=\"bg-dropdown-item\" data-cat=\"realestate\">Real Estate<\/button>\n        <button class=\"bg-dropdown-item\" data-cat=\"infrastructure\">Public Infrastructure<\/button>\n      <\/div>\n    <\/div>\n\n    <div class=\"bg-right\">\n      <div class=\"bg-search\">\n        <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"><\/circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"><\/line><\/svg>\n        <input type=\"text\" placeholder=\"Search case studies\" id=\"bgSearch\">\n      <\/div>\n\n      <button class=\"bg-search-icon-btn\" id=\"bgSearchIconBtn\" aria-label=\"Search\">\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"><\/circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"><\/line><\/svg>\n      <\/button>\n      <button class=\"bg-sort-btn\" id=\"bgSortBtn\" aria-label=\"Sort\"><\/button>\n    <\/div>\n\n    <div class=\"bg-search-inline\" id=\"bgSearchInline\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"><\/circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"><\/line><\/svg>\n      <input type=\"text\" placeholder=\"Search case studies\" id=\"bgSearchMobileInput\">\n      <button class=\"bg-search-close\" id=\"bgSearchClose\" aria-label=\"Close search\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"><\/line><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"><\/line><\/svg>\n      <\/button>\n    <\/div>\n  <\/div>\n\n  <div class=\"bg-grid\" id=\"bgGrid\"><\/div>\n  <div class=\"bg-pagination\" id=\"bgPagination\"><\/div>\n<\/div>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n(function() {\n\n  \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     CONFIG \u2014 edit these to match your WordPress setup\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n\n  \/\/ Leave as-is if the script runs on the same site as your WP install.\n  \/\/ Otherwise set to your site URL, e.g. 'https:\/\/example.com'\n  var WP_SITE_URL = window.location.origin;\n\n  var POSTS_ENDPOINT = WP_SITE_URL + '\/wp-json\/wp\/v2\/posts';\n  var CATEGORIES_ENDPOINT = WP_SITE_URL + '\/wp-json\/wp\/v2\/categories';\n\n  \/\/ Map each tab's data-cat key to the REAL slug of your WordPress category.\n  \/\/ Go to Posts \u2192 Categories in wp-admin to find\/set these slugs.\n  var CATEGORY_MAP = {\n    healthcare:     'healthcare',\n    education:      'education',\n    corporate:      'corporate-industry',\n    banking:        'banking',\n    retail:         'retail',\n    realestate:     'real-estate',\n    infrastructure: 'public-infrastructure'\n  };\n\n  var PER_PAGE = 9;\n  var WORDS_PER_MIN = 200;\n\n  \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     STATE\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n\n  var curPage = 1;\n  var activeCat = 'all';\n  var allArticles = []; \/\/ populated after fetch\n\n  var grid = document.getElementById('bgGrid');\n  var pagination = document.getElementById('bgPagination');\n  var tabs = document.querySelectorAll('.bg-tab');\n  var dropdownItems = document.querySelectorAll('.bg-dropdown-item');\n  var searchInput = document.getElementById('bgSearch');\n  var searchMobileInput = document.getElementById('bgSearchMobileInput');\n\n  var arrowSVG = '<span class=\"bg-arr\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"7\" y1=\"17\" x2=\"17\" y2=\"7\"><\/line><polyline points=\"7 7 17 7 17 17\"><\/polyline><\/svg><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"7\" y1=\"17\" x2=\"17\" y2=\"7\"><\/line><polyline points=\"7 7 17 7 17 17\"><\/polyline><\/svg><\/span>';\n\n  \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     HELPERS\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n\n  function decodeHTML(str) {\n    var txt = document.createElement('textarea');\n    txt.innerHTML = str;\n    return txt.value;\n  }\n\n  function stripTags(html) {\n    var d = document.createElement('div');\n    d.innerHTML = html;\n    return d.textContent || d.innerText || '';\n  }\n\n  function formatDate(isoDate) {\n    var d = new Date(isoDate);\n    var dd = String(d.getDate()).padStart(2, '0');\n    var mm = String(d.getMonth() + 1).padStart(2, '0');\n    var yyyy = d.getFullYear();\n    return dd + '.' + mm + '.' + yyyy;\n  }\n\n  function estimateReadTime(html) {\n    var text = stripTags(html);\n    var words = text.trim().split(\/\\s+\/).filter(Boolean).length;\n    var mins = Math.max(1, Math.round(words \/ WORDS_PER_MIN));\n    return mins + ' MIN READ';\n  }\n\n  \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     FETCH: categories then posts\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n\n  function showStatus(message) {\n    grid.innerHTML = '<div class=\"bg-status\">' + message + '<\/div>';\n    pagination.innerHTML = '';\n  }\n\n  showStatus('Loading case studies\u2026');\n\n  fetch(CATEGORIES_ENDPOINT + '?per_page=100')\n    .then(function(res) { return res.json(); })\n    .then(function(categories) {\n      \/\/ slug -> {id, name}\n      var slugToCategory = {};\n      categories.forEach(function(c) {\n        slugToCategory[c.slug] = { id: c.id, name: c.name };\n      });\n\n      \/\/ Build reverse lookup: WP category id -> our tab data-cat key\n      var catIdToTabKey = {};\n      Object.keys(CATEGORY_MAP).forEach(function(tabKey) {\n        var slug = CATEGORY_MAP[tabKey];\n        if (slugToCategory[slug]) {\n          catIdToTabKey[slugToCategory[slug].id] = { tabKey: tabKey, name: slugToCategory[slug].name };\n        }\n      });\n\n      return fetch(POSTS_ENDPOINT + '?per_page=100&_embed')\n        .then(function(res) {\n          if (!res.ok) throw new Error('Failed to fetch posts (' + res.status + ')');\n          return res.json();\n        })\n        .then(function(posts) {\n          allArticles = posts.map(function(post) {\n            \/\/ Find first matching mapped category for this post\n            var postCatIds = post.categories || [];\n            var matched = null;\n            for (var i = 0; i < postCatIds.length; i++) {\n              if (catIdToTabKey[postCatIds[i]]) { matched = catIdToTabKey[postCatIds[i]]; break; }\n            }\n\n            var featuredImg = null;\n            try {\n              featuredImg = post._embedded['wp:featuredmedia'][0].source_url;\n            } catch (e) { featuredImg = null; }\n\n            return {\n              cat: matched ? matched.tabKey : '',\n              tag: matched ? matched.name : (post._embedded && post._embedded['wp:term'] && post._embedded['wp:term'][0] && post._embedded['wp:term'][0][0] ? post._embedded['wp:term'][0][0].name : 'Blog'),\n              title: decodeHTML(post.title.rendered),\n              link: post.link,\n              date: formatDate(post.date),\n              readTime: estimateReadTime(post.content.rendered),\n              img: featuredImg\n            };\n          });\n\n          if (allArticles.length === 0) {\n            showStatus('No case studies found.');\n            return;\n          }\n\n          renderCards();\n          goToPage(1);\n        });\n    })\n    .catch(function(err) {\n      console.error('WP fetch error:', err);\n      showStatus('Could not load case studies. Please try again later.');\n    });\n\n  \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     RENDER CARDS (from fetched data)\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n\n  function renderCards() {\n    grid.innerHTML = '';\n    allArticles.forEach(function(a, idx) {\n      var el = document.createElement('div');\n      el.className = 'bg-card';\n      el.setAttribute('data-cat', a.cat);\n      el.setAttribute('data-title', a.title.toLowerCase());\n      el.setAttribute('data-idx', idx);\n\n      var imgHTML = a.img\n        ? '<img class=\"lazyload\" decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-orig-src=\"' + a.img + '\" alt=\"' + a.title.replace(\/\"\/g, '\"') + '\" loading=\"lazy\">'\n        : '';\n\n      el.innerHTML =\n        '<div class=\"bg-card-img\">' + imgHTML + '<div class=\"bg-card-img-overlay\"><\/div><span class=\"bg-card-tag\">' + a.tag + '<\/span><\/div>' +\n        '<div class=\"bg-card-body\"><div class=\"bg-card-meta\"><span>' + a.date + '<\/span><span class=\"bg-meta-dot\"><\/span><span>' + a.readTime + '<\/span><\/div>' +\n        '<h3 class=\"bg-card-title\">' + a.title + '<\/h3><a href=\"' + a.link + '\" class=\"bg-read\">Read Now ' + arrowSVG + '<\/a><\/div>';\n      grid.appendChild(el);\n    });\n  }\n\n  \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     FILTER \/ SEARCH \/ SORT \/ PAGINATION (same logic as before)\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n\n  var allCards = function() { return Array.prototype.slice.call(document.querySelectorAll('.bg-card')); };\n\n  function getSearchQuery() {\n    var q1 = searchInput ? searchInput.value.toLowerCase().trim() : '';\n    var q2 = searchMobileInput ? searchMobileInput.value.toLowerCase().trim() : '';\n    return q1 || q2;\n  }\n\n  function getFiltered() {\n    var q = getSearchQuery();\n    return allCards().filter(function(card) {\n      var matchCat = (activeCat === 'all' || card.getAttribute('data-cat') === activeCat);\n      var title = card.getAttribute('data-title');\n      var tagEl = card.querySelector('.bg-card-tag');\n      var tag = tagEl ? tagEl.textContent.toLowerCase() : '';\n      var matchQ = !q || title.indexOf(q) !== -1 || tag.indexOf(q) !== -1;\n      return matchCat && matchQ;\n    });\n  }\n\n  function renderPagination(totalPages, page) {\n    pagination.innerHTML = '';\n    if (totalPages <= 1) return;\n    var prevBtn = document.createElement('button');\n    prevBtn.className = 'bg-page-btn'; prevBtn.textContent = 'Prev';\n    prevBtn.disabled = (page === 1);\n    prevBtn.addEventListener('click', function() { goToPage(page - 1); });\n    pagination.appendChild(prevBtn);\n    var pages = [];\n    if (totalPages <= 6) { for (var i = 1; i <= totalPages; i++) pages.push(i); }\n    else {\n      pages.push(1, 2, 3);\n      if (page > 4) pages = [1, '...', page - 1, page, page + 1];\n      if (page <= 4) pages = [1, 2, 3, '...'];\n      if (page >= totalPages - 3) pages = [1, '...', totalPages - 2, totalPages - 1];\n      if (pages.indexOf(totalPages) === -1) pages.push('...', totalPages);\n      var clean = []; var prev = null;\n      pages.forEach(function(p) { if (p !== prev || p === '...') { clean.push(p); prev = p; } });\n      pages = []; prev = null;\n      clean.forEach(function(p) { if (p === '...' && prev === '...') return; pages.push(p); prev = p; });\n    }\n    pages.forEach(function(p) {\n      var btn = document.createElement('button');\n      btn.className = 'bg-page-btn';\n      if (p === '...') { btn.classList.add('dots'); btn.textContent = '...'; }\n      else { btn.textContent = p; if (p === page) btn.classList.add('active'); btn.addEventListener('click', function() { goToPage(p); }); }\n      pagination.appendChild(btn);\n    });\n    var nextBtn = document.createElement('button');\n    nextBtn.className = 'bg-page-btn'; nextBtn.textContent = 'Next';\n    nextBtn.disabled = (page === totalPages);\n    nextBtn.addEventListener('click', function() { goToPage(page + 1); });\n    pagination.appendChild(nextBtn);\n  }\n\n  function goToPage(page) {\n    var filtered = getFiltered();\n    var totalPages = Math.ceil(filtered.length \/ PER_PAGE);\n    curPage = Math.min(Math.max(page, 1), totalPages || 1);\n    allCards().forEach(function(c) { c.classList.add('hidden'); });\n    var start = (curPage - 1) * PER_PAGE;\n    filtered.slice(start, start + PER_PAGE).forEach(function(c) { c.classList.remove('hidden'); });\n    renderPagination(totalPages, curPage);\n\n    if (filtered.length === 0) {\n      var existing = grid.querySelector('.bg-status');\n      if (!existing) {\n        var status = document.createElement('div');\n        status.className = 'bg-status';\n        status.textContent = 'No case studies match your filters.';\n        grid.appendChild(status);\n      }\n    } else {\n      var statusEl = grid.querySelector('.bg-status');\n      if (statusEl) statusEl.remove();\n    }\n  }\n\n  function setCategory(cat) {\n    activeCat = cat;\n    tabs.forEach(function(t) { t.classList.toggle('active', t.getAttribute('data-cat') === cat); });\n    dropdownItems.forEach(function(d) { d.classList.toggle('active', d.getAttribute('data-cat') === cat); });\n    var activeItem = document.querySelector('.bg-dropdown-item.active');\n    if (activeItem) document.getElementById('bgDropdownLabel').textContent = activeItem.textContent;\n    curPage = 1;\n    goToPage(1);\n  }\n\n  function applyFilters() { curPage = 1; goToPage(1); }\n\n  tabs.forEach(function(tab) {\n    tab.addEventListener('click', function() { setCategory(tab.getAttribute('data-cat')); });\n  });\n\n  var dropdownWrap = document.getElementById('bgDropdownWrap');\n  var dropdownBtn = document.getElementById('bgDropdownBtn');\n\n  dropdownBtn.addEventListener('click', function(e) {\n    e.stopPropagation();\n    dropdownWrap.classList.toggle('open');\n  });\n\n  dropdownItems.forEach(function(item) {\n    item.addEventListener('click', function() {\n      dropdownWrap.classList.remove('open');\n      setCategory(item.getAttribute('data-cat'));\n    });\n  });\n\n  document.addEventListener('click', function(e) {\n    if (!dropdownWrap.contains(e.target)) dropdownWrap.classList.remove('open');\n  });\n\n  searchInput.addEventListener('input', function() {\n    if (searchMobileInput) searchMobileInput.value = searchInput.value;\n    applyFilters();\n  });\n  searchMobileInput.addEventListener('input', function() {\n    if (searchInput) searchInput.value = searchMobileInput.value;\n    applyFilters();\n  });\n\n  var searchIconBtn = document.getElementById('bgSearchIconBtn');\n  var searchInline = document.getElementById('bgSearchInline');\n  var searchClose = document.getElementById('bgSearchClose');\n  var filtersBar = document.querySelector('.bg-filters');\n\n  searchIconBtn.addEventListener('click', function() {\n    filtersBar.classList.add('search-active');\n    requestAnimationFrame(function() {\n      requestAnimationFrame(function() {\n        searchInline.classList.add('visible');\n        searchMobileInput.focus();\n      });\n    });\n  });\n\n  searchClose.addEventListener('click', function() {\n    searchInline.classList.remove('visible');\n    setTimeout(function() {\n      filtersBar.classList.remove('search-active');\n      searchMobileInput.value = '';\n      if (searchInput) searchInput.value = '';\n      applyFilters();\n    }, 250);\n  });\n\n  var sortIcons = [\n    '<svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"4\" y1=\"6\" x2=\"14\" y2=\"6\"><\/line><line x1=\"4\" y1=\"12\" x2=\"11\" y2=\"12\"><\/line><line x1=\"4\" y1=\"18\" x2=\"8\" y2=\"18\"><\/line><line x1=\"19\" y1=\"16\" x2=\"19\" y2=\"4\"><\/line><polyline points=\"16 7 19 4 22 7\"><\/polyline><\/svg>',\n    '<svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"4\" y1=\"6\" x2=\"14\" y2=\"6\"><\/line><line x1=\"4\" y1=\"12\" x2=\"11\" y2=\"12\"><\/line><line x1=\"4\" y1=\"18\" x2=\"8\" y2=\"18\"><\/line><line x1=\"19\" y1=\"8\" x2=\"19\" y2=\"20\"><\/line><polyline points=\"16 17 19 20 22 17\"><\/polyline><\/svg>',\n    '<svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><text x=\"4\" y=\"10\" font-size=\"8\" fill=\"currentColor\" stroke=\"none\" font-family=\"Inter Tight,sans-serif\" font-weight=\"600\">A<\/text><text x=\"4\" y=\"20\" font-size=\"8\" fill=\"currentColor\" stroke=\"none\" font-family=\"Inter Tight,sans-serif\" font-weight=\"600\">Z<\/text><line x1=\"18\" y1=\"8\" x2=\"18\" y2=\"20\"><\/line><polyline points=\"15 17 18 20 21 17\"><\/polyline><\/svg>',\n    '<svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><text x=\"4\" y=\"10\" font-size=\"8\" fill=\"currentColor\" stroke=\"none\" font-family=\"Inter Tight,sans-serif\" font-weight=\"600\">A<\/text><text x=\"4\" y=\"20\" font-size=\"8\" fill=\"currentColor\" stroke=\"none\" font-family=\"Inter Tight,sans-serif\" font-weight=\"600\">Z<\/text><line x1=\"18\" y1=\"16\" x2=\"18\" y2=\"4\"><\/line><polyline points=\"15 7 18 4 21 7\"><\/polyline><\/svg>'\n  ];\n  var sortState = 0;\n  var sortBtn = document.getElementById('bgSortBtn');\n  sortBtn.innerHTML = sortIcons[0];\n  sortBtn.addEventListener('click', function() {\n    sortState = (sortState + 1) % sortIcons.length;\n    sortBtn.innerHTML = sortIcons[sortState];\n    var arr = allCards();\n    arr.sort(function(a, b) {\n      var tA = a.querySelector('.bg-card-title').textContent;\n      var tB = b.querySelector('.bg-card-title').textContent;\n      return (sortState % 2 === 0) ? tA.localeCompare(tB) : tB.localeCompare(tA);\n    });\n    arr.forEach(function(c) { grid.appendChild(c); });\n    applyFilters();\n  });\n\n})();\n});\n<\/script><\/div><\/div><\/div><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"100-width.php","meta":{"footnotes":""},"class_list":["post-7893","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/cosignonline.com\/beta_cosign\/wp-json\/wp\/v2\/pages\/7893","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cosignonline.com\/beta_cosign\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cosignonline.com\/beta_cosign\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cosignonline.com\/beta_cosign\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/cosignonline.com\/beta_cosign\/wp-json\/wp\/v2\/comments?post=7893"}],"version-history":[{"count":0,"href":"https:\/\/cosignonline.com\/beta_cosign\/wp-json\/wp\/v2\/pages\/7893\/revisions"}],"wp:attachment":[{"href":"https:\/\/cosignonline.com\/beta_cosign\/wp-json\/wp\/v2\/media?parent=7893"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}