{"id":861,"date":"2026-08-31T14:34:03","date_gmt":"2026-08-31T14:34:03","guid":{"rendered":"https:\/\/new.be-ant.com\/?page_id=861"},"modified":"2026-08-31T15:03:23","modified_gmt":"2026-08-31T15:03:23","slug":"elementor-861","status":"publish","type":"page","link":"https:\/\/new.be-ant.com\/?page_id=861","title":{"rendered":"Home1"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"861\" class=\"elementor elementor-861\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2b9929a e-flex e-con-boxed e-con e-parent\" data-id=\"2b9929a\" 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-6313bc6 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"6313bc6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!--\n  beAnt \u2014 Home page, packaged for a WordPress Custom HTML block.\n  =================================================================\n  WHAT'S IN HERE\n  All CSS is inline below, scoped under .ba-root \/ .ba-* classes so it\n  can't collide with the active theme. All JS is inline at the bottom,\n  scoped to query only inside #ba-root. No <html>\/<head>\/<body> \u2014 paste\n  this whole thing into one Custom HTML block on the page you want as\n  Home.\n\n  WHAT YOU NEED TO REPLACE BEFORE THIS GOES LIVE\n  1. Every image src below is a placeholder path like\n     \"REPLACE_WITH_WP_MEDIA\/hero-websites.webp\" \u2014 upload the matching\n     file to the Media Library and swap in the real URL. Full list:\n       REPLACE_WITH_WP_MEDIA\/logo-teal.png\n       REPLACE_WITH_WP_MEDIA\/logo-teal-white.png\n       REPLACE_WITH_WP_MEDIA\/hero-websites.webp\n       REPLACE_WITH_WP_MEDIA\/hero-web-apps.webp\n       REPLACE_WITH_WP_MEDIA\/hero-branding.webp\n       REPLACE_WITH_WP_MEDIA\/hero-ai.webp\n       REPLACE_WITH_WP_MEDIA\/atlas-operations.webp\n  2. Every link marked  href=\"#REPLACE_WITH_..._URL\"  below points at a\n     page this file doesn't build (Work, Services-as-its-own-page,\n     About, Blog, Contact). Point each at the real WordPress page once\n     it exists.\n  3. Google Fonts is loaded via @import inside the <style> block rather\n     than a <link> tag, per your no-<link> constraint \u2014 functionally\n     the same network request, just written in CSS instead of HTML.\n     If you'd rather the theme provide Manrope\/DM Sans itself, delete\n     the @import line and make sure those two families are enqueued\n     elsewhere; the fallback stack still degrades gracefully either way.\n\n  WHAT WAS DELIBERATELY LEFT OUT\n  The original static site had a cross-page \"veil\" transition: clicking\n  a link covers the screen in the destination page's colour, THEN\n  navigates, and the arriving page reads a flag (via window.name) to\n  fade itself in. That trick depends on controlling the very first\n  paint of the next document \u2014 something only possible from a page's\n  own <head>, before any theme chrome loads. A Custom HTML block can't\n  hook that; it only ever runs after the surrounding page has already\n  started rendering. So that whole system is left out here. What IS\n  kept, because it's fully self-contained to this one page and needs no\n  cooperation from anywhere else: the paper-screen \"website entry\"\n  intro animation (plays once per browser tab, and replays any time the\n  logo is clicked), the sliding nav indicator, the services accordion,\n  the hero carousel, and scroll-reveal. Ordinary links elsewhere on the\n  page (Work, About, Blog, Contact, Services-as-a-page) are left as\n  plain <a href> \u2014 normal WordPress navigation, no custom interception.\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  \/* ---- design tokens, namespaced so they can't shadow a theme's own -- *\/\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\n  \/* ---- scoped reset \u2014 theme CSS loads first and will happily override\n     bare element selectors, so every reset below is written against\n     #ba-root specifically instead of relying on the cascade's default\n     specificity to win. ---- *\/\n  #ba-root, #ba-root *, #ba-root *:before, #ba-root *:after{ box-sizing:border-box; }\n  #ba-root{\n    \/* Full-bleed breakout. The header is position:fixed so it already\n       spans the true viewport regardless of any theme content wrapper \u2014\n       but the footer and every section in between are normal block\n       elements, and most WordPress themes (block themes especially)\n       cap a page's content column at some max-width and centre it. This\n       is the standard breakout trick: widen to the full viewport, then\n       pull the left\/right edges back out to 0 with a negative margin\n       computed from that same 100vw, regardless of how narrow or\n       off-centre the actual parent container is. max-width:none clears\n       any max-width the theme applies directly to this element, and\n       overflow-x:hidden guards against 100vw sometimes being a few\n       pixels wider than the visible viewport when a scrollbar is\n       present (a well-known vw quirk, not a layout bug of ours). *\/\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  \/* A theme's own h1\/h2\/h3\/p rules are still explicit rules, and an\n     explicit rule beats an inherited value no matter how low its\n     specificity is \u2014 so every property a theme is likely to set on\n     these needs its own explicit #ba-root-scoped counter-rule here,\n     not just the ones this page's own components go on to override. *\/\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;\n    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-logo-light .ba-logo-image{ \/* footer variant already ships as a white-ink asset \u2014 no filter needed *\/ }\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:#777; }\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, #ba-root .ba-btn span{\n    margin-left:18px; display:inline-block; transition:transform .3s cubic-bezier(.22,.61,.36,1);\n  }\n  #ba-root .ba-header-cta:hover span, #ba-root .ba-btn:hover span{ transform:translate(3px,-3px); }\n  #ba-root .ba-menu-toggle{ display:none; }\n\n  #ba-root .ba-visually-hidden{\n    position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;\n    clip:rect(0,0,0,0); white-space:nowrap; border:0;\n  }\n\n  \/* ---- shared section \/ kicker \/ button primitives ---- *\/\n  #ba-root .ba-section{ padding:125px 8.5vw; }\n  #ba-root .ba-section-head{ display:grid; grid-template-columns:1.3fr .7fr; gap:50px; align-items:end; margin-bottom:80px; }\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-section-head > p{ font-size:17px; line-height:1.65; color:#666; max-width:460px; margin-bottom:5px; }\n  #ba-root .ba-btn{ display:inline-block; padding:17px 20px; font-size:14px; }\n  #ba-root .ba-btn-light{ background:#fff; color:var(--ba-ink); }\n  #ba-root .ba-text-link{ font-size:14px; border-bottom:1px solid #777; padding:16px 0; }\n  #ba-root .ba-text-link span{ margin-left:20px; display:inline-block; transition:transform .3s cubic-bezier(.22,.61,.36,1); }\n  #ba-root .ba-text-link:hover span{ transform:translate(3px,-3px); }\n  #ba-root .ba-under-link{\n    display:inline-flex; gap:45px; border-bottom:1px solid; padding-bottom:9px; margin-top:25px; font-size:14px;\n  }\n  #ba-root .ba-under-link span{ display:inline-block; transition:transform .3s cubic-bezier(.22,.61,.36,1); }\n  #ba-root .ba-under-link:hover span{ transform:translate(3px,-3px); }\n\n  \/* beAnt signature motif \u2014 the geometric peak already latent in the\n     logomark, reused as a small recurring accent (footer mark). *\/\n  #ba-root .ba-motif{\n    display:inline-block; flex:none; border-left:1.4px solid currentColor; border-top:1.4px solid currentColor;\n    transform:rotate(45deg);\n  }\n\n  \/* ---- scroll reveal ---- *\/\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){\n    #ba-root .ba-reveal{ opacity:1; transform:none; transition:none; }\n  }\n\n  \/* ---- hero carousel ---- *\/\n  #ba-root .ba-hero-carousel{\n    height:min(860px,100vh); min-height:720px; background:#0b0c0c; position:relative; color:#fff;\n    overflow:hidden; padding-top:86px;\n  }\n  #ba-root .ba-hero-slides{ position:absolute; inset:86px 0 0; }\n  #ba-root .ba-hero-slide{\n    position:absolute; inset:0; opacity:0; visibility:hidden; pointer-events:none;\n    transition:opacity 1s cubic-bezier(.22,.61,.36,1), visibility 1s;\n  }\n  #ba-root .ba-hero-slide.ba-is-active{ opacity:1; visibility:visible; pointer-events:auto; z-index:1; }\n  #ba-root .ba-hero-image{\n    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;\n    transform:scale(1.025); transition:transform 7s cubic-bezier(.2,.6,.2,1);\n  }\n  #ba-root .ba-hero-slide.ba-is-active .ba-hero-image{ transform:scale(1); }\n  #ba-root .ba-hero-shade{\n    position:absolute; inset:0;\n    background:linear-gradient(90deg, rgba(5,6,6,.96) 0%, rgba(5,6,6,.76) 38%, rgba(5,6,6,.12) 68%, rgba(5,6,6,.08) 100%);\n  }\n  #ba-root .ba-hero-copy{\n    position:absolute; z-index:2; left:8.5vw; top:44%; max-width:920px;\n    transform:translateY(-35%) translateX(-12px); opacity:0;\n    transition:opacity .6s ease .22s, transform .75s cubic-bezier(.2,.75,.25,1) .18s;\n  }\n  #ba-root .ba-hero-slide.ba-is-active .ba-hero-copy{ opacity:1; transform:translateY(-35%) translateX(0); }\n  #ba-root .ba-eyebrow{\n    text-transform:uppercase; letter-spacing:.16em; font-size:11px; font-weight:600;\n    display:flex; align-items:center; gap:11px; color:#d2d2ce; margin-bottom:36px;\n    opacity:0; transform:translateY(8px); transition:opacity .5s ease .38s, transform .5s ease .38s;\n  }\n  #ba-root .ba-hero-slide.ba-is-active .ba-eyebrow{ opacity:1; transform:none; }\n  #ba-root .ba-eyebrow span{\n    width:8px; height:8px; border-left:1.3px solid var(--ba-teal); border-top:1.3px solid var(--ba-teal);\n    transform:rotate(45deg);\n  }\n  #ba-root .ba-hero-carousel h1{\n    font:500 clamp(57px,6.2vw,102px)\/.95 Manrope,sans-serif; letter-spacing:-.065em;\n  }\n  #ba-root .ba-hero-carousel h1 em{ font-weight:400; color:var(--ba-teal); font-style:normal; }\n  #ba-root .ba-hero-text{\n    max-width:540px; font-size:18px; line-height:1.55; color:#c9c9c5; margin-top:35px;\n  }\n  #ba-root .ba-hero-actions{ position:absolute; z-index:5; left:8.5vw; bottom:82px; margin:0; display:flex; gap:38px; align-items:center; }\n  #ba-root .ba-slider-controls{\n    position:absolute; z-index:6; right:4.4vw; bottom:79px; display:flex; align-items:center; gap:20px; color:#fff;\n  }\n  #ba-root .ba-slider-arrow{\n    width:44px; height:44px; border:1px solid rgba(255,255,255,.36); border-radius:50%;\n    background:rgba(8,9,9,.18); color:#fff; display:grid; place-items:center; cursor:pointer;\n    font-size:17px; transition:background .25s, border-color .25s, color .25s;\n  }\n  #ba-root .ba-slider-arrow:hover{ background:var(--ba-teal); border-color:var(--ba-teal); color:var(--ba-ink); }\n  #ba-root .ba-slider-arrow:focus-visible{ outline:2px solid var(--ba-teal); outline-offset:3px; }\n  #ba-root .ba-slider-status{ display:flex; align-items:center; gap:11px; font:500 10px Manrope,sans-serif; letter-spacing:.12em; color:#c7c8c5; }\n  #ba-root .ba-slider-current{ color:#fff; min-width:17px; }\n  #ba-root .ba-slider-track{ width:88px; height:1px; background:rgba(255,255,255,.28); overflow:hidden; }\n  #ba-root .ba-slider-track i{ display:block; width:100%; height:100%; background:var(--ba-teal); transform:scaleX(0); transform-origin:left; }\n  #ba-root .ba-hero-carousel.ba-is-playing .ba-slider-track i{ animation:baHeroProgress 6.5s linear forwards; }\n  #ba-root .ba-hero-carousel.ba-user-paused .ba-slider-track i{ animation-play-state:paused; }\n  @keyframes baHeroProgress{ to{ transform:scaleX(1); } }\n  #ba-root .ba-hero-foot{\n    position:absolute; bottom:24px; left:4.4vw; right:4.4vw; z-index:2; display:flex; justify-content:space-between;\n    color:#9c9c98; font-size:10px; letter-spacing:.15em; text-transform:uppercase;\n  }\n\n  @media (max-width:1024px){\n    #ba-root .ba-hero-carousel{ height:min(760px,100svh); min-height:680px; padding-top:70px; }\n    #ba-root .ba-hero-slides{ inset:70px 0 0; }\n    #ba-root .ba-hero-image{ top:0; height:100%; object-position:63% center; opacity:.8; }\n    #ba-root .ba-hero-shade{ top:0; height:100%; background:linear-gradient(90deg, rgba(5,6,6,.94), rgba(5,6,6,.68) 55%, rgba(5,6,6,.2)); }\n    #ba-root .ba-hero-copy{ top:39%; left:7vw; right:7vw; transform:translateY(-35%) translateX(-8px); max-width:none; }\n    #ba-root .ba-hero-slide.ba-is-active .ba-hero-copy{ transform:translateY(-35%) translateX(0); }\n    #ba-root .ba-hero-text{ max-width:480px; }\n    #ba-root .ba-hero-actions{ left:7vw; bottom:104px; }\n    #ba-root .ba-slider-controls{ left:7vw; right:auto; bottom:28px; }\n    #ba-root .ba-hero-foot{ display:none; }\n    #ba-root .ba-hero-carousel h1{ font-size:clamp(50px,13vw,72px); }\n  }\n  @media (max-width:768px){\n    #ba-root .ba-hero-carousel{ height:720px; min-height:650px; }\n    #ba-root .ba-hero-copy{ top:36%; }\n    #ba-root .ba-hero-image{ object-position:68% center; opacity:.72; }\n    #ba-root .ba-hero-shade{ background:linear-gradient(90deg, rgba(5,6,6,.95), rgba(5,6,6,.7) 62%, rgba(5,6,6,.25)); }\n    #ba-root .ba-hero-carousel h1{ font-size:clamp(42px,12vw,54px); line-height:.98; }\n    #ba-root .ba-eyebrow{ margin-bottom:22px; }\n    #ba-root .ba-hero-text{ font-size:15px; line-height:1.5; margin-top:24px; max-width:92%; }\n    #ba-root .ba-hero-actions{ bottom:100px; gap:8px; align-items:flex-start; flex-direction:column; }\n    #ba-root .ba-hero-actions .ba-btn{ padding:14px 16px; }\n    #ba-root .ba-hero-actions .ba-text-link{ padding:13px 0; }\n    #ba-root .ba-slider-controls{ bottom:27px; gap:13px; }\n    #ba-root .ba-slider-arrow{ width:39px; height:39px; }\n    #ba-root .ba-slider-track{ width:62px; }\n  }\n  @media (prefers-reduced-motion:reduce){\n    #ba-root .ba-hero-slide, #ba-root .ba-hero-image, #ba-root .ba-hero-copy, #ba-root .ba-eyebrow{ transition:none!important; animation:none!important; }\n    #ba-root .ba-hero-carousel .ba-slider-track i{ animation:none!important; transform:scaleX(1); }\n  }\n\n  \/* ---- work preview cards ---- *\/\n  #ba-root .ba-work{ background:var(--ba-white); padding-top:clamp(100px,6vw,124px); padding-bottom:clamp(48px,5vw,72px); }\n  #ba-root .ba-work-intro{\n    display:grid; grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr); gap:8vw; align-items:end; margin-bottom:clamp(32px,3.4vw,48px);\n  }\n  #ba-root .ba-work-intro h2{ max-width:850px; font:500 clamp(40px,4.4vw,68px)\/1.03 Manrope,sans-serif; letter-spacing:-.055em; }\n  #ba-root .ba-work-intro h2 em{ font-weight:400; color:var(--ba-teal); font-style:normal; }\n  #ba-root .ba-work-intro-copy{ padding:0 0 6px; border-bottom:1px solid var(--ba-line); }\n  #ba-root .ba-work-intro-copy > p{ max-width:480px; color:#60605c; font-size:15px; line-height:1.6; padding-bottom:16px; }\n  #ba-root .ba-work-intro-copy > span{ display:flex; align-items:baseline; gap:8px; padding:11px 0 0; text-transform:uppercase; letter-spacing:.13em; font-size:10px; color:#777772; }\n  #ba-root .ba-work-intro-copy b{ font:500 19px Manrope,sans-serif; letter-spacing:-.04em; color:var(--ba-ink); }\n  #ba-root .ba-projects.ba-work-card-grid{\n    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(14px,1.4vw,20px);\n  }\n  #ba-root .ba-work-card > a{\n    display:block; position:relative; aspect-ratio:2.8; overflow:hidden; background:#12202b; color:#fff; isolation:isolate;\n  }\n  #ba-root .ba-work-card:nth-child(2) > a{ background:#9ccfe0; }\n  #ba-root .ba-work-card:nth-child(3) > a{ background:#4fc779; }\n  #ba-root .ba-work-card:nth-child(4) > a{ background:#10221e; }\n  #ba-root .ba-work-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.22,.61,.36,1); }\n  #ba-root .ba-work-card:nth-child(2) img{ object-position:center 42%; }\n  #ba-root .ba-work-card-shade{\n    position:absolute; inset:0; z-index:1; mix-blend-mode:multiply;\n    background:linear-gradient(90deg, rgba(5,9,12,.72), rgba(5,9,12,.1) 72%), linear-gradient(0deg, rgba(5,9,12,.16), transparent 40%);\n  }\n  #ba-root .ba-work-card:nth-child(2) .ba-work-card-shade{ background:linear-gradient(90deg, rgba(64,141,166,.55), rgba(64,141,166,.02) 75%); }\n  #ba-root .ba-work-card:nth-child(3) .ba-work-card-shade{ background:linear-gradient(90deg, rgba(30,148,77,.56), rgba(30,148,77,.04) 75%); }\n  #ba-root .ba-work-card:nth-child(4) .ba-work-card-shade{ background:linear-gradient(90deg, rgba(4,14,12,.8), rgba(4,14,12,.12) 74%); }\n  #ba-root .ba-work-card-title{\n    position:absolute; z-index:2; left:clamp(24px,3.8vw,58px); top:clamp(24px,3.6vw,54px);\n    font:500 clamp(27px,3vw,46px)\/1.08 Manrope,sans-serif; letter-spacing:-.045em;\n  }\n  #ba-root .ba-work-card-link{\n    position:absolute; z-index:2; left:clamp(24px,3.8vw,58px); bottom:clamp(24px,3vw,44px);\n    display:flex; align-items:center; gap:21px; color:rgba(255,255,255,.86); font-size:12px;\n    text-transform:uppercase; letter-spacing:.04em;\n  }\n  #ba-root .ba-work-card-link b{ font-size:21px; font-weight:400; line-height:1; transition:transform .3s ease; }\n  #ba-root .ba-work-card-link:before{\n    content:\"\"; flex:none; width:7px; height:7px; border-left:1.2px solid currentColor; border-top:1.2px solid currentColor;\n    opacity:0; transform:rotate(20deg) scale(.4); transition:opacity .35s ease, transform .4s cubic-bezier(.22,.61,.36,1);\n  }\n  #ba-root .ba-work-card > a:hover img{ transform:scale(1.05); }\n  #ba-root .ba-work-card > a:hover .ba-work-card-link b{ transform:translate(4px,-4px); }\n  #ba-root .ba-work-card > a:hover .ba-work-card-link:before{ opacity:1; transform:rotate(45deg) scale(1); }\n  #ba-root .ba-work-card > a:focus-visible{ outline:3px solid var(--ba-teal); outline-offset:5px; }\n  #ba-root .ba-work-footer{\n    display:flex; align-items:center; justify-content:flex-end; margin-top:clamp(26px,3vw,40px);\n    padding-bottom:18px; border-bottom:1px solid var(--ba-line);\n  }\n  #ba-root .ba-work-footer a{ display:flex; gap:38px; align-items:center; border-bottom:1px solid var(--ba-ink); padding:10px 0; font-size:13px; }\n  #ba-root .ba-work-footer a span{ font-size:20px; transition:transform .3s cubic-bezier(.22,.61,.36,1); }\n  #ba-root .ba-work-footer a:hover span{ transform:translate(3px,-3px); }\n  #ba-root .ba-work-footer a:focus-visible{ outline:2px solid var(--ba-teal); outline-offset:5px; }\n\n  @media (max-width:1024px){\n    #ba-root .ba-work-intro{ grid-template-columns:1fr; gap:40px; }\n  }\n  @media (max-width:768px){\n    #ba-root .ba-projects.ba-work-card-grid{ grid-template-columns:1fr; gap:30px; }\n    #ba-root .ba-work-card > a{ aspect-ratio:1.55; }\n    #ba-root .ba-work-intro-copy > p{ font-size:15px; padding-bottom:24px; }\n  }\n  @media (max-width:480px){\n    #ba-root .ba-work-card > a{ aspect-ratio:1.12; }\n    #ba-root .ba-work-card-title{ left:22px; top:22px; font-size:34px; }\n    #ba-root .ba-work-card-link{ left:22px; bottom:24px; }\n  }\n  @media (prefers-reduced-motion:reduce){\n    #ba-root .ba-work-card img, #ba-root .ba-work-card-link b, #ba-root .ba-work-card-link:before{ transition:none; }\n  }\n\n  \/* ---- services accordion ---- *\/\n  #ba-root .ba-services{ background:#111313; color:#fff; }\n  #ba-root .ba-services .ba-kicker{ color:#8d908e; }\n  #ba-root .ba-services .ba-section-head > p{ color:#a9aaa7; }\n  #ba-root .ba-service-list{ border-top:1px solid #454747; }\n  #ba-root .ba-service{ border-bottom:1px solid #454747; }\n  #ba-root .ba-service-heading{ margin:0; font:inherit; }\n  #ba-root .ba-service-row{\n    width:100%; border:0; background:none; margin:0; padding:0; font:inherit; color:inherit; text-align:left;\n    cursor:pointer; min-height:86px; display:grid; grid-template-columns:8% 31% 1fr 50px; gap:20px; align-items:center;\n    transform:translateX(0); transition:transform .5s ease-out, color .5s ease-out;\n  }\n  #ba-root .ba-service-num{ color:#6c706e; font-size:10px; }\n  #ba-root .ba-service-name{ font:500 clamp(17px,1.7vw,25px) Manrope,sans-serif; letter-spacing:-.04em; transition:color .5s ease-out; }\n  #ba-root .ba-service-desc{ color:#a9aaa7; font-size:13px; line-height:1.5; max-width:480px; transition:color .5s ease-out; }\n  #ba-root .ba-service-arrow{ font-size:18px; font-weight:400; display:inline-block; transition:transform .5s ease-out; }\n  #ba-root .ba-service:hover .ba-service-row{ transform:translateX(20px); color:var(--ba-teal); }\n  #ba-root .ba-service:hover .ba-service-desc{ color:var(--ba-teal); }\n  #ba-root .ba-service:hover .ba-service-arrow{ transform:translate(3px,-3px); }\n  #ba-root .ba-service.ba-is-active .ba-service-row{ color:var(--ba-teal); }\n  #ba-root .ba-service.ba-is-active .ba-service-arrow{ transform:translate(3px,-3px); }\n  #ba-root .ba-service-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .6s cubic-bezier(.22,.61,.36,1); }\n  #ba-root .ba-service-panel.ba-is-open{ grid-template-rows:1fr; }\n  #ba-root .ba-service-panel-inner{ overflow:hidden; }\n  #ba-root .ba-service-panel-inner:before{\n    content:''; display:block; height:1px; background:var(--ba-teal); transform:scaleX(0); transform-origin:left;\n    transition:transform .7s cubic-bezier(.22,.61,.36,1) .08s;\n  }\n  #ba-root .ba-service-panel.ba-is-open .ba-service-panel-inner:before{ transform:scaleX(1); }\n  #ba-root .ba-service-panel-list{\n    list-style:none; margin:0; padding:36px 0 42px 8%; display:grid; grid-template-columns:repeat(3,1fr);\n    column-gap:40px; row-gap:16px; opacity:0; transition:opacity .5s ease .1s;\n  }\n  #ba-root .ba-service-panel.ba-is-open .ba-service-panel-list{ opacity:1; }\n  #ba-root .ba-service-panel-list li{ position:relative; padding-left:20px; font-size:14px; line-height:1.55; color:#c7c8c5; }\n  #ba-root .ba-service-panel-list li:before{ content:'+'; position:absolute; left:0; top:0; color:var(--ba-teal); font-weight:600; }\n\n  @media (max-width:1024px){\n    #ba-root .ba-section-head{ grid-template-columns:1fr; margin-bottom:55px; }\n    #ba-root .ba-section{ padding:90px 7vw; }\n  }\n  @media (max-width:768px){\n    #ba-root .ba-service-row{ grid-template-columns:35px 1fr 35px; padding:18px 0; }\n    #ba-root .ba-service-desc{ grid-column:2\/3; }\n    #ba-root .ba-service-arrow{ grid-column:3; grid-row:1; }\n    #ba-root .ba-service-panel-list{ grid-template-columns:repeat(2,1fr); padding-left:35px; column-gap:24px; }\n  }\n  @media (max-width:480px){\n    #ba-root .ba-section{ padding:75px 6vw; }\n    #ba-root .ba-service-name{ font-size:18px; }\n    #ba-root .ba-service-panel-list{ grid-template-columns:1fr; padding-left:35px; }\n  }\n\n  \/* ---- about preview ---- *\/\n  #ba-root .ba-about{ background:var(--ba-white); display:grid; grid-template-columns:1fr 1fr; gap:10vw; align-items:center; }\n  #ba-root .ba-about-mark{\n    aspect-ratio:1; background:var(--ba-teal); border-radius:50%; display:flex; flex-direction:column;\n    justify-content:center; align-items:center; position:relative;\n  }\n  #ba-root .ba-about-mark b{ font:500 clamp(95px,12vw,175px)\/.8 Manrope,sans-serif; letter-spacing:-.08em; }\n  #ba-root .ba-about-mark small{ text-transform:uppercase; font-size:12px; line-height:1.5; letter-spacing:.15em; margin-top:25px; }\n  #ba-root .ba-about-copy h2{\n    margin-bottom:45px; font:500 clamp(57px,6.2vw,102px)\/.95 Manrope,sans-serif; letter-spacing:-.065em;\n  }\n  #ba-root .ba-about-copy h2 em{ font-weight:400; color:var(--ba-teal); font-style:normal; }\n  #ba-root .ba-about-copy > p:not(.ba-kicker){ font-size:18px; line-height:1.65; color:#5d5d59; margin:0 0 20px; max-width:550px; }\n\n  @media (max-width:1024px){\n    #ba-root .ba-about{ grid-template-columns:1fr; }\n    #ba-root .ba-about-mark{ max-width:500px; }\n    #ba-root .ba-about-copy h2{ font-size:clamp(50px,13vw,72px); }\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;\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){\n    #ba-root .ba-logo-image{ width:80px; }\n  }\n\n  \/* ---- website-entry intro ----\n     State classes live on #ba-root itself (never document.documentElement\n     \/ <html> \u2014 a Custom HTML block has no business touching the whole\n     WordPress document root), so every selector below is scoped that way.\n     #ba-site-intro (the sliding Paper sheet) and #ba-site-intro-logo (the\n     travelling logo) are siblings, not parent\/child: nesting the logo\n     inside the sheet would compose their transforms and send the logo's\n     landing spot hundreds of pixels off from the navbar. Both default to\n     display:none so a JS failure can never strand a visitor behind either. *\/\n  \/* Double-ID scoping (#ba-root #ba-site-intro, not just #ba-site-intro)\n     is deliberate: the generic reset above (#ba-root img{display:block})\n     has specificity (1,0,1) \u2014 ID plus element \u2014 which actually OUTRANKS\n     a lone ID selector like #ba-site-intro-logo{display:none} (1,0,0).\n     Without the extra #ba-root prefix here, that reset would win and the\n     travelling logo would render as a normal in-flow image instead of\n     staying hidden until the intro arms it. *\/\n  #ba-root #ba-site-intro{ display:none; }\n  #ba-root.ba-intro-armed #ba-site-intro{\n    display:block; position:fixed; inset:0; z-index:60; background:var(--ba-paper); will-change:transform;\n  }\n  #ba-root.ba-intro-armed #ba-site-intro.ba-intro-fading-in{ transition:opacity .4s cubic-bezier(.22,.61,.36,1); }\n  #ba-root.ba-intro-armed #ba-site-intro.ba-intro-revealing{\n    transition:transform 1s cubic-bezier(.22,.61,.36,1); transform:translateY(-100%);\n  }\n  #ba-root #ba-site-intro-logo{ display:none; }\n  #ba-root.ba-intro-armed #ba-site-intro-logo{\n    display:block; position:fixed; top:50%; left:50%; z-index:61; width:clamp(170px,19vw,300px); height:auto;\n    transform:translate(-50%,-50%); will-change:transform;\n  }\n  #ba-root.ba-intro-armed #ba-site-intro-logo.ba-intro-logo-fading-in{ transition:opacity .4s cubic-bezier(.22,.61,.36,1); }\n  #ba-root.ba-intro-armed #ba-site-intro-logo.ba-intro-logo-revealing{ transition:transform 1s cubic-bezier(.22,.61,.36,1); }\n  #ba-root.ba-intro-armed .ba-site-header .ba-logo .ba-logo-image{ opacity:0; }\n  #ba-root.ba-intro-armed.ba-intro-handoff .ba-site-header .ba-logo .ba-logo-image{ opacity:1; transition:opacity .15s ease; }\n  #ba-root.ba-intro-armed #ba-site-intro-logo.ba-intro-logo-handoff{\n    transition:transform 1s cubic-bezier(.22,.61,.36,1), opacity .15s ease; opacity:0;\n  }\n  #ba-root.ba-intro-armed .ba-site-header nav,\n  #ba-root.ba-intro-armed .ba-header-cta,\n  #ba-root.ba-intro-armed .ba-menu-toggle{\n    opacity:0; transform:translateY(8px);\n    transition:opacity .6s cubic-bezier(.22,.61,.36,1) .15s, transform .6s cubic-bezier(.22,.61,.36,1) .15s;\n  }\n  #ba-root.ba-intro-armed.ba-intro-nav-in .ba-site-header nav,\n  #ba-root.ba-intro-armed.ba-intro-nav-in .ba-header-cta,\n  #ba-root.ba-intro-armed.ba-intro-nav-in .ba-menu-toggle{\n    opacity:1; transform:translateY(0);\n  }\n  #ba-root.ba-intro-armed .ba-hero-slide.ba-is-active .ba-hero-copy{ opacity:1; transform:translateY(-35%) translateX(0); }\n  #ba-root.ba-intro-armed .ba-hero-slide.ba-is-active .ba-eyebrow{\n    opacity:0; transform:translateY(20px); transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);\n  }\n  #ba-root.ba-intro-armed .ba-hero-slide.ba-is-active h1{\n    opacity:0; transform:translateY(20px);\n    transition:opacity .6s cubic-bezier(.22,.61,.36,1) .08s, transform .6s cubic-bezier(.22,.61,.36,1) .08s;\n  }\n  #ba-root.ba-intro-armed .ba-hero-slide.ba-is-active .ba-hero-text{\n    opacity:0; transform:translateY(20px);\n    transition:opacity .6s cubic-bezier(.22,.61,.36,1) .16s, transform .6s cubic-bezier(.22,.61,.36,1) .16s;\n  }\n  #ba-root.ba-intro-armed .ba-hero-actions,\n  #ba-root.ba-intro-armed .ba-slider-controls,\n  #ba-root.ba-intro-armed .ba-hero-foot{\n    opacity:0; transform:translateY(20px);\n    transition:opacity .6s cubic-bezier(.22,.61,.36,1) .24s, transform .6s cubic-bezier(.22,.61,.36,1) .24s;\n  }\n  #ba-root.ba-intro-armed.ba-intro-hero-in .ba-hero-slide.ba-is-active .ba-eyebrow,\n  #ba-root.ba-intro-armed.ba-intro-hero-in .ba-hero-slide.ba-is-active h1,\n  #ba-root.ba-intro-armed.ba-intro-hero-in .ba-hero-slide.ba-is-active .ba-hero-text,\n  #ba-root.ba-intro-armed.ba-intro-hero-in .ba-hero-actions,\n  #ba-root.ba-intro-armed.ba-intro-hero-in .ba-slider-controls,\n  #ba-root.ba-intro-armed.ba-intro-hero-in .ba-hero-foot{\n    opacity:1; transform:translateY(0);\n  }\n  #ba-root.ba-intro-lock{ overflow:hidden; max-height:100vh; }\n<\/style>\n\n<div id=\"ba-root\">\n\n  <div id=\"ba-site-intro\" aria-hidden=\"true\"><\/div>\n  <img decoding=\"async\" id=\"ba-site-intro-logo\" src=\"REPLACE_WITH_WP_MEDIA\/logo-teal.png\" alt=\"\" aria-hidden=\"true\">\n\n  <header class=\"ba-site-header\">\n    <a class=\"ba-logo\" href=\"#\" data-ba-logo 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=\"#\" class=\"ba-active\" aria-current=\"page\">Home<\/a>\n      <a href=\"#REPLACE_WITH_WORK_PAGE_URL\">Work<\/a>\n      <a href=\"#ba-services\" data-ba-inpage>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-hero-carousel\" aria-roledescription=\"carousel\" aria-label=\"beAnt capabilities\">\n      <div class=\"ba-hero-slides\" aria-live=\"off\">\n        <article class=\"ba-hero-slide ba-is-active\" aria-hidden=\"false\" data-name=\"Websites\">\n          <img decoding=\"async\" class=\"ba-hero-image\" src=\"REPLACE_WITH_WP_MEDIA\/hero-websites.webp\" alt=\"A colourful website displayed on a laptop and phone in a monochrome creative workspace\" fetchpriority=\"high\">\n          <div class=\"ba-hero-shade\"><\/div>\n          <div class=\"ba-hero-copy\">\n            <p class=\"ba-eyebrow\"><span><\/span> Websites<\/p>\n            <h1>Websites that make<br><em>an impression.<\/em><\/h1>\n            <p class=\"ba-hero-text\">Beautiful, responsive websites designed around your business, audience and goals.<\/p>\n          <\/div>\n        <\/article>\n        <article class=\"ba-hero-slide\" aria-hidden=\"true\" data-name=\"Web applications\">\n          <img decoding=\"async\" class=\"ba-hero-image\" src=\"REPLACE_WITH_WP_MEDIA\/hero-web-apps.webp\" alt=\"A colourful business dashboard displayed across screens in a monochrome professional workspace\" loading=\"lazy\">\n          <div class=\"ba-hero-shade\"><\/div>\n          <div class=\"ba-hero-copy\">\n            <p class=\"ba-eyebrow\"><span><\/span> Web applications<\/p>\n            <h1>Digital products<br><em>built to work.<\/em><\/h1>\n            <p class=\"ba-hero-text\">Custom platforms, portals, dashboards and business systems built around how you work.<\/p>\n          <\/div>\n        <\/article>\n        <article class=\"ba-hero-slide\" aria-hidden=\"true\" data-name=\"Branding and design\">\n          <img decoding=\"async\" class=\"ba-hero-image\" src=\"REPLACE_WITH_WP_MEDIA\/hero-branding.webp\" alt=\"Colourful brand identity materials arranged inside a monochrome design studio\" loading=\"lazy\">\n          <div class=\"ba-hero-shade\"><\/div>\n          <div class=\"ba-hero-copy\">\n            <p class=\"ba-eyebrow\"><span><\/span> Branding &amp; design<\/p>\n            <h1>Ideas people<br><em>remember.<\/em><\/h1>\n            <p class=\"ba-hero-text\">Distinctive identities and visual design that give businesses a clear presence.<\/p>\n          <\/div>\n        <\/article>\n        <article class=\"ba-hero-slide\" aria-hidden=\"true\" data-name=\"AI and automation\">\n          <img decoding=\"async\" class=\"ba-hero-image\" src=\"REPLACE_WITH_WP_MEDIA\/hero-ai.webp\" alt=\"A colourful document workflow application on screens in a monochrome office\" loading=\"lazy\">\n          <div class=\"ba-hero-shade\"><\/div>\n          <div class=\"ba-hero-copy\">\n            <p class=\"ba-eyebrow\"><span><\/span> AI &amp; automation<\/p>\n            <h1>Smarter experiences,<br><em>built in.<\/em><\/h1>\n            <p class=\"ba-hero-text\">Practical AI and intelligent automation integrated into products and business workflows.<\/p>\n          <\/div>\n        <\/article>\n      <\/div>\n      <div class=\"ba-hero-actions\">\n        <a class=\"ba-btn ba-btn-light\" href=\"#REPLACE_WITH_CONTACT_PAGE_URL\">Start a project <span>&#8599;<\/span><\/a>\n        <a class=\"ba-text-link\" href=\"#REPLACE_WITH_WORK_PAGE_URL\">View our work <span>&#8595;<\/span><\/a>\n      <\/div>\n      <div class=\"ba-slider-controls\" aria-label=\"Hero slider controls\">\n        <button class=\"ba-slider-arrow ba-slider-prev\" type=\"button\" aria-label=\"Previous slide\">&#8592;<\/button>\n        <div class=\"ba-slider-status\">\n          <span class=\"ba-slider-current\">01<\/span>\n          <span class=\"ba-slider-track\" aria-hidden=\"true\"><i><\/i><\/span>\n          <span>04<\/span>\n        <\/div>\n        <button class=\"ba-slider-arrow ba-slider-next\" type=\"button\" aria-label=\"Next slide\">&#8594;<\/button>\n      <\/div>\n      <p class=\"ba-slider-announcement ba-visually-hidden\" aria-live=\"polite\"><\/p>\n      <div class=\"ba-hero-foot\"><span>UK &middot; Worldwide<\/span><\/div>\n    <\/section>\n\n    <section class=\"ba-work\">\n      <div class=\"ba-work-intro ba-reveal\">\n        <div><p class=\"ba-kicker\">Selected work<\/p><h2>Work with<br><em>real impact.<\/em><\/h2><\/div>\n        <div class=\"ba-work-intro-copy\"><p>Digital work shaped around real people and measurable results.<\/p><span><b>04<\/b> featured projects<\/span><\/div>\n      <\/div>\n      <div class=\"ba-projects ba-work-card-grid\">\n        <article class=\"ba-work-card ba-reveal\">\n          <a href=\"#REPLACE_WITH_WORK_PAGE_URL\" 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            <span class=\"ba-work-card-shade\"><\/span>\n            <span class=\"ba-work-card-title\">Atlas<br>Operations<\/span>\n            <span class=\"ba-work-card-link\">Learn more <b>&#8599;<\/b><\/span>\n          <\/a>\n        <\/article>\n        <article class=\"ba-work-card ba-reveal\">\n          <a href=\"#REPLACE_WITH_WORK_PAGE_URL\" 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            <span class=\"ba-work-card-shade\"><\/span>\n            <span class=\"ba-work-card-title\">Web<br>Applications<\/span>\n            <span class=\"ba-work-card-link\">Learn more <b>&#8599;<\/b><\/span>\n          <\/a>\n        <\/article>\n        <article class=\"ba-work-card ba-reveal\">\n          <a href=\"#REPLACE_WITH_WORK_PAGE_URL\" 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            <span class=\"ba-work-card-shade\"><\/span>\n            <span class=\"ba-work-card-title\">AI &amp;<br>Automation<\/span>\n            <span class=\"ba-work-card-link\">Learn more <b>&#8599;<\/b><\/span>\n          <\/a>\n        <\/article>\n        <article class=\"ba-work-card ba-reveal\">\n          <a href=\"#REPLACE_WITH_WORK_PAGE_URL\" aria-label=\"View beAnt brand 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            <span class=\"ba-work-card-shade\"><\/span>\n            <span class=\"ba-work-card-title\">Branding<br>&amp; Design<\/span>\n            <span class=\"ba-work-card-link\">Learn more <b>&#8599;<\/b><\/span>\n          <\/a>\n        <\/article>\n      <\/div>\n      <div class=\"ba-work-footer ba-reveal\"><a href=\"#REPLACE_WITH_WORK_PAGE_URL\">View all work <span>&#8599;<\/span><\/a><\/div>\n    <\/section>\n\n    <section class=\"ba-services\" id=\"ba-services\">\n      <div class=\"ba-section ba-section-head ba-reveal\" style=\"padding-bottom:0\">\n        <div><p class=\"ba-kicker\">What we do<\/p><h2 style=\"font:500 clamp(57px,6.2vw,102px)\/.95 Manrope,sans-serif;letter-spacing:-.065em\">From idea to<br><em style=\"font-weight:400;color:var(--ba-teal);font-style:normal\">digital reality.<\/em><\/h2><\/div>\n        <p>Whether you need a new identity, a website or a complete digital product, we combine creative thinking with technology to bring ideas to life.<\/p>\n      <\/div>\n      <div class=\"ba-service-list\" style=\"margin:0 8.5vw 125px\">\n\n        <article class=\"ba-service ba-reveal\">\n          <h3 class=\"ba-service-heading\">\n            <button class=\"ba-service-row\" type=\"button\" id=\"ba-service-toggle-websites\" aria-expanded=\"false\" aria-controls=\"ba-service-panel-websites\">\n              <span class=\"ba-service-num\">01<\/span>\n              <span class=\"ba-service-name\">Websites<\/span>\n              <span class=\"ba-service-desc\">Beautiful, responsive websites designed around your business, audience and goals.<\/span>\n              <span class=\"ba-service-arrow\" aria-hidden=\"true\">&#8599;<\/span>\n            <\/button>\n          <\/h3>\n          <div class=\"ba-service-panel\" id=\"ba-service-panel-websites\" role=\"region\" aria-labelledby=\"ba-service-toggle-websites\" hidden>\n            <div class=\"ba-service-panel-inner\">\n              <ul class=\"ba-service-panel-list\">\n                <li>Business &amp; Corporate Websites<\/li><li>Company Profile Websites<\/li><li>Portfolio Websites<\/li>\n                <li>Personal Portfolio Websites<\/li><li>Agency &amp; Studio Websites<\/li><li>E-commerce Websites<\/li>\n                <li>Restaurant &amp; Food Websites<\/li><li>Hotel &amp; Hospitality Websites<\/li><li>Real Estate Websites<\/li>\n                <li>Property Listing Websites<\/li><li>School &amp; Education Websites<\/li><li>Church &amp; Ministry Websites<\/li>\n                <li>NGO &amp; Non-profit Websites<\/li><li>Event &amp; Conference Websites<\/li><li>Landing Pages<\/li>\n                <li>Marketing &amp; Campaign Websites<\/li><li>Membership Websites<\/li><li>Directory Websites<\/li>\n                <li>Booking &amp; Appointment Websites<\/li><li>News &amp; Magazine Websites<\/li>\n              <\/ul>\n            <\/div>\n          <\/div>\n        <\/article>\n\n        <article class=\"ba-service ba-reveal\">\n          <h3 class=\"ba-service-heading\">\n            <button class=\"ba-service-row\" type=\"button\" id=\"ba-service-toggle-web-applications\" aria-expanded=\"false\" aria-controls=\"ba-service-panel-web-applications\">\n              <span class=\"ba-service-num\">02<\/span>\n              <span class=\"ba-service-name\">Web Applications<\/span>\n              <span class=\"ba-service-desc\">Custom platforms, portals, dashboards and business systems built around how you work.<\/span>\n              <span class=\"ba-service-arrow\" aria-hidden=\"true\">&#8599;<\/span>\n            <\/button>\n          <\/h3>\n          <div class=\"ba-service-panel\" id=\"ba-service-panel-web-applications\" role=\"region\" aria-labelledby=\"ba-service-toggle-web-applications\" hidden>\n            <div class=\"ba-service-panel-inner\">\n              <ul class=\"ba-service-panel-list\">\n                <li>HR Management Systems<\/li><li>Payroll Systems<\/li><li>Employee Management Systems<\/li>\n                <li>Compliance Management Systems<\/li><li>Privacy Management Systems<\/li><li>CRM Systems<\/li>\n                <li>Customer Management Platforms<\/li><li>Project Management Systems<\/li><li>Task Management Platforms<\/li>\n                <li>Inventory Management Systems<\/li><li>Stock Management Systems<\/li><li>Accounting &amp; Finance Platforms<\/li>\n                <li>Invoice Management Systems<\/li><li>Booking &amp; Reservation Systems<\/li><li>Appointment Management Systems<\/li>\n                <li>School Management Systems<\/li><li>Learning Management Systems<\/li><li>Student Management Platforms<\/li>\n                <li>Examination &amp; Assessment Systems<\/li><li>Employee Training Platforms<\/li><li>Customer Portals<\/li>\n                <li>Client Portals<\/li><li>Vendor Management Systems<\/li><li>Document Management Systems<\/li>\n                <li>Workflow Management Systems<\/li><li>Business Dashboards<\/li><li>Analytics Platforms<\/li>\n                <li>Reporting Systems<\/li><li>Internal Business Tools<\/li><li>Marketplace Platforms<\/li>\n                <li>Service Marketplaces<\/li><li>Job &amp; Recruitment Platforms<\/li><li>Complaint Management Systems<\/li>\n                <li>Ticketing &amp; Support Systems<\/li><li>Survey &amp; Data Collection Platforms<\/li><li>Form &amp; Application Systems<\/li>\n                <li>Approval &amp; Review Systems<\/li><li>Case Management Systems<\/li><li>Asset Management Systems<\/li>\n                <li>Custom Business Software<\/li>\n              <\/ul>\n            <\/div>\n          <\/div>\n        <\/article>\n\n        <article class=\"ba-service ba-reveal\">\n          <h3 class=\"ba-service-heading\">\n            <button class=\"ba-service-row\" type=\"button\" id=\"ba-service-toggle-mobile-applications\" aria-expanded=\"false\" aria-controls=\"ba-service-panel-mobile-applications\">\n              <span class=\"ba-service-num\">03<\/span>\n              <span class=\"ba-service-name\">Mobile Applications<\/span>\n              <span class=\"ba-service-desc\">Thoughtfully designed mobile experiences for iOS, Android and cross-platform products.<\/span>\n              <span class=\"ba-service-arrow\" aria-hidden=\"true\">&#8599;<\/span>\n            <\/button>\n          <\/h3>\n          <div class=\"ba-service-panel\" id=\"ba-service-panel-mobile-applications\" role=\"region\" aria-labelledby=\"ba-service-toggle-mobile-applications\" hidden>\n            <div class=\"ba-service-panel-inner\">\n              <ul class=\"ba-service-panel-list\">\n                <li>Business Mobile Apps<\/li><li>Customer Apps<\/li><li>Marketplace Apps<\/li><li>E-commerce Apps<\/li>\n                <li>Delivery Apps<\/li><li>Booking Apps<\/li><li>Appointment Apps<\/li><li>Education Apps<\/li>\n                <li>Learning Apps<\/li><li>Student Apps<\/li><li>Community Apps<\/li><li>Social &amp; Networking Apps<\/li>\n                <li>Event Apps<\/li><li>Productivity Apps<\/li><li>Task Management Apps<\/li><li>Finance Apps<\/li>\n                <li>Employee Apps<\/li><li>Field Service Apps<\/li><li>Location-Based Apps<\/li><li>On-demand Service Apps<\/li>\n                <li>Membership Apps<\/li><li>Customer Loyalty Apps<\/li><li>Health &amp; Wellness Apps<\/li><li>Content &amp; Media Apps<\/li>\n                <li>Business Management Apps<\/li><li>Internal Company Apps<\/li><li>Communication Apps<\/li><li>Notification Apps<\/li>\n                <li>AI-powered Mobile Apps<\/li><li>Cross-platform Applications<\/li><li>Custom Mobile Products<\/li>\n              <\/ul>\n            <\/div>\n          <\/div>\n        <\/article>\n\n        <article class=\"ba-service ba-reveal\">\n          <h3 class=\"ba-service-heading\">\n            <button class=\"ba-service-row\" type=\"button\" id=\"ba-service-toggle-ai-automation\" aria-expanded=\"false\" aria-controls=\"ba-service-panel-ai-automation\">\n              <span class=\"ba-service-num\">04<\/span>\n              <span class=\"ba-service-name\">AI &amp; Automation<\/span>\n              <span class=\"ba-service-desc\">Practical AI and intelligent automation integrated into products and workflows.<\/span>\n              <span class=\"ba-service-arrow\" aria-hidden=\"true\">&#8599;<\/span>\n            <\/button>\n          <\/h3>\n          <div class=\"ba-service-panel\" id=\"ba-service-panel-ai-automation\" role=\"region\" aria-labelledby=\"ba-service-toggle-ai-automation\" hidden>\n            <div class=\"ba-service-panel-inner\">\n              <ul class=\"ba-service-panel-list\">\n                <li>AI Chatbots<\/li><li>AI Customer Support<\/li><li>AI Assistants<\/li><li>AI Document Processing<\/li>\n                <li>AI Document Summarisation<\/li><li>AI Data Extraction<\/li><li>AI Content Generation<\/li><li>AI Knowledge Assistants<\/li>\n                <li>AI Search Systems<\/li><li>AI Recommendation Systems<\/li><li>AI-powered Internal Tools<\/li><li>AI Workflow Automation<\/li>\n                <li>Automated Email Workflows<\/li><li>Automated Reporting<\/li><li>Automated Data Processing<\/li><li>Lead Automation<\/li>\n                <li>Customer Follow-up Automation<\/li><li>Business Process Automation<\/li><li>Document &amp; Approval Automation<\/li><li>AI-powered Forms<\/li>\n                <li>AI-powered Analytics<\/li><li>AI Classification Systems<\/li><li>AI Transcription Systems<\/li><li>AI Meeting &amp; Conversation Summaries<\/li>\n                <li>AI Research Tools<\/li><li>AI-powered Customer Portals<\/li><li>API &amp; System Integrations<\/li><li>Workflow Integrations<\/li>\n                <li>Custom AI Solutions<\/li><li>AI Automation Consulting<\/li>\n              <\/ul>\n            <\/div>\n          <\/div>\n        <\/article>\n\n        <article class=\"ba-service ba-reveal\">\n          <h3 class=\"ba-service-heading\">\n            <button class=\"ba-service-row\" type=\"button\" id=\"ba-service-toggle-branding-design\" aria-expanded=\"false\" aria-controls=\"ba-service-panel-branding-design\">\n              <span class=\"ba-service-num\">05<\/span>\n              <span class=\"ba-service-name\">Branding &amp; Design<\/span>\n              <span class=\"ba-service-desc\">Distinctive identities and visual design that give your business a clear presence.<\/span>\n              <span class=\"ba-service-arrow\" aria-hidden=\"true\">&#8599;<\/span>\n            <\/button>\n          <\/h3>\n          <div class=\"ba-service-panel\" id=\"ba-service-panel-branding-design\" role=\"region\" aria-labelledby=\"ba-service-toggle-branding-design\" hidden>\n            <div class=\"ba-service-panel-inner\">\n              <ul class=\"ba-service-panel-list\">\n                <li>Brand Guidelines<\/li><li>Brand Identity<\/li><li>Brochures<\/li><li>Business Cards<\/li>\n                <li>Company Profiles<\/li><li>Dashboard Design<\/li><li>Design Systems<\/li><li>Digital Advertisements<\/li>\n                <li>Digital Product Design<\/li><li>Flyers<\/li><li>Landing Page Design<\/li><li>Logo Design<\/li>\n                <li>Marketing Campaign Design<\/li><li>Marketing Materials<\/li><li>Mobile App Design<\/li><li>Packaging Design<\/li>\n                <li>Pitch Decks<\/li><li>Posters<\/li><li>Presentation Design<\/li><li>Product Graphics<\/li>\n                <li>Social Media Graphics<\/li><li>UI Design<\/li><li>UX Design<\/li><li>Visual Identity Systems<\/li>\n                <li>Website Design<\/li>\n              <\/ul>\n            <\/div>\n          <\/div>\n        <\/article>\n\n        <article class=\"ba-service ba-reveal\">\n          <h3 class=\"ba-service-heading\">\n            <button class=\"ba-service-row\" type=\"button\" id=\"ba-service-toggle-beant-care\" aria-expanded=\"false\" aria-controls=\"ba-service-panel-beant-care\">\n              <span class=\"ba-service-num\">06<\/span>\n              <span class=\"ba-service-name\">BeAnt Care<\/span>\n              <span class=\"ba-service-desc\">Continuous support, improvements and technical care to keep your digital products performing.<\/span>\n              <span class=\"ba-service-arrow\" aria-hidden=\"true\">&#8599;<\/span>\n            <\/button>\n          <\/h3>\n          <div class=\"ba-service-panel\" id=\"ba-service-panel-beant-care\" role=\"region\" aria-labelledby=\"ba-service-toggle-beant-care\" hidden>\n            <div class=\"ba-service-panel-inner\">\n              <ul class=\"ba-service-panel-list\">\n                <li>Application Maintenance<\/li><li>Backup Management<\/li><li>Bug Fixes<\/li><li>Content Updates<\/li>\n                <li>Database Maintenance<\/li><li>Domain Support<\/li><li>Feature Updates<\/li><li>Hosting Support<\/li>\n                <li>Ongoing Development<\/li><li>Performance Improvements<\/li><li>Security Monitoring<\/li><li>Security Updates<\/li>\n                <li>Software Improvements<\/li><li>System Monitoring<\/li><li>Technical Support<\/li><li>UI Improvements<\/li>\n                <li>UX Improvements<\/li><li>Website Maintenance<\/li><li>Website Monitoring<\/li><li>Website Updates<\/li>\n              <\/ul>\n            <\/div>\n          <\/div>\n        <\/article>\n\n      <\/div>\n    <\/section>\n\n    <section class=\"ba-about ba-section\" style=\"background:#fff\">\n      <div class=\"ba-about-mark ba-reveal\"><b>15+<\/b><small>years of ideas<br>and innovation<\/small><\/div>\n      <div class=\"ba-about-copy ba-reveal\">\n        <p class=\"ba-kicker\">About beAnt<\/p>\n        <h2>Experience behind.<br><em>Ideas ahead.<\/em><\/h2>\n        <p>beAnt is a UK-founded digital and creative studio with a history stretching back to 2010.<\/p>\n        <p>Today, we bring together design, technology and creative thinking to build digital experiences that help businesses move forward.<\/p>\n        <a class=\"ba-under-link\" href=\"#REPLACE_WITH_ABOUT_PAGE_URL\">Discover beAnt <span>&#8599;<\/span><\/a>\n      <\/div>\n    <\/section>\n  <\/main>\n\n  <footer class=\"ba-footer\">\n    <div class=\"ba-footer-top\">\n      <a class=\"ba-logo ba-logo-light\" href=\"#\" data-ba-logo>\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=\"#\">Home<\/a>\n        <a href=\"#REPLACE_WITH_WORK_PAGE_URL\">Work<\/a>\n        <a href=\"#ba-services\" data-ba-inpage>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  \/* ---- mobile menu ---- *\/\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  \/* ---- scroll reveal ---- *\/\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  \/* ---- in-page anchor links (Services) scroll smoothly instead of using\n     default browser jump \u2014 everything else (Work\/About\/Blog\/Contact\/logo\n     placeholders) is left as plain navigation for WordPress to handle. ---- *\/\n  qa('[data-ba-inpage]').forEach(function (link) {\n    link.addEventListener('click', function (e) {\n      var targetId = link.getAttribute('href').slice(1);\n      var targetEl = document.getElementById(targetId);\n      if (!targetEl) return;\n      e.preventDefault();\n      var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n      targetEl.scrollIntoView({ behavior: reduce ? 'auto' : 'smooth', block: 'start' });\n    });\n  });\n\n  \/* ---- sliding nav indicator ---- *\/\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) {\n        void indicator.offsetWidth;\n        indicator.style.transition = '';\n      }\n    }\n\n    var pinnedLink = null;\n    function activeLink() { return pinnedLink || q('a.ba-active', navEl) || null; }\n    function syncToActive(instant) { moveIndicatorTo(activeLink(), instant); }\n\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\n    syncToActive(true);\n    if (document.fonts && document.fonts.ready) {\n      document.fonts.ready.then(function () { syncToActive(true); });\n    }\n    window.addEventListener('resize', function () { syncToActive(true); });\n    root.__baNavIndicatorSync = function (instant) { pinnedLink = null; syncToActive(instant); };\n\n    \/* Home \/ Services scroll-spy \u2014 Services is reachable by clicking the\n       nav link or by plain scrolling; the indicator should track whichever\n       is actually in view. *\/\n    var servicesSection = document.getElementById('ba-services');\n    var homeLink = q('#ba-nav a[href=\"#\"]');\n    var servicesLink = q('#ba-nav a[href=\"#ba-services\"]');\n    if (servicesSection && homeLink && servicesLink) {\n      function setActive(link) {\n        [homeLink, servicesLink].forEach(function (a) {\n          var isActive = a === link;\n          a.classList.toggle('ba-active', isActive);\n          if (isActive) a.setAttribute('aria-current', 'page'); else a.removeAttribute('aria-current');\n        });\n        root.__baNavIndicatorSync();\n      }\n      var navSpy = new IntersectionObserver(function (entries) {\n        entries.forEach(function (entry) {\n          setActive(entry.isIntersecting ? servicesLink : homeLink);\n        });\n      }, { rootMargin: '-96px 0px -50% 0px', threshold: 0 });\n      navSpy.observe(servicesSection);\n    }\n  })();\n\n  \/* ---- services accordion ---- *\/\n  (function () {\n    var services = qa('.ba-service');\n    if (!services.length) return;\n    var HOVER_INTENT_MS = 900;\n    var activeService = null;\n    var hoverTimer = null;\n\n    function closeService(el) {\n      var btn = q('.ba-service-row', el);\n      var panel = q('.ba-service-panel', el);\n      el.classList.remove('ba-is-active');\n      if (btn) btn.setAttribute('aria-expanded', 'false');\n      if (!panel) return;\n      panel.classList.remove('ba-is-open');\n      var done = false;\n      function finish(e) {\n        if (e && (e.target !== panel || e.propertyName !== 'grid-template-rows')) return;\n        if (done) return;\n        done = true;\n        panel.removeEventListener('transitionend', finish);\n        if (!panel.classList.contains('ba-is-open')) panel.hidden = true;\n      }\n      panel.addEventListener('transitionend', finish);\n      window.setTimeout(finish, 700);\n    }\n\n    function openService(el) {\n      if (activeService === el) return;\n      if (activeService) closeService(activeService);\n      activeService = el;\n      el.classList.add('ba-is-active');\n      var btn = q('.ba-service-row', el);\n      var panel = q('.ba-service-panel', el);\n      if (btn) btn.setAttribute('aria-expanded', 'true');\n      if (!panel) return;\n      panel.hidden = false;\n      void panel.offsetWidth;\n      requestAnimationFrame(function () { panel.classList.add('ba-is-open'); });\n    }\n\n    services.forEach(function (el) {\n      var btn = q('.ba-service-row', el);\n      if (!btn) return;\n      btn.addEventListener('click', function () {\n        window.clearTimeout(hoverTimer);\n        if (activeService === el) { closeService(el); activeService = null; }\n        else { openService(el); }\n      });\n      el.addEventListener('mouseenter', function () {\n        window.clearTimeout(hoverTimer);\n        if (activeService === el) return;\n        hoverTimer = window.setTimeout(function () { openService(el); }, HOVER_INTENT_MS);\n      });\n      el.addEventListener('mouseleave', function () { window.clearTimeout(hoverTimer); });\n    });\n  })();\n\n  \/* ---- hero carousel ---- *\/\n  (function () {\n    var carousel = q('.ba-hero-carousel');\n    if (!carousel) return;\n    var slides = qa('.ba-hero-slide', carousel);\n    var currentNumber = q('.ba-slider-current', carousel);\n    var announcement = q('.ba-slider-announcement', carousel);\n    var previousButton = q('.ba-slider-prev', carousel);\n    var nextButton = q('.ba-slider-next', carousel);\n    var reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');\n    var activeSlide = 0;\n    var autoplayTimer;\n    var touchStartX = 0;\n    var pointerInside = false;\n    var focusInside = false;\n\n    function restartProgress() {\n      carousel.classList.remove('ba-is-playing');\n      void carousel.offsetWidth;\n      if (!reducedMotion.matches && !carousel.classList.contains('ba-user-paused')) {\n        carousel.classList.add('ba-is-playing');\n      }\n    }\n    function showSlide(nextIndex, announce) {\n      if (announce === undefined) announce = true;\n      activeSlide = (nextIndex + slides.length) % slides.length;\n      slides.forEach(function (slide, index) {\n        var selected = index === activeSlide;\n        slide.classList.toggle('ba-is-active', selected);\n        slide.setAttribute('aria-hidden', String(!selected));\n      });\n      if (currentNumber) currentNumber.textContent = String(activeSlide + 1).padStart(2, '0');\n      if (announce && announcement) announcement.textContent = 'Slide ' + (activeSlide + 1) + ' of ' + slides.length + ': ' + slides[activeSlide].dataset.name;\n      restartProgress();\n    }\n    function scheduleAutoplay() {\n      clearInterval(autoplayTimer);\n      if (!reducedMotion.matches && !carousel.classList.contains('ba-user-paused')) {\n        autoplayTimer = setInterval(function () { showSlide(activeSlide + 1, false); }, 6500);\n      }\n    }\n    function moveManually(direction) { showSlide(activeSlide + direction); scheduleAutoplay(); }\n\n    if (previousButton) previousButton.addEventListener('click', function () { moveManually(-1); });\n    if (nextButton) nextButton.addEventListener('click', function () { moveManually(1); });\n    carousel.addEventListener('keydown', function (event) {\n      if (event.key === 'ArrowLeft') moveManually(-1);\n      if (event.key === 'ArrowRight') moveManually(1);\n    });\n    carousel.addEventListener('touchstart', function (event) { touchStartX = event.changedTouches[0].clientX; }, { passive: true });\n    carousel.addEventListener('touchend', function (event) {\n      var distance = event.changedTouches[0].clientX - touchStartX;\n      if (Math.abs(distance) > 48) moveManually(distance > 0 ? -1 : 1);\n    }, { passive: true });\n\n    function syncPausedState() {\n      var paused = pointerInside || focusInside || document.hidden;\n      carousel.classList.toggle('ba-user-paused', paused);\n      if (paused) clearInterval(autoplayTimer); else { restartProgress(); scheduleAutoplay(); }\n    }\n    carousel.addEventListener('mouseenter', function () { pointerInside = true; syncPausedState(); });\n    carousel.addEventListener('mouseleave', function () { pointerInside = false; syncPausedState(); });\n    carousel.addEventListener('focusin', function () { focusInside = true; syncPausedState(); });\n    carousel.addEventListener('focusout', function (event) {\n      if (!carousel.contains(event.relatedTarget)) { focusInside = false; syncPausedState(); }\n    });\n    document.addEventListener('visibilitychange', syncPausedState);\n    reducedMotion.addEventListener('change', function () { restartProgress(); scheduleAutoplay(); });\n\n    showSlide(0, false);\n    scheduleAutoplay();\n  })();\n\n  \/* ---- website-entry intro ----\n     Plays once per browser tab (sessionStorage) on first load of this\n     page, and replays in place any time the logo is clicked. Every state\n     class lives on #ba-root, never document.documentElement. *\/\n  (function () {\n    var introEl = document.getElementById('ba-site-intro');\n    var introLogo = document.getElementById('ba-site-intro-logo');\n    var navLogo = q('.ba-site-header .ba-logo .ba-logo-image');\n    if (!introEl || !introLogo || !navLogo) return;\n\n    var HOLD_MS = 1500;\n    var REVEAL_MS = 1000;\n    var FADE_MS = 400;\n    var running = false;\n    var SESSION_KEY = 'baIntroShown';\n\n    function decode(img) {\n      if (img.decode) return img.decode().catch(function () {});\n      return new Promise(function (resolve) {\n        if (img.complete) { resolve(); return; }\n        img.addEventListener('load', resolve, { once: true });\n        img.addEventListener('error', resolve, { once: true });\n      });\n    }\n    function afterTransition(el, prop, timeoutMs, cb) {\n      var done = false;\n      function finish() { if (done) return; done = true; el.removeEventListener('transitionend', onEnd); cb(); }\n      function onEnd(e) { if (e.target === el && e.propertyName === prop) finish(); }\n      el.addEventListener('transitionend', onEnd);\n      window.setTimeout(finish, timeoutMs);\n    }\n\n    function reveal() {\n      var startRect = introLogo.getBoundingClientRect();\n      var endRect = navLogo.getBoundingClientRect();\n      var scale = endRect.width \/ startRect.width;\n      var dx = (endRect.left + endRect.width \/ 2) - (startRect.left + startRect.width \/ 2);\n      var dy = (endRect.top + endRect.height \/ 2) - (startRect.top + startRect.height \/ 2);\n\n      introLogo.style.transform = 'translate(-50%,-50%) translate(' + dx + 'px,' + dy + 'px) scale(' + scale + ')';\n      introLogo.classList.add('ba-intro-logo-revealing');\n      introEl.classList.add('ba-intro-revealing');\n      root.classList.add('ba-intro-nav-in');\n\n      var HANDOFF_MS = 150;\n      var arrived = false;\n      function onArrived() { if (arrived) return; arrived = true; window.setTimeout(handoff, HANDOFF_MS); }\n      introLogo.addEventListener('transitionend', function (e) {\n        if (e.target === introLogo && e.propertyName === 'transform') onArrived();\n      }, { once: true });\n      window.setTimeout(onArrived, REVEAL_MS + 400);\n\n      function handoff() {\n        introLogo.classList.add('ba-intro-logo-handoff');\n        root.classList.add('ba-intro-handoff');\n        var finished = false;\n        function finish() {\n          if (finished) return;\n          finished = true;\n          root.classList.remove('ba-intro-handoff');\n          introLogo.classList.remove('ba-intro-logo-handoff');\n          introEl.classList.remove('ba-intro-fading-in');\n          introLogo.classList.remove('ba-intro-logo-fading-in');\n          beginHeroReveal();\n        }\n        introLogo.addEventListener('transitionend', function (e) {\n          if (e.target === introLogo && e.propertyName === 'opacity') finish();\n        }, { once: true });\n        window.setTimeout(finish, 400);\n      }\n\n      function beginHeroReveal() {\n        root.classList.add('ba-intro-hero-in');\n        var heroActions = q('.ba-hero-actions');\n        function cleanup() {\n          running = false;\n          root.classList.remove('ba-intro-armed', 'ba-intro-lock', 'ba-intro-hero-in', 'ba-intro-fade-in');\n        }\n        if (heroActions) afterTransition(heroActions, 'opacity', 900, cleanup);\n        else window.setTimeout(cleanup, 900);\n      }\n    }\n\n    function fadeInOpacity(el, transitionClass, cb) {\n      el.style.opacity = '0';\n      void el.offsetWidth;\n      el.classList.add(transitionClass);\n      requestAnimationFrame(function () { el.style.opacity = '1'; });\n      afterTransition(el, 'opacity', FADE_MS + 400, function () {\n        el.style.opacity = '';\n        el.classList.remove(transitionClass);\n        cb();\n      });\n    }\n    function beginFadeIn(cb) {\n      introLogo.style.opacity = '0';\n      fadeInOpacity(introEl, 'ba-intro-fading-in', function () {\n        fadeInOpacity(introLogo, 'ba-intro-logo-fading-in', cb);\n      });\n    }\n\n    function startTimeline(fadeIn) {\n      running = true;\n      root.classList.add('ba-intro-lock');\n      Promise.all([decode(introLogo), decode(navLogo)]).then(function () {\n        requestAnimationFrame(function () {\n          if (fadeIn) beginFadeIn(function () { window.setTimeout(reveal, HOLD_MS); });\n          else window.setTimeout(reveal, HOLD_MS);\n        });\n      });\n    }\n\n    function resetForReplay() {\n      introEl.classList.remove('ba-intro-revealing', 'ba-intro-fading-in');\n      introLogo.classList.remove('ba-intro-logo-revealing', 'ba-intro-logo-handoff', 'ba-intro-logo-fading-in');\n      root.classList.remove('ba-intro-nav-in', 'ba-intro-handoff', 'ba-intro-fade-in', 'ba-intro-hero-in');\n      introEl.style.transition = 'none'; introEl.style.opacity = '';\n      introLogo.style.transition = 'none'; introLogo.style.transform = ''; introLogo.style.opacity = '';\n      void introLogo.offsetWidth;\n      introEl.style.transition = ''; introLogo.style.transition = '';\n    }\n    function resetHeroForReplay() {\n      var activeSlideEl = q('.ba-hero-slide.ba-is-active');\n      var els = [];\n      if (activeSlideEl) {\n        ['.ba-eyebrow', 'h1', '.ba-hero-text'].forEach(function (sel) {\n          var el = q(sel, activeSlideEl);\n          if (el) els.push(el);\n        });\n      }\n      ['.ba-hero-actions', '.ba-slider-controls', '.ba-hero-foot'].forEach(function (sel) {\n        var el = q(sel);\n        if (el) els.push(el);\n      });\n      els.forEach(function (el) { el.style.transition = 'none'; el.style.opacity = '0'; el.style.transform = 'translateY(20px)'; });\n      if (els[0]) void els[0].offsetWidth;\n      els.forEach(function (el) { el.style.transition = ''; el.style.opacity = ''; el.style.transform = ''; });\n    }\n\n    function playIntro(fadeIn) {\n      if (running) return;\n      resetForReplay();\n      resetHeroForReplay();\n      window.scrollTo(0, 0);\n      root.classList.add('ba-intro-armed');\n      if (fadeIn) root.classList.add('ba-intro-fade-in');\n      startTimeline(!!fadeIn);\n    }\n\n    qa('[data-ba-logo]').forEach(function (link) {\n      link.addEventListener('click', function (e) {\n        e.preventDefault();\n        playIntro(true);\n      });\n    });\n\n    var reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n    var alreadyShown = false;\n    try { alreadyShown = sessionStorage.getItem(SESSION_KEY) === '1'; } catch (e) {}\n    if (!reduceMotion && !alreadyShown) {\n      try { sessionStorage.setItem(SESSION_KEY, '1'); } catch (e) {}\n      playIntro(false);\n    }\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":"","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-861","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/new.be-ant.com\/index.php?rest_route=\/wp\/v2\/pages\/861","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=861"}],"version-history":[{"count":12,"href":"https:\/\/new.be-ant.com\/index.php?rest_route=\/wp\/v2\/pages\/861\/revisions"}],"predecessor-version":[{"id":910,"href":"https:\/\/new.be-ant.com\/index.php?rest_route=\/wp\/v2\/pages\/861\/revisions\/910"}],"wp:attachment":[{"href":"https:\/\/new.be-ant.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=861"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}