{"id":886,"date":"2026-08-31T14:52:36","date_gmt":"2026-08-31T14:52:36","guid":{"rendered":"https:\/\/new.be-ant.com\/?page_id=886"},"modified":"2026-08-31T15:03:29","modified_gmt":"2026-08-31T15:03:29","slug":"work","status":"publish","type":"page","link":"https:\/\/new.be-ant.com\/?page_id=886","title":{"rendered":"Work1"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"886\" class=\"elementor elementor-886\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2cd1b49 e-flex e-con-boxed e-con e-parent\" data-id=\"2cd1b49\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-64a6c1b elementor-widget elementor-widget-html\" data-id=\"64a6c1b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!--\n  beAnt \u2014 Work page, packaged for a WordPress Custom HTML block.\n  Same conventions as wordpress-home.html \u2014 see that file's header comment\n  for the full reasoning on scoping, the breakout, and the dropped\n  cross-page veil.\n\n  REPLACE BEFORE GOING LIVE\n  Images:\n    REPLACE_WITH_WP_MEDIA\/logo-teal.png\n    REPLACE_WITH_WP_MEDIA\/logo-teal-white.png\n    REPLACE_WITH_WP_MEDIA\/atlas-operations.webp\n    REPLACE_WITH_WP_MEDIA\/civic-mobile.webp\n    REPLACE_WITH_WP_MEDIA\/sana-brand.webp\n    REPLACE_WITH_WP_MEDIA\/hero-websites.webp\n    REPLACE_WITH_WP_MEDIA\/hero-web-apps.webp\n    REPLACE_WITH_WP_MEDIA\/hero-ai.webp\n    REPLACE_WITH_WP_MEDIA\/hero-branding.webp\n    REPLACE_WITH_WP_MEDIA\/ant-leaf.webp\n  Links: every href=\"#REPLACE_WITH_..._URL\" below \u2014 each project card\n  points at REPLACE_WITH_PROJECT_URL_<slug>, since the original site's\n  seven case studies were one shared template (project.html?slug=...);\n  in WordPress each becomes its own page, so point every card at its\n  real URL once those pages exist.\n-->\n\n<style>\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:wght@400;500;600&family=Manrope:wght@400;500;600;700&display=swap');\n\n  #ba-root{\n    --ba-ink:#101111; --ba-paper:#f3f2ed; --ba-white:#fff; --ba-teal:#21c9b4;\n    --ba-muted:#aaa9a4; --ba-line:#d8d7d1; --ba-nav-gutter:4.4vw;\n  }\n  #ba-root, #ba-root *, #ba-root *:before, #ba-root *:after{ box-sizing:border-box; }\n  #ba-root{\n    width:100vw; max-width:100vw; position:relative; left:50%; right:50%;\n    margin-left:-50vw; margin-right:-50vw; overflow-x:hidden;\n    background:var(--ba-white); color:var(--ba-ink);\n    font-family:\"DM Sans\",-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;\n    font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased;\n  }\n  #ba-root a{ color:inherit; text-decoration:none; background:none; }\n  #ba-root h1, #ba-root h2, #ba-root h3, #ba-root h4, #ba-root h5, #ba-root h6, #ba-root p{\n    margin:0; padding:0; color:inherit; font-family:inherit; font-size:inherit;\n    font-weight:inherit; font-style:inherit; line-height:inherit; letter-spacing:inherit;\n    text-align:inherit; text-transform:inherit;\n  }\n  #ba-root ul, #ba-root ol{ margin:0; padding:0; list-style:none; color:inherit; }\n  #ba-root li{ color:inherit; }\n  #ba-root button{\n    font:inherit; color:inherit; background:none; border:0; padding:0; margin:0;\n    -webkit-appearance:none; appearance:none; cursor:pointer; text-align:inherit;\n  }\n  #ba-root img{ max-width:100%; display:block; border:0; }\n  #ba-root input, #ba-root textarea, #ba-root select{ font-family:inherit; color:inherit; }\n\n  \/* ---- header \/ nav ---- *\/\n  #ba-root .ba-site-header{\n    height:86px; padding:0 var(--ba-nav-gutter); display:flex; align-items:center; gap:48px;\n    background:rgba(243,242,237,.97); backdrop-filter:blur(14px);\n    position:fixed; z-index:20; top:0; left:0; right:0; border-bottom:1px solid rgba(0,0,0,.08);\n  }\n  #ba-root .ba-logo{ font-family:Manrope,sans-serif; display:flex; align-items:center; line-height:1; }\n  #ba-root .ba-logo-image{ display:block; width:97px; height:auto; object-fit:contain; }\n  #ba-root .ba-site-header nav{ display:flex; gap:35px; margin-left:auto; font-size:14px; position:relative; }\n  #ba-root .ba-site-header nav a{ transition:color .2s; }\n  #ba-root .ba-nav-contact-mobile{ display:none; }\n  #ba-root .ba-site-header nav a:hover{ color:var(--ba-teal); }\n  #ba-root .ba-site-header nav a.ba-active{ color:var(--ba-teal); }\n  #ba-root .ba-nav-indicator{\n    position:absolute; left:0; bottom:-8px; height:1.5px; background:var(--ba-teal); opacity:0;\n    transition:transform .35s cubic-bezier(.22,.61,.36,1), width .35s cubic-bezier(.22,.61,.36,1), opacity .2s ease;\n    pointer-events:none;\n  }\n  #ba-root .ba-header-cta{\n    background:var(--ba-ink); color:#fff; padding:14px 20px; font-size:13px;\n    border:1px solid var(--ba-ink); transition:.25s; display:inline-block;\n  }\n  #ba-root .ba-header-cta:hover{ background:var(--ba-teal); color:var(--ba-ink); border-color:var(--ba-teal); }\n  #ba-root .ba-header-cta span{ margin-left:18px; display:inline-block; transition:transform .3s cubic-bezier(.22,.61,.36,1); }\n  #ba-root .ba-header-cta:hover span{ transform:translate(3px,-3px); }\n  #ba-root .ba-menu-toggle{ display:none; }\n  #ba-root .ba-kicker{\n    display:inline-flex; align-items:center; gap:10px; text-transform:uppercase; letter-spacing:.16em;\n    font-size:11px; font-weight:600; margin-bottom:28px; color:#666;\n  }\n  #ba-root .ba-reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }\n  #ba-root .ba-reveal.ba-visible{ opacity:1; transform:none; }\n  @media (prefers-reduced-motion:reduce){ #ba-root .ba-reveal{ opacity:1; transform:none; transition:none; } }\n  #ba-root .ba-motif{ display:inline-block; flex:none; border-left:1.4px solid currentColor; border-top:1.4px solid currentColor; transform:rotate(45deg); }\n\n  \/* ---- work hero ---- *\/\n  #ba-root .ba-work-hero{ padding:150px 8.5vw 56px; background:var(--ba-ink); color:#fff; }\n  #ba-root .ba-work-portfolio-intro{ display:grid; grid-template-columns:1.3fr .8fr; gap:48px; align-items:end; }\n  #ba-root .ba-work-intro-head .ba-kicker{ margin-bottom:18px; color:#8d908e; }\n  #ba-root .ba-work-intro-head h1{ font:500 clamp(40px,5vw,62px)\/1.02 Manrope,sans-serif; letter-spacing:-.05em; color:#fff; }\n  #ba-root .ba-work-intro-head h1 em{ font-weight:400; color:var(--ba-teal); font-style:normal; }\n  #ba-root .ba-work-portfolio-copy{ font-size:16px; line-height:1.6; color:var(--ba-muted); padding-bottom:6px; }\n\n  \/* ---- project rows ---- *\/\n  #ba-root .ba-work-portfolio{ background:var(--ba-ink); color:#fff; padding:0 8.5vw; }\n  #ba-root .ba-work-grid{ display:flex; flex-direction:column; gap:clamp(14px,1.6vw,22px); }\n  #ba-root .ba-work-row{ display:flex; gap:clamp(14px,1.6vw,22px); height:clamp(300px,27vw,390px); }\n  #ba-root .ba-work-project{\n    position:relative; overflow:hidden; min-width:0; flex:5 1 0%;\n    transition:flex-grow .7s cubic-bezier(.65,0,.35,1), opacity .4s ease;\n  }\n  #ba-root .ba-work-row:nth-child(odd) .ba-work-project:nth-child(1){ flex-grow:6; }\n  #ba-root .ba-work-row:nth-child(odd) .ba-work-project:nth-child(2){ flex-grow:4; }\n  #ba-root .ba-work-row:nth-child(even) .ba-work-project:nth-child(1){ flex-grow:4; }\n  #ba-root .ba-work-row:nth-child(even) .ba-work-project:nth-child(2){ flex-grow:6; }\n  #ba-root .ba-work-row:has(.ba-work-project:nth-child(1):hover) .ba-work-project:nth-child(1){ flex-grow:6; }\n  #ba-root .ba-work-row:has(.ba-work-project:nth-child(1):hover) .ba-work-project:nth-child(2){ flex-grow:4; }\n  #ba-root .ba-work-row:has(.ba-work-project:nth-child(2):hover) .ba-work-project:nth-child(1){ flex-grow:4; }\n  #ba-root .ba-work-row:has(.ba-work-project:nth-child(2):hover) .ba-work-project:nth-child(2){ flex-grow:6; }\n  #ba-root .ba-work-project a{ display:block; position:relative; height:100%; }\n  #ba-root .ba-work-project img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s cubic-bezier(.22,.61,.36,1); }\n  #ba-root .ba-work-project-content{\n    position:absolute; left:0; right:0; bottom:0; padding:20px 22px;\n    background:linear-gradient(180deg, transparent 0%, rgba(4,5,6,.08) 38%, rgba(4,5,6,.74) 100%);\n    transition:background .4s ease;\n  }\n  #ba-root .ba-work-project-content h2{ font:500 clamp(18px,1.6vw,23px)\/1.2 Manrope,sans-serif; letter-spacing:-.015em; color:#fff; transition:transform .4s cubic-bezier(.22,.61,.36,1); }\n  #ba-root .ba-work-cat{ display:block; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ba-muted); margin-top:8px; transition:color .4s ease; }\n  #ba-root .ba-work-view{ display:inline-flex; align-items:center; gap:10px; font-size:13px; color:var(--ba-teal); margin-top:14px; opacity:0; transform:translateY(6px); transition:opacity .35s ease, transform .35s ease; }\n  #ba-root .ba-work-view b{ display:inline-block; transition:transform .35s cubic-bezier(.22,.61,.36,1); }\n  #ba-root .ba-work-project a:hover img{ transform:scale(1.045); }\n  #ba-root .ba-work-project a:hover .ba-work-project-content{ background:linear-gradient(180deg, transparent 0%, rgba(4,5,6,.2) 28%, rgba(4,5,6,.88) 100%); }\n  #ba-root .ba-work-project a:hover h2{ transform:translateY(-3px); }\n  #ba-root .ba-work-project a:hover .ba-work-cat{ color:var(--ba-teal); }\n  #ba-root .ba-work-project a:hover .ba-work-view{ opacity:1; transform:translateY(0); }\n  #ba-root .ba-work-project a:hover .ba-work-view b{ transform:translate(3px,-3px); }\n\n  \/* ---- transition line ---- *\/\n  #ba-root .ba-work-transition{ background:var(--ba-ink); padding:56px 8.5vw 68px; }\n  #ba-root .ba-work-transition p{ display:flex; align-items:flex-start; gap:14px; font:500 clamp(22px,2.6vw,32px)\/1.25 Manrope,sans-serif; letter-spacing:-.02em; color:#5a5d59; }\n  #ba-root .ba-work-transition .ba-motif{ width:9px; height:9px; color:var(--ba-teal); margin-top:11px; flex-shrink:0; }\n\n  \/* ---- closing quote feature ---- *\/\n  #ba-root .ba-ant-feature{ position:relative; min-height:clamp(380px,44vw,560px); overflow:hidden; background:#050505; }\n  #ba-root .ba-ant-feature-image{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:20% center; display:block; }\n  #ba-root .ba-ant-feature-shade{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(3,4,4,.1) 0%, rgba(3,4,4,.5) 55%, rgba(3,4,4,.72) 100%); }\n  #ba-root .ba-ant-feature-quote{\n    position:relative; z-index:2; min-height:clamp(380px,44vw,560px); display:flex; flex-direction:column;\n    justify-content:center; align-items:flex-end; text-align:right; padding:0 8.5vw; margin:0;\n  }\n  #ba-root .ba-ant-feature-quote p{ font:500 clamp(26px,3.4vw,50px)\/1.28 Manrope,sans-serif; letter-spacing:-.03em; color:#fff; max-width:620px; }\n  #ba-root .ba-ant-feature-quote p em{ font-style:normal; color:var(--ba-teal); }\n  #ba-root .ba-ant-feature-quote cite{ display:block; margin-top:20px; font-style:normal; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:#8d908e; }\n\n  @media (max-width:1024px){\n    #ba-root .ba-work-portfolio-intro{ grid-template-columns:1fr; gap:20px; align-items:start; }\n    #ba-root .ba-work-row{ flex-direction:column; height:auto; }\n    #ba-root .ba-work-row .ba-work-project{ flex:none !important; }\n    #ba-root .ba-work-project a{ aspect-ratio:1.3; height:auto; }\n    #ba-root .ba-ant-feature{ min-height:420px; }\n    #ba-root .ba-ant-feature-image{ object-position:32% center; }\n    #ba-root .ba-ant-feature-quote{ min-height:420px; align-items:flex-start; text-align:left; }\n    #ba-root .ba-ant-feature-quote p{ font-size:clamp(26px,7vw,34px); max-width:420px; }\n    #ba-root .ba-work-hero{ padding-top:130px; }\n    \/* These four containers hardcode their own horizontal padding rather\n       than using a shared .section class, so they need their own\n       breakpoint-matched reduction instead of inheriting one. *\/\n    #ba-root .ba-work-hero, #ba-root .ba-work-portfolio, #ba-root .ba-work-transition, #ba-root .ba-ant-feature-quote{\n      padding-left:7vw; padding-right:7vw;\n    }\n  }\n  @media (max-width:480px){\n    #ba-root .ba-work-hero, #ba-root .ba-work-portfolio, #ba-root .ba-work-transition, #ba-root .ba-ant-feature-quote{\n      padding-left:6vw; padding-right:6vw;\n    }\n  }\n  @media (prefers-reduced-motion:reduce){\n    #ba-root .ba-work-project img, #ba-root .ba-work-project-content, #ba-root .ba-work-project-content h2,\n    #ba-root .ba-work-cat, #ba-root .ba-work-view, #ba-root .ba-work-view b, #ba-root .ba-work-project{ transition:none; }\n  }\n\n  \/* ---- footer ---- *\/\n  #ba-root .ba-footer{ background:#0e1010; color:#fff; padding:75px var(--ba-nav-gutter) 35px; }\n  #ba-root .ba-footer-top{ display:flex; justify-content:space-between; align-items:flex-start; padding-bottom:75px; border-bottom:1px solid #353737; }\n  #ba-root .ba-footer-top p{ color:#969996; max-width:600px; text-align:right; line-height:1.8; font-size:13px; }\n  #ba-root .ba-footer-bottom{ padding-top:28px; display:grid; grid-template-columns:1fr auto 1fr; gap:40px; font-size:11px; color:#858985; }\n  #ba-root .ba-footer-bottom div{ display:flex; gap:25px; color:#ddd; }\n  #ba-root .ba-footer-bottom div a{ transition:color .2s; }\n  #ba-root .ba-footer-bottom div a:hover{ color:var(--ba-teal); }\n  #ba-root .ba-footer-bottom span{ text-align:right; }\n  #ba-root .ba-footer-mark{ display:inline-flex; align-items:center; justify-content:flex-end; gap:8px; }\n  #ba-root .ba-footer-mark .ba-motif{ width:8px; height:8px; color:#6c706e; }\n\n  @media (max-width:1024px){\n    #ba-root .ba-footer-top, #ba-root .ba-footer-bottom{ display:flex; flex-direction:column; }\n    #ba-root .ba-footer-top p{ text-align:left; }\n    #ba-root .ba-footer-bottom span, #ba-root .ba-footer-mark{ text-align:left; justify-content:flex-start; }\n  }\n\n  \/* ---- mobile nav ---- *\/\n  @media (max-width:1024px){\n    #ba-root .ba-site-header{ height:70px; }\n    #ba-root .ba-site-header nav{\n      position:fixed; inset:70px 0 auto; background:var(--ba-paper); padding:40px 7vw; display:none;\n      flex-direction:column; font-size:21px; z-index:19; color:var(--ba-ink);\n    }\n    #ba-root .ba-nav-contact-mobile{ display:block; }\n    #ba-root .ba-site-header nav.ba-open{ display:flex; }\n    #ba-root .ba-nav-indicator{ display:none; }\n    #ba-root .ba-header-cta{ display:none; }\n    #ba-root .ba-menu-toggle{ display:block; margin-left:auto; width:35px; height:30px; }\n    #ba-root .ba-menu-toggle span{ display:block; height:1px; background:#111; margin:8px 0; }\n  }\n  @media (max-width:480px){ #ba-root .ba-logo-image{ width:80px; } }\n<\/style>\n\n<div id=\"ba-root\">\n\n  <header class=\"ba-site-header\">\n    <a class=\"ba-logo\" href=\"#REPLACE_WITH_HOME_PAGE_URL\" aria-label=\"beAnt home\">\n      <img decoding=\"async\" class=\"ba-logo-image\" src=\"REPLACE_WITH_WP_MEDIA\/logo-teal.png\" alt=\"beAnt\">\n    <\/a>\n    <button class=\"ba-menu-toggle\" type=\"button\" aria-expanded=\"false\" aria-controls=\"ba-nav\"><span><\/span><span><\/span><\/button>\n    <nav id=\"ba-nav\" aria-label=\"Main navigation\">\n      <a href=\"#REPLACE_WITH_HOME_PAGE_URL\">Home<\/a>\n      <a href=\"#\" class=\"ba-active\" aria-current=\"page\">Work<\/a>\n      <a href=\"#REPLACE_WITH_SERVICES_URL\">Services<\/a>\n      <a href=\"#REPLACE_WITH_ABOUT_PAGE_URL\">About<\/a>\n      <a href=\"#REPLACE_WITH_BLOG_PAGE_URL\">Blog<\/a>\n      <a href=\"#REPLACE_WITH_CONTACT_PAGE_URL\" class=\"ba-nav-contact-mobile\">Contact<\/a>\n    <\/nav>\n    <a class=\"ba-header-cta\" href=\"#REPLACE_WITH_CONTACT_PAGE_URL\">Start a project <span>&#8599;<\/span><\/a>\n  <\/header>\n\n  <main>\n    <section class=\"ba-work-hero\">\n      <div class=\"ba-work-portfolio-intro ba-reveal\">\n        <div class=\"ba-work-intro-head\">\n          <p class=\"ba-kicker\">01 \/ Selected work<\/p>\n          <h1>Things we&rsquo;ve<br><em>built.<\/em><\/h1>\n        <\/div>\n        <p class=\"ba-work-portfolio-copy\">Digital products, websites, identities and systems created to solve real problems.<\/p>\n      <\/div>\n    <\/section>\n\n    <section class=\"ba-work-portfolio\">\n      <div class=\"ba-work-grid\">\n        <div class=\"ba-work-row\">\n          <article class=\"ba-work-project ba-reveal\">\n            <a href=\"#REPLACE_WITH_PROJECT_URL_atlas-operations\" aria-label=\"View Atlas Operations project\">\n              <img decoding=\"async\" src=\"REPLACE_WITH_WP_MEDIA\/atlas-operations.webp\" alt=\"Atlas Operations dashboard shown across desktop screens\" loading=\"lazy\">\n              <div class=\"ba-work-project-content\">\n                <h2>Atlas Operations<\/h2>\n                <span class=\"ba-work-cat\">Web Application<\/span>\n                <span class=\"ba-work-view\">View project <b>&#8599;<\/b><\/span>\n              <\/div>\n            <\/a>\n          <\/article>\n          <article class=\"ba-work-project ba-reveal\">\n            <a href=\"#REPLACE_WITH_PROJECT_URL_civic-plus\" aria-label=\"View Civic+ project\">\n              <img decoding=\"async\" src=\"REPLACE_WITH_WP_MEDIA\/civic-mobile.webp\" alt=\"Civic+ city services app shown on mobile phones\" loading=\"lazy\">\n              <div class=\"ba-work-project-content\">\n                <h2>Civic+<\/h2>\n                <span class=\"ba-work-cat\">Mobile Application<\/span>\n                <span class=\"ba-work-view\">View project <b>&#8599;<\/b><\/span>\n              <\/div>\n            <\/a>\n          <\/article>\n        <\/div>\n\n        <div class=\"ba-work-row\">\n          <article class=\"ba-work-project ba-reveal\">\n            <a href=\"#REPLACE_WITH_PROJECT_URL_sana-botanicals\" aria-label=\"View Sana Botanicals project\">\n              <img decoding=\"async\" src=\"REPLACE_WITH_WP_MEDIA\/sana-brand.webp\" alt=\"Sana Botanicals brand identity and packaging\" loading=\"lazy\">\n              <div class=\"ba-work-project-content\">\n                <h2>Sana Botanicals<\/h2>\n                <span class=\"ba-work-cat\">Branding &amp; Design<\/span>\n                <span class=\"ba-work-view\">View project <b>&#8599;<\/b><\/span>\n              <\/div>\n            <\/a>\n          <\/article>\n          <article class=\"ba-work-project ba-reveal\">\n            <a href=\"#REPLACE_WITH_PROJECT_URL_digital-product\" aria-label=\"View website design project\">\n              <img decoding=\"async\" src=\"REPLACE_WITH_WP_MEDIA\/hero-websites.webp\" alt=\"A colourful website displayed on a laptop and phone\" loading=\"lazy\">\n              <div class=\"ba-work-project-content\">\n                <h2>Digital Product<\/h2>\n                <span class=\"ba-work-cat\">Website<\/span>\n                <span class=\"ba-work-view\">View project <b>&#8599;<\/b><\/span>\n              <\/div>\n            <\/a>\n          <\/article>\n        <\/div>\n\n        <div class=\"ba-work-row\">\n          <article class=\"ba-work-project ba-reveal\">\n            <a href=\"#REPLACE_WITH_PROJECT_URL_web-apps\" aria-label=\"View web applications project\">\n              <img decoding=\"async\" src=\"REPLACE_WITH_WP_MEDIA\/hero-web-apps.webp\" alt=\"A web application dashboard displayed across screens\" loading=\"lazy\">\n              <div class=\"ba-work-project-content\">\n                <h2>Web Applications<\/h2>\n                <span class=\"ba-work-cat\">Web Application<\/span>\n                <span class=\"ba-work-view\">View project <b>&#8599;<\/b><\/span>\n              <\/div>\n            <\/a>\n          <\/article>\n          <article class=\"ba-work-project ba-reveal\">\n            <a href=\"#REPLACE_WITH_PROJECT_URL_ai-automation\" aria-label=\"View AI and automation project\">\n              <img decoding=\"async\" src=\"REPLACE_WITH_WP_MEDIA\/hero-ai.webp\" alt=\"An intelligent document workflow application on screen\" loading=\"lazy\">\n              <div class=\"ba-work-project-content\">\n                <h2>AI &amp; Automation<\/h2>\n                <span class=\"ba-work-cat\">AI &amp; Automation<\/span>\n                <span class=\"ba-work-view\">View project <b>&#8599;<\/b><\/span>\n              <\/div>\n            <\/a>\n          <\/article>\n        <\/div>\n\n        <div class=\"ba-work-row\">\n          <article class=\"ba-work-project ba-reveal\">\n            <a href=\"#REPLACE_WITH_PROJECT_URL_branding\" aria-label=\"View branding project\">\n              <img decoding=\"async\" src=\"REPLACE_WITH_WP_MEDIA\/hero-branding.webp\" alt=\"Colourful brand identity materials arranged inside a design studio\" loading=\"lazy\">\n              <div class=\"ba-work-project-content\">\n                <h2>Branding &amp; Design<\/h2>\n                <span class=\"ba-work-cat\">Branding &amp; Design<\/span>\n                <span class=\"ba-work-view\">View project <b>&#8599;<\/b><\/span>\n              <\/div>\n            <\/a>\n          <\/article>\n        <\/div>\n      <\/div>\n    <\/section>\n\n    <section class=\"ba-work-transition ba-reveal\">\n      <p><span class=\"ba-motif\" aria-hidden=\"true\"><\/span>Different problems.<br>Different possibilities.<\/p>\n    <\/section>\n\n    <section class=\"ba-ant-feature ba-reveal\">\n      <img decoding=\"async\" class=\"ba-ant-feature-image\" src=\"REPLACE_WITH_WP_MEDIA\/ant-leaf.webp\" alt=\"A single ant carrying a leaf, photographed in dramatic monochrome\" loading=\"lazy\">\n      <div class=\"ba-ant-feature-shade\"><\/div>\n      <blockquote class=\"ba-ant-feature-quote\">\n        <p>Consider the way of the wise <em>Ant.<\/em><\/p>\n        <cite>Prov 6:6<\/cite>\n      <\/blockquote>\n    <\/section>\n  <\/main>\n\n  <footer class=\"ba-footer\">\n    <div class=\"ba-footer-top\">\n      <a class=\"ba-logo\" href=\"#REPLACE_WITH_HOME_PAGE_URL\">\n        <img decoding=\"async\" class=\"ba-logo-image\" src=\"REPLACE_WITH_WP_MEDIA\/logo-teal-white.png\" alt=\"beAnt\">\n      <\/a>\n      <p>Websites &middot; Web Applications &middot; Mobile Apps &middot; AI &amp; Automation &middot; Branding &amp; Design &middot; Digital Support<\/p>\n    <\/div>\n    <div class=\"ba-footer-bottom\">\n      <p>UK-founded. Working with businesses in the UK and beyond.<\/p>\n      <div>\n        <a href=\"#REPLACE_WITH_HOME_PAGE_URL\">Home<\/a>\n        <a href=\"#\">Work<\/a>\n        <a href=\"#REPLACE_WITH_SERVICES_URL\">Services<\/a>\n        <a href=\"#REPLACE_WITH_ABOUT_PAGE_URL\">About<\/a>\n        <a href=\"#REPLACE_WITH_BLOG_PAGE_URL\">Blog<\/a>\n      <\/div>\n      <span class=\"ba-footer-mark\"><span class=\"ba-motif\" aria-hidden=\"true\"><\/span>&copy; beAnt. All rights reserved.<\/span>\n    <\/div>\n  <\/footer>\n\n<\/div>\n\n<script>\n(function () {\n  'use strict';\n  var root = document.getElementById('ba-root');\n  if (!root) return;\n  var q = function (sel, ctx) { return (ctx || root).querySelector(sel); };\n  var qa = function (sel, ctx) { return Array.prototype.slice.call((ctx || root).querySelectorAll(sel)); };\n\n  var toggle = q('.ba-menu-toggle');\n  var nav = q('#ba-nav');\n  if (toggle && nav) {\n    toggle.addEventListener('click', function () {\n      var open = toggle.getAttribute('aria-expanded') === 'true';\n      toggle.setAttribute('aria-expanded', String(!open));\n      nav.classList.toggle('ba-open');\n    });\n    qa('a', nav).forEach(function (link) {\n      link.addEventListener('click', function () {\n        nav.classList.remove('ba-open');\n        toggle.setAttribute('aria-expanded', 'false');\n      });\n    });\n  }\n\n  var revealObserver = new IntersectionObserver(function (entries) {\n    entries.forEach(function (entry) {\n      if (entry.isIntersecting) {\n        entry.target.classList.add('ba-visible');\n        revealObserver.unobserve(entry.target);\n      }\n    });\n  }, { threshold: .12 });\n  qa('.ba-reveal').forEach(function (el) { revealObserver.observe(el); });\n\n  (function () {\n    var navEl = q('.ba-site-header nav');\n    if (!navEl) return;\n    var indicator = document.createElement('span');\n    indicator.className = 'ba-nav-indicator';\n    indicator.setAttribute('aria-hidden', 'true');\n    navEl.appendChild(indicator);\n\n    function moveIndicatorTo(link, instant) {\n      if (!link) { indicator.style.opacity = '0'; return; }\n      if (instant) indicator.style.transition = 'none';\n      var navRect = navEl.getBoundingClientRect();\n      var linkRect = link.getBoundingClientRect();\n      indicator.style.opacity = '1';\n      indicator.style.width = linkRect.width + 'px';\n      indicator.style.transform = 'translateX(' + (linkRect.left - navRect.left) + 'px)';\n      if (instant) { void indicator.offsetWidth; indicator.style.transition = ''; }\n    }\n    var pinnedLink = null;\n    function activeLink() { return pinnedLink || q('a.ba-active', navEl) || null; }\n    function syncToActive(instant) { moveIndicatorTo(activeLink(), instant); }\n    qa('a', navEl).forEach(function (link) {\n      link.addEventListener('mouseenter', function () { moveIndicatorTo(link); });\n      link.addEventListener('focus', function () { moveIndicatorTo(link); });\n      link.addEventListener('click', function () { pinnedLink = link; moveIndicatorTo(link); });\n    });\n    navEl.addEventListener('mouseleave', function () { syncToActive(); });\n    syncToActive(true);\n    if (document.fonts && document.fonts.ready) { document.fonts.ready.then(function () { syncToActive(true); }); }\n    window.addEventListener('resize', function () { syncToActive(true); });\n  })();\n})();\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Home Work Services About Blog Contact Start a project &#8599; 01 \/ Selected work Things we&rsquo;vebuilt. Digital products, websites, identities and systems created to solve real problems. Atlas Operations Web Application View project &#8599; Civic+ Mobile Application View project &#8599; Sana Botanicals Branding &amp; Design View project &#8599; Digital Product Website View project &#8599; Web [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-886","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/new.be-ant.com\/index.php?rest_route=\/wp\/v2\/pages\/886","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/new.be-ant.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/new.be-ant.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/new.be-ant.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/new.be-ant.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=886"}],"version-history":[{"count":5,"href":"https:\/\/new.be-ant.com\/index.php?rest_route=\/wp\/v2\/pages\/886\/revisions"}],"predecessor-version":[{"id":911,"href":"https:\/\/new.be-ant.com\/index.php?rest_route=\/wp\/v2\/pages\/886\/revisions\/911"}],"wp:attachment":[{"href":"https:\/\/new.be-ant.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=886"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}