{"id":9,"date":"2026-07-28T16:42:06","date_gmt":"2026-07-28T16:42:06","guid":{"rendered":"https:\/\/dotcom.group\/?page_id=9"},"modified":"2026-07-28T17:39:12","modified_gmt":"2026-07-28T17:39:12","slug":"home","status":"publish","type":"page","link":"https:\/\/dotcom.group\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"9\" class=\"elementor elementor-9\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ee6f183 e-con-full e-flex e-con e-parent\" data-id=\"ee6f183\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ba12f52 elementor-widget elementor-widget-html\" data-id=\"ba12f52\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- DOTCOM.GROUP \u2014 HOMEPAGE HERO BLOCK 01 -->\n<section class=\"dcg-hero\" id=\"dcg-home-hero\" aria-labelledby=\"dcg-hero-title\">\n  <style>\n    .dcg-hero,\n    .dcg-hero * {\n      box-sizing: border-box;\n    }\n\n    .dcg-hero {\n      --dcg-black: #050505;\n      --dcg-white: #ffffff;\n      --dcg-soft: #b8b8b8;\n      --dcg-line: rgba(255,255,255,.14);\n      --dcg-panel: rgba(255,255,255,.045);\n      position: relative;\n      width: 100%;\n      min-height: 100svh;\n      overflow: hidden;\n      color: var(--dcg-white);\n      background:\n        radial-gradient(circle at 50% 45%, rgba(255,255,255,.075), transparent 31%),\n        linear-gradient(180deg, #050505 0%, #000 100%);\n      font-family: Inter, Arial, Helvetica, sans-serif;\n      isolation: isolate;\n    }\n\n    .dcg-hero::before {\n      content: \"\";\n      position: absolute;\n      inset: 0;\n      z-index: -3;\n      opacity: .28;\n      background-image:\n        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),\n        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);\n      background-size: 64px 64px;\n      mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), transparent 92%);\n    }\n\n    .dcg-hero::after {\n      content: \"\";\n      position: absolute;\n      inset: 0;\n      z-index: -2;\n      pointer-events: none;\n      background: linear-gradient(90deg, rgba(0,0,0,.8), transparent 28%, transparent 72%, rgba(0,0,0,.8));\n    }\n\n    .dcg-shell {\n      width: min(1480px, calc(100% - 64px));\n      min-height: 100svh;\n      margin: 0 auto;\n      padding: 28px 0 36px;\n      display: grid;\n      grid-template-rows: auto 1fr auto;\n      gap: 24px;\n    }\n\n    .dcg-topbar {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: 24px;\n      position: relative;\n      z-index: 8;\n    }\n\n    .dcg-brand {\n      display: inline-flex;\n      align-items: center;\n      gap: 16px;\n      color: var(--dcg-white);\n      text-decoration: none;\n      min-width: 0;\n    }\n\n    .dcg-brand-mark {\n      width: 43px;\n      height: 43px;\n      display: grid;\n      grid-template-columns: repeat(3, 1fr);\n      grid-template-rows: repeat(3, 1fr);\n      gap: 5px;\n      flex: 0 0 auto;\n    }\n\n    .dcg-brand-mark i {\n      display: block;\n      width: 100%;\n      height: 100%;\n      border-radius: 50%;\n      background: currentColor;\n      transform: scale(.58);\n      transform-origin: center;\n    }\n\n    .dcg-brand-mark i:nth-child(5) {\n      transform: scale(1);\n    }\n\n    .dcg-brand-copy {\n      display: flex;\n      flex-direction: column;\n      gap: 5px;\n      min-width: 0;\n    }\n\n    .dcg-brand-name {\n      font-size: clamp(20px, 2vw, 27px);\n      font-weight: 400;\n      line-height: 1;\n      letter-spacing: -.045em;\n      white-space: nowrap;\n    }\n\n    .dcg-brand-tagline {\n      font-size: 9px;\n      line-height: 1;\n      letter-spacing: .23em;\n      text-transform: uppercase;\n      color: #a8a8a8;\n      white-space: nowrap;\n    }\n\n    .dcg-nav-cta {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      gap: 10px;\n      min-height: 48px;\n      padding: 0 21px;\n      border: 1px solid var(--dcg-line);\n      border-radius: 999px;\n      color: var(--dcg-white);\n      background: rgba(255,255,255,.035);\n      text-decoration: none;\n      font-size: 13px;\n      font-weight: 600;\n      letter-spacing: .02em;\n      backdrop-filter: blur(12px);\n      transition: color .25s ease, background .25s ease, border-color .25s ease, transform .25s ease;\n    }\n\n    .dcg-nav-cta:hover,\n    .dcg-nav-cta:focus-visible {\n      color: #050505;\n      background: #fff;\n      border-color: #fff;\n      transform: translateY(-2px);\n      outline: none;\n    }\n\n    .dcg-nav-cta svg {\n      width: 16px;\n      height: 16px;\n      stroke: currentColor;\n    }\n\n    .dcg-main {\n      display: grid;\n      grid-template-columns: minmax(0, 1.05fr) minmax(430px, .95fr);\n      align-items: center;\n      gap: clamp(48px, 7vw, 110px);\n      padding: clamp(52px, 8vh, 108px) 0 clamp(42px, 6vh, 74px);\n      position: relative;\n      z-index: 3;\n    }\n\n    .dcg-copy {\n      max-width: 800px;\n    }\n\n    .dcg-eyebrow {\n      display: inline-flex;\n      align-items: center;\n      gap: 11px;\n      margin: 0 0 28px;\n      color: #d7d7d7;\n      font-size: 11px;\n      font-weight: 600;\n      letter-spacing: .21em;\n      text-transform: uppercase;\n    }\n\n    .dcg-eyebrow::before {\n      content: \"\";\n      width: 8px;\n      height: 8px;\n      border-radius: 50%;\n      background: #fff;\n      box-shadow: 0 0 0 6px rgba(255,255,255,.08), 0 0 26px rgba(255,255,255,.45);\n      animation: dcgPulse 2.2s ease-in-out infinite;\n    }\n\n    .dcg-title {\n      max-width: 760px;\n      margin: 0;\n      font-size: clamp(58px, 7.1vw, 118px);\n      font-weight: 500;\n      line-height: .89;\n      letter-spacing: -.075em;\n      text-wrap: balance;\n    }\n\n    .dcg-title span {\n      display: block;\n      color: #7f7f7f;\n    }\n\n    .dcg-intro {\n      max-width: 670px;\n      margin: 32px 0 0;\n      color: var(--dcg-soft);\n      font-size: clamp(17px, 1.35vw, 21px);\n      line-height: 1.58;\n      letter-spacing: -.015em;\n    }\n\n    .dcg-actions {\n      display: flex;\n      flex-wrap: wrap;\n      align-items: center;\n      gap: 12px;\n      margin-top: 38px;\n    }\n\n    .dcg-btn {\n      min-height: 54px;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      gap: 10px;\n      padding: 0 23px;\n      border-radius: 999px;\n      text-decoration: none;\n      font-size: 14px;\n      font-weight: 700;\n      transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;\n    }\n\n    .dcg-btn-primary {\n      color: #050505;\n      background: #fff;\n      border: 1px solid #fff;\n    }\n\n    .dcg-btn-secondary {\n      color: #fff;\n      background: transparent;\n      border: 1px solid var(--dcg-line);\n    }\n\n    .dcg-btn:hover,\n    .dcg-btn:focus-visible {\n      transform: translateY(-2px);\n      outline: none;\n    }\n\n    .dcg-btn-primary:hover,\n    .dcg-btn-primary:focus-visible {\n      background: #dcdcdc;\n      border-color: #dcdcdc;\n    }\n\n    .dcg-btn-secondary:hover,\n    .dcg-btn-secondary:focus-visible {\n      background: rgba(255,255,255,.08);\n      border-color: rgba(255,255,255,.3);\n    }\n\n    .dcg-btn svg {\n      width: 17px;\n      height: 17px;\n      stroke: currentColor;\n    }\n\n    .dcg-visual-wrap {\n      position: relative;\n      min-height: 610px;\n      display: grid;\n      place-items: center;\n    }\n\n    .dcg-orbit {\n      position: absolute;\n      width: min(620px, 100%);\n      aspect-ratio: 1;\n      border-radius: 50%;\n      border: 1px solid rgba(255,255,255,.08);\n      animation: dcgRotate 24s linear infinite;\n    }\n\n    .dcg-orbit::before,\n    .dcg-orbit::after {\n      content: \"\";\n      position: absolute;\n      border-radius: 50%;\n      border: 1px solid rgba(255,255,255,.06);\n    }\n\n    .dcg-orbit::before {\n      inset: 11%;\n    }\n\n    .dcg-orbit::after {\n      inset: 23%;\n    }\n\n    .dcg-orbit-dot {\n      position: absolute;\n      width: 8px;\n      height: 8px;\n      border-radius: 50%;\n      background: #fff;\n      box-shadow: 0 0 22px rgba(255,255,255,.7);\n    }\n\n    .dcg-orbit-dot:nth-child(1) { top: 7%; left: 49%; }\n    .dcg-orbit-dot:nth-child(2) { top: 49%; right: 7%; }\n    .dcg-orbit-dot:nth-child(3) { bottom: 8%; left: 48%; }\n    .dcg-orbit-dot:nth-child(4) { top: 48%; left: 7%; }\n\n    .dcg-stage {\n      position: relative;\n      width: min(510px, 90%);\n      aspect-ratio: 1;\n      display: grid;\n      place-items: center;\n      border-radius: 50%;\n      background:\n        radial-gradient(circle, rgba(255,255,255,.08) 0, rgba(255,255,255,.025) 31%, transparent 63%);\n      perspective: 900px;\n    }\n\n    .dcg-network {\n      position: absolute;\n      inset: 3%;\n      width: 94%;\n      height: 94%;\n      opacity: .54;\n      pointer-events: none;\n      transition: transform .18s ease-out;\n    }\n\n    .dcg-network line {\n      stroke: rgba(255,255,255,.24);\n      stroke-width: .65;\n      stroke-dasharray: 4 9;\n      animation: dcgDash 16s linear infinite;\n    }\n\n    .dcg-network circle {\n      fill: rgba(255,255,255,.68);\n    }\n\n    .dcg-grid-mark {\n      position: relative;\n      width: min(280px, 56%);\n      aspect-ratio: 1;\n      display: grid;\n      grid-template-columns: repeat(3, 1fr);\n      grid-template-rows: repeat(3, 1fr);\n      gap: clamp(14px, 2.1vw, 24px);\n      padding: 9%;\n      border: 1px solid rgba(255,255,255,.09);\n      border-radius: 34px;\n      background: rgba(0,0,0,.62);\n      box-shadow:\n        0 40px 100px rgba(0,0,0,.7),\n        inset 0 0 52px rgba(255,255,255,.025),\n        0 0 0 1px rgba(255,255,255,.025);\n      backdrop-filter: blur(12px);\n      transform-style: preserve-3d;\n      transition: transform .18s ease-out;\n    }\n\n    .dcg-grid-mark::before {\n      content: \"\";\n      position: absolute;\n      inset: -22%;\n      border-radius: 50%;\n      z-index: -1;\n      background: radial-gradient(circle, rgba(255,255,255,.12), transparent 64%);\n      filter: blur(18px);\n      opacity: .68;\n    }\n\n    .dcg-node {\n      position: relative;\n      display: grid;\n      place-items: center;\n    }\n\n    .dcg-node::before {\n      content: \"\";\n      width: 52%;\n      aspect-ratio: 1;\n      border-radius: 50%;\n      background: #fff;\n      box-shadow: 0 0 24px rgba(255,255,255,.42);\n      animation: dcgFloat 3.2s ease-in-out infinite;\n    }\n\n    .dcg-node:nth-child(2)::before { animation-delay: -.2s; }\n    .dcg-node:nth-child(3)::before { animation-delay: -.65s; }\n    .dcg-node:nth-child(4)::before { animation-delay: -1.1s; }\n    .dcg-node:nth-child(5)::before {\n      width: 90%;\n      box-shadow: 0 0 44px rgba(255,255,255,.65), 0 0 90px rgba(255,255,255,.19);\n      animation: dcgCore 2.6s ease-in-out infinite;\n    }\n    .dcg-node:nth-child(6)::before { animation-delay: -.8s; }\n    .dcg-node:nth-child(7)::before { animation-delay: -1.45s; }\n    .dcg-node:nth-child(8)::before { animation-delay: -.35s; }\n    .dcg-node:nth-child(9)::before { animation-delay: -1.2s; }\n\n    .dcg-status {\n      position: absolute;\n      right: 0;\n      bottom: 7%;\n      width: min(340px, 76%);\n      padding: 18px;\n      border: 1px solid rgba(255,255,255,.11);\n      border-radius: 18px;\n      background: rgba(4,4,4,.74);\n      box-shadow: 0 24px 70px rgba(0,0,0,.46);\n      backdrop-filter: blur(16px);\n    }\n\n    .dcg-status-top {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: 14px;\n      margin-bottom: 13px;\n      color: #d5d5d5;\n      font-size: 10px;\n      letter-spacing: .18em;\n      text-transform: uppercase;\n    }\n\n    .dcg-status-live {\n      display: inline-flex;\n      align-items: center;\n      gap: 8px;\n      color: #fff;\n    }\n\n    .dcg-status-live::before {\n      content: \"\";\n      width: 6px;\n      height: 6px;\n      border-radius: 50%;\n      background: #fff;\n      box-shadow: 0 0 14px rgba(255,255,255,.75);\n    }\n\n    .dcg-terminal {\n      min-height: 48px;\n      color: #a5a5a5;\n      font-family: \"SFMono-Regular\", Consolas, \"Liberation Mono\", monospace;\n      font-size: 12px;\n      line-height: 1.65;\n    }\n\n    .dcg-terminal strong {\n      color: #fff;\n      font-weight: 500;\n    }\n\n    .dcg-cursor {\n      display: inline-block;\n      width: 7px;\n      height: 13px;\n      margin-left: 4px;\n      vertical-align: -2px;\n      background: #fff;\n      animation: dcgBlink .9s steps(1) infinite;\n    }\n\n    .dcg-bottom {\n      display: grid;\n      grid-template-columns: 1fr auto;\n      gap: 24px;\n      align-items: end;\n      padding-top: 22px;\n      border-top: 1px solid var(--dcg-line);\n      position: relative;\n      z-index: 5;\n    }\n\n    .dcg-services {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 8px 22px;\n      color: #8d8d8d;\n      font-size: 10px;\n      line-height: 1.5;\n      letter-spacing: .15em;\n      text-transform: uppercase;\n    }\n\n    .dcg-services span {\n      position: relative;\n    }\n\n    .dcg-services span:not(:last-child)::after {\n      content: \"\";\n      position: absolute;\n      top: 50%;\n      right: -13px;\n      width: 3px;\n      height: 3px;\n      border-radius: 50%;\n      background: #555;\n      transform: translateY(-50%);\n    }\n\n    .dcg-scroll {\n      display: inline-flex;\n      align-items: center;\n      gap: 11px;\n      color: #8d8d8d;\n      text-decoration: none;\n      font-size: 10px;\n      letter-spacing: .15em;\n      text-transform: uppercase;\n    }\n\n    .dcg-scroll-line {\n      position: relative;\n      width: 38px;\n      height: 1px;\n      overflow: hidden;\n      background: rgba(255,255,255,.15);\n    }\n\n    .dcg-scroll-line::after {\n      content: \"\";\n      position: absolute;\n      inset: 0;\n      background: #fff;\n      transform: translateX(-100%);\n      animation: dcgScrollLine 2s ease-in-out infinite;\n    }\n\n    @keyframes dcgPulse {\n      0%, 100% { transform: scale(.88); opacity: .7; }\n      50% { transform: scale(1); opacity: 1; }\n    }\n\n    @keyframes dcgRotate {\n      to { transform: rotate(360deg); }\n    }\n\n    @keyframes dcgDash {\n      to { stroke-dashoffset: -180; }\n    }\n\n    @keyframes dcgFloat {\n      0%, 100% { transform: scale(.88); opacity: .62; }\n      50% { transform: scale(1); opacity: 1; }\n    }\n\n    @keyframes dcgCore {\n      0%, 100% { transform: scale(.92); }\n      50% { transform: scale(1.06); }\n    }\n\n    @keyframes dcgBlink {\n      0%, 45% { opacity: 1; }\n      46%, 100% { opacity: 0; }\n    }\n\n    @keyframes dcgScrollLine {\n      0% { transform: translateX(-100%); }\n      45%, 55% { transform: translateX(0); }\n      100% { transform: translateX(100%); }\n    }\n\n    @media (max-width: 1100px) {\n      .dcg-shell {\n        width: min(100% - 40px, 1100px);\n      }\n\n      .dcg-main {\n        grid-template-columns: 1fr;\n        gap: 30px;\n      }\n\n      .dcg-copy {\n        max-width: 900px;\n      }\n\n      .dcg-visual-wrap {\n        min-height: 540px;\n      }\n\n      .dcg-stage {\n        width: min(500px, 84vw);\n      }\n\n      .dcg-orbit {\n        width: min(570px, 92vw);\n      }\n    }\n\n    @media (max-width: 680px) {\n      .dcg-shell {\n        width: min(100% - 28px, 680px);\n        padding-top: 20px;\n      }\n\n      .dcg-brand-tagline {\n        display: none;\n      }\n\n      .dcg-brand-mark {\n        width: 36px;\n        height: 36px;\n        gap: 4px;\n      }\n\n      .dcg-brand-name {\n        font-size: 20px;\n      }\n\n      .dcg-nav-cta {\n        min-height: 42px;\n        padding: 0 16px;\n        font-size: 12px;\n      }\n\n      .dcg-main {\n        padding-top: 58px;\n      }\n\n      .dcg-eyebrow {\n        margin-bottom: 22px;\n        font-size: 9px;\n      }\n\n      .dcg-title {\n        font-size: clamp(54px, 17vw, 78px);\n        letter-spacing: -.065em;\n      }\n\n      .dcg-intro {\n        margin-top: 25px;\n        font-size: 16px;\n      }\n\n      .dcg-actions {\n        align-items: stretch;\n      }\n\n      .dcg-btn {\n        width: 100%;\n      }\n\n      .dcg-visual-wrap {\n        min-height: 440px;\n      }\n\n      .dcg-grid-mark {\n        width: min(230px, 63vw);\n        border-radius: 28px;\n      }\n\n      .dcg-status {\n        right: 50%;\n        bottom: 1%;\n        width: min(320px, 94%);\n        transform: translateX(50%);\n      }\n\n      .dcg-bottom {\n        grid-template-columns: 1fr;\n      }\n\n      .dcg-scroll {\n        display: none;\n      }\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      .dcg-hero *,\n      .dcg-hero *::before,\n      .dcg-hero *::after {\n        animation-duration: .01ms !important;\n        animation-iteration-count: 1 !important;\n        scroll-behavior: auto !important;\n        transition-duration: .01ms !important;\n      }\n    }\n  <\/style>\n\n  <div class=\"dcg-shell\">\n    <div class=\"dcg-topbar\">\n      <a class=\"dcg-brand\" href=\"\/\" aria-label=\"dotcom.group home\">\n        <span class=\"dcg-brand-mark\" aria-hidden=\"true\">\n          <i><\/i><i><\/i><i><\/i>\n          <i><\/i><i><\/i><i><\/i>\n          <i><\/i><i><\/i><i><\/i>\n        <\/span>\n        <span class=\"dcg-brand-copy\">\n          <span class=\"dcg-brand-name\">dotcom.group<\/span>\n          <span class=\"dcg-brand-tagline\">Digital products. Intelligent systems.<\/span>\n        <\/span>\n      <\/a>\n\n      <a class=\"dcg-nav-cta\" href=\"#start-a-project\">\n        Start a project\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n          <path d=\"M5 12h14M13 6l6 6-6 6\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n        <\/svg>\n      <\/a>\n    <\/div>\n\n    <div class=\"dcg-main\">\n      <div class=\"dcg-copy\">\n        <p class=\"dcg-eyebrow\">Independent digital engineering group<\/p>\n\n        <h1 class=\"dcg-title\" id=\"dcg-hero-title\">\n          We build what\n          <span>comes next.<\/span>\n        <\/h1>\n\n        <p class=\"dcg-intro\">\n          Websites, applications, artificial intelligence and custom digital systems for individuals, companies, corporates and public-sector organisations.\n        <\/p>\n\n        <div class=\"dcg-actions\">\n          <a class=\"dcg-btn dcg-btn-primary\" href=\"#start-a-project\">\n            Build with us\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n              <path d=\"M5 12h14M13 6l6 6-6 6\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n            <\/svg>\n          <\/a>\n\n          <a class=\"dcg-btn dcg-btn-secondary\" href=\"#capabilities\">\n            Explore capabilities\n          <\/a>\n        <\/div>\n      <\/div>\n\n      <div class=\"dcg-visual-wrap\" aria-label=\"Interactive DotCom Group digital system visualisation\">\n        <div class=\"dcg-orbit\" aria-hidden=\"true\">\n          <span class=\"dcg-orbit-dot\"><\/span>\n          <span class=\"dcg-orbit-dot\"><\/span>\n          <span class=\"dcg-orbit-dot\"><\/span>\n          <span class=\"dcg-orbit-dot\"><\/span>\n        <\/div>\n\n        <div class=\"dcg-stage\" data-dcg-stage>\n          <svg class=\"dcg-network\" viewBox=\"0 0 600 600\" aria-hidden=\"true\">\n            <line x1=\"118\" y1=\"125\" x2=\"300\" y2=\"300\"\/>\n            <line x1=\"300\" y1=\"74\" x2=\"300\" y2=\"300\"\/>\n            <line x1=\"482\" y1=\"125\" x2=\"300\" y2=\"300\"\/>\n            <line x1=\"520\" y1=\"300\" x2=\"300\" y2=\"300\"\/>\n            <line x1=\"466\" y1=\"475\" x2=\"300\" y2=\"300\"\/>\n            <line x1=\"300\" y1=\"526\" x2=\"300\" y2=\"300\"\/>\n            <line x1=\"128\" y1=\"470\" x2=\"300\" y2=\"300\"\/>\n            <line x1=\"76\" y1=\"300\" x2=\"300\" y2=\"300\"\/>\n            <line x1=\"118\" y1=\"125\" x2=\"300\" y2=\"74\"\/>\n            <line x1=\"300\" y1=\"74\" x2=\"482\" y2=\"125\"\/>\n            <line x1=\"482\" y1=\"125\" x2=\"520\" y2=\"300\"\/>\n            <line x1=\"520\" y1=\"300\" x2=\"466\" y2=\"475\"\/>\n            <line x1=\"466\" y1=\"475\" x2=\"300\" y2=\"526\"\/>\n            <line x1=\"300\" y1=\"526\" x2=\"128\" y2=\"470\"\/>\n            <line x1=\"128\" y1=\"470\" x2=\"76\" y2=\"300\"\/>\n            <line x1=\"76\" y1=\"300\" x2=\"118\" y2=\"125\"\/>\n            <circle cx=\"118\" cy=\"125\" r=\"5\"\/>\n            <circle cx=\"300\" cy=\"74\" r=\"5\"\/>\n            <circle cx=\"482\" cy=\"125\" r=\"5\"\/>\n            <circle cx=\"520\" cy=\"300\" r=\"5\"\/>\n            <circle cx=\"466\" cy=\"475\" r=\"5\"\/>\n            <circle cx=\"300\" cy=\"526\" r=\"5\"\/>\n            <circle cx=\"128\" cy=\"470\" r=\"5\"\/>\n            <circle cx=\"76\" cy=\"300\" r=\"5\"\/>\n          <\/svg>\n\n          <div class=\"dcg-grid-mark\" data-dcg-mark aria-hidden=\"true\">\n            <span class=\"dcg-node\"><\/span>\n            <span class=\"dcg-node\"><\/span>\n            <span class=\"dcg-node\"><\/span>\n            <span class=\"dcg-node\"><\/span>\n            <span class=\"dcg-node\"><\/span>\n            <span class=\"dcg-node\"><\/span>\n            <span class=\"dcg-node\"><\/span>\n            <span class=\"dcg-node\"><\/span>\n            <span class=\"dcg-node\"><\/span>\n          <\/div>\n        <\/div>\n\n        <div class=\"dcg-status\" aria-live=\"polite\">\n          <div class=\"dcg-status-top\">\n            <span>dotcom.system<\/span>\n            <span class=\"dcg-status-live\">online<\/span>\n          <\/div>\n          <div class=\"dcg-terminal\">\n            <span data-dcg-terminal><strong>Ready.<\/strong> Select a capability to begin.<\/span><span class=\"dcg-cursor\" aria-hidden=\"true\"><\/span>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"dcg-bottom\">\n      <div class=\"dcg-services\" aria-label=\"DotCom Group capabilities\">\n        <span>Web development<\/span>\n        <span>Applications<\/span>\n        <span>AI systems<\/span>\n        <span>Automation<\/span>\n        <span>Custom software<\/span>\n        <span>Cloud &amp; data<\/span>\n      <\/div>\n\n      <a class=\"dcg-scroll\" href=\"#capabilities\">\n        Scroll to explore\n        <span class=\"dcg-scroll-line\" aria-hidden=\"true\"><\/span>\n      <\/a>\n    <\/div>\n  <\/div>\n\n  <script>\n    (function () {\n      const hero = document.getElementById('dcg-home-hero');\n      if (!hero || hero.dataset.ready === 'true') return;\n      hero.dataset.ready = 'true';\n\n      const stage = hero.querySelector('[data-dcg-stage]');\n      const mark = hero.querySelector('[data-dcg-mark]');\n      const network = hero.querySelector('.dcg-network');\n      const terminal = hero.querySelector('[data-dcg-terminal]');\n      const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n      if (stage && mark && network && !reduceMotion) {\n        stage.addEventListener('pointermove', function (event) {\n          const rect = stage.getBoundingClientRect();\n          const x = (event.clientX - rect.left) \/ rect.width - 0.5;\n          const y = (event.clientY - rect.top) \/ rect.height - 0.5;\n\n          mark.style.transform = 'rotateX(' + (-y * 10) + 'deg) rotateY(' + (x * 10) + 'deg) translate3d(' + (x * 8) + 'px,' + (y * 8) + 'px,0)';\n          network.style.transform = 'translate3d(' + (x * -12) + 'px,' + (y * -12) + 'px,0)';\n        });\n\n        stage.addEventListener('pointerleave', function () {\n          mark.style.transform = '';\n          network.style.transform = '';\n        });\n      }\n\n      if (terminal && !reduceMotion) {\n        const messages = [\n          '<strong>Ready.<\/strong> Select a capability to begin.',\n          '<strong>Web.<\/strong> High-performance digital platforms.',\n          '<strong>Apps.<\/strong> Products built around real users.',\n          '<strong>AI.<\/strong> Intelligent systems engineered for purpose.',\n          '<strong>Custom.<\/strong> Complex problems, precisely solved.'\n        ];\n        let index = 0;\n\n        window.setInterval(function () {\n          index = (index + 1) % messages.length;\n          terminal.style.opacity = '0';\n          window.setTimeout(function () {\n            terminal.innerHTML = messages[index];\n            terminal.style.opacity = '1';\n          }, 220);\n        }, 3400);\n\n        terminal.style.transition = 'opacity .22s ease';\n      }\n    })();\n  <\/script>\n<\/section>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-507220c e-con-full e-flex e-con e-parent\" data-id=\"507220c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-20271aa elementor-widget elementor-widget-html\" data-id=\"20271aa\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- DOTCOM.GROUP \u2014 HOMEPAGE CAPABILITIES BLOCK 02 -->\n<section class=\"dcg-capabilities\" id=\"capabilities\" aria-labelledby=\"dcg-capabilities-title\">\n  <style>\n    .dcg-capabilities,\n    .dcg-capabilities * {\n      box-sizing: border-box;\n    }\n\n    .dcg-capabilities {\n      --dcg-black: #050505;\n      --dcg-white: #ffffff;\n      --dcg-grey: #a5a5a5;\n      --dcg-line: rgba(255,255,255,.14);\n      position: relative;\n      width: 100%;\n      overflow: hidden;\n      color: var(--dcg-white);\n      background: var(--dcg-black);\n      font-family: Inter, Arial, Helvetica, sans-serif;\n    }\n\n    .dcg-capabilities::before {\n      content: \"\";\n      position: absolute;\n      inset: 0;\n      pointer-events: none;\n      opacity: .22;\n      background-image:\n        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),\n        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);\n      background-size: 72px 72px;\n      mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 85%, transparent);\n    }\n\n    .dcg-capabilities-shell {\n      position: relative;\n      z-index: 1;\n      width: min(1480px, calc(100% - 64px));\n      margin: 0 auto;\n      padding: clamp(100px, 11vw, 176px) 0;\n    }\n\n    .dcg-capabilities-head {\n      display: grid;\n      grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);\n      align-items: end;\n      gap: clamp(40px, 8vw, 130px);\n      padding-bottom: clamp(48px, 6vw, 82px);\n      border-bottom: 1px solid var(--dcg-line);\n    }\n\n    .dcg-capabilities-kicker {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      margin: 0 0 24px;\n      color: #cfcfcf;\n      font-size: 11px;\n      font-weight: 700;\n      line-height: 1.2;\n      letter-spacing: .22em;\n      text-transform: uppercase;\n    }\n\n    .dcg-capabilities-kicker::before {\n      content: \"\";\n      width: 7px;\n      height: 7px;\n      flex: 0 0 auto;\n      border-radius: 50%;\n      background: #fff;\n      box-shadow: 0 0 18px rgba(255,255,255,.45);\n    }\n\n    .dcg-capabilities-title {\n      max-width: 850px;\n      margin: 0;\n      font-size: clamp(48px, 6.2vw, 102px);\n      font-weight: 500;\n      line-height: .94;\n      letter-spacing: -.065em;\n      text-wrap: balance;\n    }\n\n    .dcg-capabilities-title span {\n      color: #757575;\n    }\n\n    .dcg-capabilities-summary {\n      max-width: 520px;\n      margin: 0 0 7px auto;\n      color: var(--dcg-grey);\n      font-size: clamp(17px, 1.35vw, 21px);\n      line-height: 1.62;\n      letter-spacing: -.016em;\n    }\n\n    .dcg-capabilities-layout {\n      display: grid;\n      grid-template-columns: minmax(0, 1fr) minmax(390px, .78fr);\n      gap: clamp(46px, 7vw, 112px);\n      align-items: start;\n      padding-top: clamp(52px, 7vw, 94px);\n    }\n\n    .dcg-capability-list {\n      border-top: 1px solid var(--dcg-line);\n    }\n\n    .dcg-capability-item {\n      position: relative;\n      display: grid;\n      grid-template-columns: 68px minmax(0, 1fr) auto;\n      align-items: center;\n      gap: 22px;\n      min-height: 142px;\n      width: 100%;\n      padding: 28px 4px;\n      border: 0;\n      border-bottom: 1px solid var(--dcg-line);\n      color: #858585;\n      background: transparent;\n      font: inherit;\n      text-align: left;\n      cursor: pointer;\n      transition: color .35s ease, padding .35s ease;\n    }\n\n    .dcg-capability-item::before {\n      content: \"\";\n      position: absolute;\n      left: 0;\n      bottom: -1px;\n      width: 0;\n      height: 1px;\n      background: #fff;\n      transition: width .45s cubic-bezier(.2,.75,.2,1);\n    }\n\n    .dcg-capability-item:hover,\n    .dcg-capability-item:focus-visible,\n    .dcg-capability-item.is-active {\n      color: #fff;\n      padding-left: 16px;\n      outline: none;\n    }\n\n    .dcg-capability-item:hover::before,\n    .dcg-capability-item:focus-visible::before,\n    .dcg-capability-item.is-active::before {\n      width: 100%;\n    }\n\n    .dcg-capability-number {\n      align-self: start;\n      padding-top: 8px;\n      color: currentColor;\n      font-size: 11px;\n      font-weight: 700;\n      letter-spacing: .16em;\n    }\n\n    .dcg-capability-main {\n      min-width: 0;\n    }\n\n    .dcg-capability-name {\n      display: block;\n      font-size: clamp(29px, 3.15vw, 54px);\n      font-weight: 500;\n      line-height: 1;\n      letter-spacing: -.048em;\n    }\n\n    .dcg-capability-tags {\n      display: block;\n      max-height: 0;\n      margin-top: 0;\n      overflow: hidden;\n      color: #9a9a9a;\n      font-size: 13px;\n      line-height: 1.55;\n      letter-spacing: .01em;\n      opacity: 0;\n      transform: translateY(7px);\n      transition:\n        max-height .4s ease,\n        margin .4s ease,\n        opacity .35s ease,\n        transform .35s ease;\n    }\n\n    .dcg-capability-item.is-active .dcg-capability-tags,\n    .dcg-capability-item:hover .dcg-capability-tags,\n    .dcg-capability-item:focus-visible .dcg-capability-tags {\n      max-height: 70px;\n      margin-top: 12px;\n      opacity: 1;\n      transform: translateY(0);\n    }\n\n    .dcg-capability-arrow {\n      width: 42px;\n      height: 42px;\n      display: grid;\n      place-items: center;\n      border: 1px solid currentColor;\n      border-radius: 50%;\n      opacity: .75;\n      transform: rotate(-45deg);\n      transition: color .3s ease, background .3s ease, transform .35s ease;\n    }\n\n    .dcg-capability-arrow svg {\n      width: 17px;\n      height: 17px;\n      stroke: currentColor;\n    }\n\n    .dcg-capability-item:hover .dcg-capability-arrow,\n    .dcg-capability-item:focus-visible .dcg-capability-arrow,\n    .dcg-capability-item.is-active .dcg-capability-arrow {\n      color: #050505;\n      background: #fff;\n      transform: rotate(0);\n    }\n\n    .dcg-capability-stage {\n      position: sticky;\n      top: 30px;\n      min-height: 620px;\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      overflow: hidden;\n      padding: clamp(28px, 3vw, 44px);\n      border: 1px solid var(--dcg-line);\n      border-radius: 2px;\n      background:\n        radial-gradient(circle at 50% 40%, rgba(255,255,255,.09), transparent 37%),\n        rgba(255,255,255,.022);\n    }\n\n    .dcg-capability-stage::before,\n    .dcg-capability-stage::after {\n      content: \"\";\n      position: absolute;\n      pointer-events: none;\n    }\n\n    .dcg-capability-stage::before {\n      inset: 0;\n      opacity: .32;\n      background-image:\n        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),\n        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);\n      background-size: 42px 42px;\n    }\n\n    .dcg-capability-stage::after {\n      inset: 20px;\n      border: 1px solid rgba(255,255,255,.06);\n    }\n\n    .dcg-stage-top,\n    .dcg-stage-content,\n    .dcg-stage-footer {\n      position: relative;\n      z-index: 2;\n    }\n\n    .dcg-stage-top {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: 18px;\n    }\n\n    .dcg-stage-status {\n      display: inline-flex;\n      align-items: center;\n      gap: 9px;\n      color: #bdbdbd;\n      font-size: 10px;\n      font-weight: 700;\n      letter-spacing: .18em;\n      text-transform: uppercase;\n    }\n\n    .dcg-stage-status::before {\n      content: \"\";\n      width: 6px;\n      height: 6px;\n      border-radius: 50%;\n      background: #fff;\n      box-shadow: 0 0 15px rgba(255,255,255,.7);\n      animation: dcgCapabilityPulse 2.1s ease-in-out infinite;\n    }\n\n    .dcg-stage-index {\n      color: #777;\n      font-size: 10px;\n      font-weight: 700;\n      letter-spacing: .18em;\n    }\n\n    .dcg-stage-visual {\n      position: relative;\n      width: min(320px, 82%);\n      aspect-ratio: 1;\n      margin: 52px auto 34px;\n      display: grid;\n      place-items: center;\n    }\n\n    .dcg-stage-ring {\n      position: absolute;\n      inset: 0;\n      border: 1px solid rgba(255,255,255,.13);\n      border-radius: 50%;\n      animation: dcgSpin 22s linear infinite;\n    }\n\n    .dcg-stage-ring::before,\n    .dcg-stage-ring::after {\n      content: \"\";\n      position: absolute;\n      width: 11px;\n      height: 11px;\n      border-radius: 50%;\n      background: #fff;\n      box-shadow: 0 0 20px rgba(255,255,255,.55);\n    }\n\n    .dcg-stage-ring::before {\n      left: 50%;\n      top: -6px;\n      transform: translateX(-50%);\n    }\n\n    .dcg-stage-ring::after {\n      right: 7%;\n      bottom: 17%;\n    }\n\n    .dcg-stage-ring-two {\n      inset: 17%;\n      border-style: dashed;\n      animation-direction: reverse;\n      animation-duration: 15s;\n    }\n\n    .dcg-dot-grid {\n      width: 132px;\n      height: 132px;\n      display: grid;\n      grid-template-columns: repeat(3, 1fr);\n      grid-template-rows: repeat(3, 1fr);\n      gap: 17px;\n      transition: transform .5s cubic-bezier(.2,.75,.2,1);\n    }\n\n    .dcg-dot-grid i {\n      display: block;\n      width: 100%;\n      height: 100%;\n      border-radius: 50%;\n      background: #fff;\n      transform: scale(.58);\n      box-shadow: 0 0 17px rgba(255,255,255,.18);\n      transition: transform .45s ease, border-radius .45s ease, opacity .45s ease;\n    }\n\n    .dcg-dot-grid i:nth-child(5) {\n      transform: scale(1);\n      box-shadow: 0 0 32px rgba(255,255,255,.28);\n    }\n\n    .dcg-capability-stage[data-mode=\"apps\"] .dcg-dot-grid {\n      transform: rotate(45deg) scale(.92);\n    }\n\n    .dcg-capability-stage[data-mode=\"apps\"] .dcg-dot-grid i {\n      border-radius: 22%;\n    }\n\n    .dcg-capability-stage[data-mode=\"ai\"] .dcg-dot-grid i:nth-child(2),\n    .dcg-capability-stage[data-mode=\"ai\"] .dcg-dot-grid i:nth-child(4),\n    .dcg-capability-stage[data-mode=\"ai\"] .dcg-dot-grid i:nth-child(6),\n    .dcg-capability-stage[data-mode=\"ai\"] .dcg-dot-grid i:nth-child(8) {\n      transform: scale(.28);\n      opacity: .62;\n    }\n\n    .dcg-capability-stage[data-mode=\"systems\"] .dcg-dot-grid {\n      transform: scale(1.08);\n    }\n\n    .dcg-capability-stage[data-mode=\"systems\"] .dcg-dot-grid i:nth-child(1),\n    .dcg-capability-stage[data-mode=\"systems\"] .dcg-dot-grid i:nth-child(3),\n    .dcg-capability-stage[data-mode=\"systems\"] .dcg-dot-grid i:nth-child(7),\n    .dcg-capability-stage[data-mode=\"systems\"] .dcg-dot-grid i:nth-child(9) {\n      border-radius: 10%;\n      transform: scale(.75);\n    }\n\n    .dcg-stage-label {\n      margin: 0;\n      font-size: clamp(34px, 3.5vw, 58px);\n      font-weight: 500;\n      line-height: .96;\n      letter-spacing: -.055em;\n    }\n\n    .dcg-stage-description {\n      min-height: 76px;\n      margin: 20px 0 0;\n      color: #a4a4a4;\n      font-size: 15px;\n      line-height: 1.62;\n    }\n\n    .dcg-stage-footer {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: 20px;\n      padding-top: 26px;\n      border-top: 1px solid var(--dcg-line);\n    }\n\n    .dcg-stage-footer span {\n      color: #838383;\n      font-size: 10px;\n      font-weight: 700;\n      line-height: 1.4;\n      letter-spacing: .16em;\n      text-transform: uppercase;\n    }\n\n    .dcg-stage-link {\n      display: inline-flex;\n      align-items: center;\n      gap: 9px;\n      color: #fff;\n      text-decoration: none;\n      font-size: 13px;\n      font-weight: 700;\n    }\n\n    .dcg-stage-link svg {\n      width: 16px;\n      height: 16px;\n      stroke: currentColor;\n      transition: transform .25s ease;\n    }\n\n    .dcg-stage-link:hover svg,\n    .dcg-stage-link:focus-visible svg {\n      transform: translate(3px,-3px);\n    }\n\n    @keyframes dcgCapabilityPulse {\n      0%, 100% { opacity: .42; transform: scale(.82); }\n      50% { opacity: 1; transform: scale(1); }\n    }\n\n    @keyframes dcgSpin {\n      to { transform: rotate(360deg); }\n    }\n\n    @media (max-width: 1040px) {\n      .dcg-capabilities-head,\n      .dcg-capabilities-layout {\n        grid-template-columns: 1fr;\n      }\n\n      .dcg-capabilities-summary {\n        margin-left: 0;\n      }\n\n      .dcg-capability-stage {\n        position: relative;\n        top: auto;\n        min-height: 560px;\n      }\n    }\n\n    @media (max-width: 680px) {\n      .dcg-capabilities-shell {\n        width: min(100% - 34px, 1480px);\n        padding: 82px 0 92px;\n      }\n\n      .dcg-capabilities-title {\n        font-size: clamp(43px, 14vw, 65px);\n      }\n\n      .dcg-capabilities-layout {\n        gap: 42px;\n      }\n\n      .dcg-capability-item {\n        grid-template-columns: 38px minmax(0, 1fr) 36px;\n        gap: 12px;\n        min-height: 118px;\n        padding: 23px 0;\n      }\n\n      .dcg-capability-item:hover,\n      .dcg-capability-item:focus-visible,\n      .dcg-capability-item.is-active {\n        padding-left: 8px;\n      }\n\n      .dcg-capability-name {\n        font-size: clamp(27px, 8.8vw, 40px);\n      }\n\n      .dcg-capability-arrow {\n        width: 36px;\n        height: 36px;\n      }\n\n      .dcg-capability-stage {\n        min-height: 510px;\n        padding: 24px;\n      }\n\n      .dcg-stage-visual {\n        width: min(250px, 76%);\n        margin-top: 44px;\n      }\n\n      .dcg-dot-grid {\n        width: 105px;\n        height: 105px;\n        gap: 13px;\n      }\n\n      .dcg-stage-footer {\n        align-items: flex-start;\n        flex-direction: column;\n      }\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      .dcg-capabilities *,\n      .dcg-capabilities *::before,\n      .dcg-capabilities *::after {\n        scroll-behavior: auto !important;\n        animation-duration: .01ms !important;\n        animation-iteration-count: 1 !important;\n        transition-duration: .01ms !important;\n      }\n    }\n  <\/style>\n\n  <div class=\"dcg-capabilities-shell\">\n    <header class=\"dcg-capabilities-head\">\n      <div>\n        <p class=\"dcg-capabilities-kicker\">What we build<\/p>\n        <h2 class=\"dcg-capabilities-title\" id=\"dcg-capabilities-title\">\n          One group. <span>Every digital capability.<\/span>\n        <\/h2>\n      <\/div>\n\n      <p class=\"dcg-capabilities-summary\">\n        From a first idea to an enterprise-scale platform, we bring strategy, design,\n        engineering and intelligence together under one technical team.\n      <\/p>\n    <\/header>\n\n    <div class=\"dcg-capabilities-layout\">\n      <div class=\"dcg-capability-list\" role=\"tablist\" aria-label=\"DotCom Group capabilities\">\n        <button class=\"dcg-capability-item is-active\"\n                type=\"button\"\n                role=\"tab\"\n                aria-selected=\"true\"\n                data-mode=\"web\"\n                data-index=\"01 \/ 04\"\n                data-title=\"Web platforms\"\n                data-description=\"High-performance websites, ecommerce, marketplaces, portals and digital experiences designed around real commercial objectives.\">\n          <span class=\"dcg-capability-number\">01<\/span>\n          <span class=\"dcg-capability-main\">\n            <span class=\"dcg-capability-name\">Web platforms<\/span>\n            <span class=\"dcg-capability-tags\">Websites \u00b7 Ecommerce \u00b7 Portals \u00b7 Marketplaces \u00b7 Membership systems<\/span>\n          <\/span>\n          <span class=\"dcg-capability-arrow\" aria-hidden=\"true\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\">\n              <path d=\"M5 19 19 5M9 5h10v10\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n            <\/svg>\n          <\/span>\n        <\/button>\n\n        <button class=\"dcg-capability-item\"\n                type=\"button\"\n                role=\"tab\"\n                aria-selected=\"false\"\n                data-mode=\"apps\"\n                data-index=\"02 \/ 04\"\n                data-title=\"Applications\"\n                data-description=\"Purpose-built mobile, web and internal applications that simplify complex tasks and create better experiences for customers and teams.\">\n          <span class=\"dcg-capability-number\">02<\/span>\n          <span class=\"dcg-capability-main\">\n            <span class=\"dcg-capability-name\">Applications<\/span>\n            <span class=\"dcg-capability-tags\">Mobile apps \u00b7 Web apps \u00b7 SaaS products \u00b7 Internal tools \u00b7 Customer platforms<\/span>\n          <\/span>\n          <span class=\"dcg-capability-arrow\" aria-hidden=\"true\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\">\n              <path d=\"M5 19 19 5M9 5h10v10\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n            <\/svg>\n          <\/span>\n        <\/button>\n\n        <button class=\"dcg-capability-item\"\n                type=\"button\"\n                role=\"tab\"\n                aria-selected=\"false\"\n                data-mode=\"ai\"\n                data-index=\"03 \/ 04\"\n                data-title=\"AI solutions\"\n                data-description=\"Bespoke AI applications, agents, intelligent automation and private knowledge systems built around your organisation, data and workflows.\">\n          <span class=\"dcg-capability-number\">03<\/span>\n          <span class=\"dcg-capability-main\">\n            <span class=\"dcg-capability-name\">AI solutions<\/span>\n            <span class=\"dcg-capability-tags\">AI agents \u00b7 Automation \u00b7 Computer vision \u00b7 Knowledge systems \u00b7 Intelligent software<\/span>\n          <\/span>\n          <span class=\"dcg-capability-arrow\" aria-hidden=\"true\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\">\n              <path d=\"M5 19 19 5M9 5h10v10\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n            <\/svg>\n          <\/span>\n        <\/button>\n\n        <button class=\"dcg-capability-item\"\n                type=\"button\"\n                role=\"tab\"\n                aria-selected=\"false\"\n                data-mode=\"systems\"\n                data-index=\"04 \/ 04\"\n                data-title=\"Custom systems\"\n                data-description=\"Secure bespoke software, integrations, dashboards and infrastructure engineered to solve needs that off-the-shelf technology cannot.\">\n          <span class=\"dcg-capability-number\">04<\/span>\n          <span class=\"dcg-capability-main\">\n            <span class=\"dcg-capability-name\">Custom systems<\/span>\n            <span class=\"dcg-capability-tags\">Custom software \u00b7 APIs \u00b7 Integrations \u00b7 Data platforms \u00b7 Cloud infrastructure<\/span>\n          <\/span>\n          <span class=\"dcg-capability-arrow\" aria-hidden=\"true\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\">\n              <path d=\"M5 19 19 5M9 5h10v10\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n            <\/svg>\n          <\/span>\n        <\/button>\n      <\/div>\n\n      <aside class=\"dcg-capability-stage\" data-mode=\"web\" aria-live=\"polite\">\n        <div class=\"dcg-stage-top\">\n          <span class=\"dcg-stage-status\">Capability active<\/span>\n          <span class=\"dcg-stage-index\">01 \/ 04<\/span>\n        <\/div>\n\n        <div class=\"dcg-stage-content\">\n          <div class=\"dcg-stage-visual\" aria-hidden=\"true\">\n            <span class=\"dcg-stage-ring\"><\/span>\n            <span class=\"dcg-stage-ring dcg-stage-ring-two\"><\/span>\n            <span class=\"dcg-dot-grid\">\n              <i><\/i><i><\/i><i><\/i>\n              <i><\/i><i><\/i><i><\/i>\n              <i><\/i><i><\/i><i><\/i>\n            <\/span>\n          <\/div>\n\n          <h3 class=\"dcg-stage-label\">Web platforms<\/h3>\n          <p class=\"dcg-stage-description\">\n            High-performance websites, ecommerce, marketplaces, portals and digital\n            experiences designed around real commercial objectives.\n          <\/p>\n        <\/div>\n\n        <div class=\"dcg-stage-footer\">\n          <span>Strategy \u00b7 UX \u00b7 Engineering \u00b7 Growth<\/span>\n          <a class=\"dcg-stage-link\" href=\"#start-project\">\n            Explore capability\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n              <path d=\"M5 19 19 5M9 5h10v10\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n            <\/svg>\n          <\/a>\n        <\/div>\n      <\/aside>\n    <\/div>\n  <\/div>\n\n  <script>\n    (() => {\n      const section = document.getElementById('capabilities');\n      if (!section || section.dataset.dcgReady === 'true') return;\n      section.dataset.dcgReady = 'true';\n\n      const items = [...section.querySelectorAll('.dcg-capability-item')];\n      const stage = section.querySelector('.dcg-capability-stage');\n      const index = section.querySelector('.dcg-stage-index');\n      const title = section.querySelector('.dcg-stage-label');\n      const description = section.querySelector('.dcg-stage-description');\n\n      const activate = (item) => {\n        items.forEach((entry) => {\n          const active = entry === item;\n          entry.classList.toggle('is-active', active);\n          entry.setAttribute('aria-selected', String(active));\n        });\n\n        stage.dataset.mode = item.dataset.mode;\n        index.textContent = item.dataset.index;\n        title.textContent = item.dataset.title;\n        description.textContent = item.dataset.description;\n      };\n\n      items.forEach((item) => {\n        item.addEventListener('mouseenter', () => activate(item));\n        item.addEventListener('focus', () => activate(item));\n        item.addEventListener('click', () => activate(item));\n      });\n    })();\n  <\/script>\n<\/section>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9b49d07 e-con-full e-flex e-con e-parent\" data-id=\"9b49d07\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-63d228e elementor-widget elementor-widget-html\" data-id=\"63d228e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- DOTCOM.GROUP \u2014 HOMEPAGE AUDIENCE BLOCK 03 -->\n<section class=\"dcg-audience\" id=\"who-we-build-for\" aria-labelledby=\"dcg-audience-title\">\n  <style>\n    .dcg-audience,\n    .dcg-audience * {\n      box-sizing: border-box;\n    }\n\n    .dcg-audience {\n      --dcg-black: #050505;\n      --dcg-white: #ffffff;\n      --dcg-grey: #8f8f8f;\n      --dcg-soft: #d7d7d7;\n      --dcg-line: rgba(5,5,5,.14);\n      position: relative;\n      width: 100%;\n      overflow: hidden;\n      color: var(--dcg-black);\n      background: var(--dcg-white);\n      font-family: Inter, Arial, Helvetica, sans-serif;\n    }\n\n    .dcg-audience-shell {\n      width: min(1480px, calc(100% - 64px));\n      margin: 0 auto;\n      padding: clamp(100px, 11vw, 176px) 0;\n    }\n\n    .dcg-audience-head {\n      display: grid;\n      grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);\n      gap: clamp(44px, 8vw, 126px);\n      align-items: end;\n      padding-bottom: clamp(52px, 7vw, 92px);\n      border-bottom: 1px solid var(--dcg-line);\n    }\n\n    .dcg-audience-kicker {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      margin: 0 0 24px;\n      color: #4f4f4f;\n      font-size: 11px;\n      font-weight: 700;\n      line-height: 1.2;\n      letter-spacing: .22em;\n      text-transform: uppercase;\n    }\n\n    .dcg-audience-kicker::before {\n      content: \"\";\n      width: 7px;\n      height: 7px;\n      border-radius: 50%;\n      background: #050505;\n      box-shadow: 0 0 0 5px rgba(5,5,5,.06);\n    }\n\n    .dcg-audience-title {\n      max-width: 860px;\n      margin: 0;\n      font-size: clamp(48px, 6.2vw, 102px);\n      font-weight: 500;\n      line-height: .94;\n      letter-spacing: -.065em;\n      text-wrap: balance;\n    }\n\n    .dcg-audience-title span {\n      color: #9c9c9c;\n    }\n\n    .dcg-audience-intro {\n      max-width: 540px;\n      margin: 0 0 6px auto;\n      color: #626262;\n      font-size: clamp(17px, 1.34vw, 21px);\n      line-height: 1.62;\n      letter-spacing: -.016em;\n    }\n\n    .dcg-audience-grid {\n      display: grid;\n      grid-template-columns: repeat(12, minmax(0, 1fr));\n      gap: 18px;\n      padding-top: clamp(58px, 7vw, 96px);\n    }\n\n    .dcg-audience-card {\n      position: relative;\n      min-height: 420px;\n      overflow: hidden;\n      border: 1px solid var(--dcg-line);\n      background: #fff;\n      cursor: pointer;\n      isolation: isolate;\n      transition:\n        background .42s ease,\n        color .42s ease,\n        transform .42s cubic-bezier(.2,.75,.2,1),\n        box-shadow .42s ease;\n    }\n\n    .dcg-audience-card:nth-child(1),\n    .dcg-audience-card:nth-child(2),\n    .dcg-audience-card:nth-child(3) {\n      grid-column: span 4;\n    }\n\n    .dcg-audience-card:nth-child(4),\n    .dcg-audience-card:nth-child(5) {\n      grid-column: span 6;\n    }\n\n    .dcg-audience-card::before {\n      content: \"\";\n      position: absolute;\n      inset: 0;\n      z-index: -2;\n      opacity: 0;\n      background:\n        radial-gradient(circle at 74% 22%, rgba(255,255,255,.12), transparent 26%),\n        #050505;\n      transition: opacity .42s ease;\n    }\n\n    .dcg-audience-card::after {\n      content: \"\";\n      position: absolute;\n      inset: 0;\n      z-index: -1;\n      opacity: .55;\n      background-image:\n        linear-gradient(rgba(5,5,5,.035) 1px, transparent 1px),\n        linear-gradient(90deg, rgba(5,5,5,.035) 1px, transparent 1px);\n      background-size: 36px 36px;\n      transition: opacity .42s ease, filter .42s ease;\n    }\n\n    .dcg-audience-card:hover,\n    .dcg-audience-card:focus-within,\n    .dcg-audience-card.is-active {\n      color: #fff;\n      transform: translateY(-8px);\n      box-shadow: 0 26px 70px rgba(0,0,0,.16);\n    }\n\n    .dcg-audience-card:hover::before,\n    .dcg-audience-card:focus-within::before,\n    .dcg-audience-card.is-active::before {\n      opacity: 1;\n    }\n\n    .dcg-audience-card:hover::after,\n    .dcg-audience-card:focus-within::after,\n    .dcg-audience-card.is-active::after {\n      opacity: .18;\n      filter: invert(1);\n    }\n\n    .dcg-audience-card-inner {\n      min-height: inherit;\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      padding: clamp(28px, 3vw, 44px);\n    }\n\n    .dcg-audience-card-top {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: 18px;\n    }\n\n    .dcg-audience-index {\n      color: #8d8d8d;\n      font-size: 10px;\n      font-weight: 700;\n      letter-spacing: .18em;\n      transition: color .4s ease;\n    }\n\n    .dcg-audience-card:hover .dcg-audience-index,\n    .dcg-audience-card:focus-within .dcg-audience-index,\n    .dcg-audience-card.is-active .dcg-audience-index {\n      color: #8f8f8f;\n    }\n\n    .dcg-audience-icon {\n      position: relative;\n      width: 62px;\n      height: 62px;\n      border: 1px solid currentColor;\n      border-radius: 50%;\n      opacity: .7;\n      transition:\n        opacity .4s ease,\n        transform .45s cubic-bezier(.2,.75,.2,1),\n        background .4s ease,\n        color .4s ease;\n    }\n\n    .dcg-audience-card:hover .dcg-audience-icon,\n    .dcg-audience-card:focus-within .dcg-audience-icon,\n    .dcg-audience-card.is-active .dcg-audience-icon {\n      color: #050505;\n      background: #fff;\n      opacity: 1;\n      transform: rotate(90deg);\n    }\n\n    .dcg-audience-icon span {\n      position: absolute;\n      width: 7px;\n      height: 7px;\n      border-radius: 50%;\n      background: currentColor;\n    }\n\n    .dcg-audience-icon span:nth-child(1) { left: 17px; top: 17px; }\n    .dcg-audience-icon span:nth-child(2) { right: 17px; top: 17px; }\n    .dcg-audience-icon span:nth-child(3) { left: 50%; top: 50%; width: 12px; height: 12px; transform: translate(-50%,-50%); }\n    .dcg-audience-icon span:nth-child(4) { left: 17px; bottom: 17px; }\n    .dcg-audience-icon span:nth-child(5) { right: 17px; bottom: 17px; }\n\n    .dcg-audience-card-main {\n      padding-top: 74px;\n    }\n\n    .dcg-audience-name {\n      max-width: 410px;\n      margin: 0;\n      font-size: clamp(34px, 3.55vw, 60px);\n      font-weight: 500;\n      line-height: .95;\n      letter-spacing: -.055em;\n      text-wrap: balance;\n    }\n\n    .dcg-audience-copy {\n      max-width: 460px;\n      margin: 24px 0 0;\n      color: #737373;\n      font-size: 15px;\n      line-height: 1.64;\n      transition: color .42s ease;\n    }\n\n    .dcg-audience-card:hover .dcg-audience-copy,\n    .dcg-audience-card:focus-within .dcg-audience-copy,\n    .dcg-audience-card.is-active .dcg-audience-copy {\n      color: #bcbcbc;\n    }\n\n    .dcg-audience-solutions {\n      max-height: 0;\n      margin: 0;\n      overflow: hidden;\n      opacity: 0;\n      transform: translateY(10px);\n      transition:\n        max-height .45s ease,\n        margin .45s ease,\n        opacity .38s ease,\n        transform .38s ease;\n    }\n\n    .dcg-audience-card:hover .dcg-audience-solutions,\n    .dcg-audience-card:focus-within .dcg-audience-solutions,\n    .dcg-audience-card.is-active .dcg-audience-solutions {\n      max-height: 120px;\n      margin-top: 24px;\n      opacity: 1;\n      transform: translateY(0);\n    }\n\n    .dcg-audience-solutions span {\n      display: inline-block;\n      margin: 0 8px 8px 0;\n      padding: 8px 11px;\n      border: 1px solid rgba(255,255,255,.18);\n      color: #d5d5d5;\n      font-size: 10px;\n      font-weight: 700;\n      line-height: 1;\n      letter-spacing: .09em;\n      text-transform: uppercase;\n    }\n\n    .dcg-audience-footer {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: 18px;\n      margin-top: 42px;\n      padding-top: 22px;\n      border-top: 1px solid currentColor;\n      color: #8b8b8b;\n      transition: color .42s ease;\n    }\n\n    .dcg-audience-card:hover .dcg-audience-footer,\n    .dcg-audience-card:focus-within .dcg-audience-footer,\n    .dcg-audience-card.is-active .dcg-audience-footer {\n      color: #7f7f7f;\n    }\n\n    .dcg-audience-footer-label {\n      font-size: 10px;\n      font-weight: 700;\n      letter-spacing: .16em;\n      text-transform: uppercase;\n    }\n\n    .dcg-audience-link {\n      display: inline-flex;\n      align-items: center;\n      gap: 8px;\n      color: inherit;\n      text-decoration: none;\n      font-size: 12px;\n      font-weight: 700;\n    }\n\n    .dcg-audience-link svg {\n      width: 16px;\n      height: 16px;\n      stroke: currentColor;\n      transform: rotate(-45deg);\n      transition: transform .3s ease;\n    }\n\n    .dcg-audience-card:hover .dcg-audience-link svg,\n    .dcg-audience-card:focus-within .dcg-audience-link svg,\n    .dcg-audience-card.is-active .dcg-audience-link svg {\n      transform: rotate(0);\n    }\n\n    .dcg-audience-closing {\n      display: grid;\n      grid-template-columns: minmax(0, 1fr) auto;\n      gap: 36px;\n      align-items: center;\n      margin-top: clamp(58px, 7vw, 92px);\n      padding-top: 36px;\n      border-top: 1px solid var(--dcg-line);\n    }\n\n    .dcg-audience-closing p {\n      max-width: 860px;\n      margin: 0;\n      font-size: clamp(24px, 2.35vw, 38px);\n      font-weight: 500;\n      line-height: 1.18;\n      letter-spacing: -.04em;\n    }\n\n    .dcg-audience-cta {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      min-height: 54px;\n      padding: 0 24px;\n      border: 1px solid #050505;\n      color: #fff;\n      background: #050505;\n      text-decoration: none;\n      font-size: 12px;\n      font-weight: 700;\n      letter-spacing: .08em;\n      text-transform: uppercase;\n      transition: color .28s ease, background .28s ease;\n    }\n\n    .dcg-audience-cta:hover,\n    .dcg-audience-cta:focus-visible {\n      color: #050505;\n      background: #fff;\n      outline: none;\n    }\n\n    @media (max-width: 1120px) {\n      .dcg-audience-card:nth-child(1),\n      .dcg-audience-card:nth-child(2),\n      .dcg-audience-card:nth-child(3),\n      .dcg-audience-card:nth-child(4),\n      .dcg-audience-card:nth-child(5) {\n        grid-column: span 6;\n      }\n\n      .dcg-audience-card:nth-child(5) {\n        grid-column: 4 \/ span 6;\n      }\n    }\n\n    @media (max-width: 920px) {\n      .dcg-audience-head {\n        grid-template-columns: 1fr;\n      }\n\n      .dcg-audience-intro {\n        margin-left: 0;\n      }\n\n      .dcg-audience-closing {\n        grid-template-columns: 1fr;\n      }\n\n      .dcg-audience-cta {\n        justify-self: start;\n      }\n    }\n\n    @media (max-width: 680px) {\n      .dcg-audience-shell {\n        width: min(100% - 34px, 1480px);\n        padding: 82px 0 92px;\n      }\n\n      .dcg-audience-title {\n        font-size: clamp(43px, 14vw, 65px);\n      }\n\n      .dcg-audience-grid {\n        gap: 14px;\n      }\n\n      .dcg-audience-card:nth-child(1),\n      .dcg-audience-card:nth-child(2),\n      .dcg-audience-card:nth-child(3),\n      .dcg-audience-card:nth-child(4),\n      .dcg-audience-card:nth-child(5) {\n        grid-column: 1 \/ -1;\n      }\n\n      .dcg-audience-card {\n        min-height: 390px;\n      }\n\n      .dcg-audience-card-main {\n        padding-top: 56px;\n      }\n\n      .dcg-audience-name {\n        font-size: clamp(34px, 11vw, 50px);\n      }\n\n      .dcg-audience-icon {\n        width: 54px;\n        height: 54px;\n      }\n\n      .dcg-audience-icon span:nth-child(1) { left: 14px; top: 14px; }\n      .dcg-audience-icon span:nth-child(2) { right: 14px; top: 14px; }\n      .dcg-audience-icon span:nth-child(4) { left: 14px; bottom: 14px; }\n      .dcg-audience-icon span:nth-child(5) { right: 14px; bottom: 14px; }\n    }\n\n    @media (hover: none) {\n      .dcg-audience-card.is-active .dcg-audience-solutions {\n        max-height: 120px;\n        margin-top: 24px;\n        opacity: 1;\n        transform: translateY(0);\n      }\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      .dcg-audience *,\n      .dcg-audience *::before,\n      .dcg-audience *::after {\n        animation-duration: .01ms !important;\n        animation-iteration-count: 1 !important;\n        transition-duration: .01ms !important;\n      }\n    }\n  <\/style>\n\n  <div class=\"dcg-audience-shell\">\n    <header class=\"dcg-audience-head\">\n      <div>\n        <p class=\"dcg-audience-kicker\">Who we build for<\/p>\n        <h2 class=\"dcg-audience-title\" id=\"dcg-audience-title\">\n          Built for ambition. <span>Designed for scale.<\/span>\n        <\/h2>\n      <\/div>\n\n      <p class=\"dcg-audience-intro\">\n        We adapt the team, architecture and delivery model to the organisation in front of us \u2014\n        from a founder validating an idea to a public body modernising critical digital services.\n      <\/p>\n    <\/header>\n\n    <div class=\"dcg-audience-grid\">\n      <article class=\"dcg-audience-card is-active\">\n        <div class=\"dcg-audience-card-inner\">\n          <div class=\"dcg-audience-card-top\">\n            <span class=\"dcg-audience-index\">01 \/ 05<\/span>\n            <span class=\"dcg-audience-icon\" aria-hidden=\"true\">\n              <span><\/span><span><\/span><span><\/span><span><\/span><span><\/span>\n            <\/span>\n          <\/div>\n\n          <div class=\"dcg-audience-card-main\">\n            <h3 class=\"dcg-audience-name\">Individuals & founders<\/h3>\n            <p class=\"dcg-audience-copy\">\n              Turn an early concept into a credible product, platform or digital business with the right technical foundation from day one.\n            <\/p>\n\n            <div class=\"dcg-audience-solutions\">\n              <span>Concept validation<\/span>\n              <span>MVP development<\/span>\n              <span>Product design<\/span>\n            <\/div>\n\n            <div class=\"dcg-audience-footer\">\n              <span class=\"dcg-audience-footer-label\">From idea to launch<\/span>\n              <a class=\"dcg-audience-link\" href=\"#start-project\">\n                Explore\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n                  <path d=\"M5 19 19 5M9 5h10v10\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                <\/svg>\n              <\/a>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/article>\n\n      <article class=\"dcg-audience-card\">\n        <div class=\"dcg-audience-card-inner\">\n          <div class=\"dcg-audience-card-top\">\n            <span class=\"dcg-audience-index\">02 \/ 05<\/span>\n            <span class=\"dcg-audience-icon\" aria-hidden=\"true\">\n              <span><\/span><span><\/span><span><\/span><span><\/span><span><\/span>\n            <\/span>\n          <\/div>\n\n          <div class=\"dcg-audience-card-main\">\n            <h3 class=\"dcg-audience-name\">Startups & scale-ups<\/h3>\n            <p class=\"dcg-audience-copy\">\n              Build faster, strengthen your product and create an engineering platform capable of supporting users, investment and growth.\n            <\/p>\n\n            <div class=\"dcg-audience-solutions\">\n              <span>Product teams<\/span>\n              <span>SaaS platforms<\/span>\n              <span>Technical scaling<\/span>\n            <\/div>\n\n            <div class=\"dcg-audience-footer\">\n              <span class=\"dcg-audience-footer-label\">Build beyond the MVP<\/span>\n              <a class=\"dcg-audience-link\" href=\"#start-project\">\n                Explore\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n                  <path d=\"M5 19 19 5M9 5h10v10\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                <\/svg>\n              <\/a>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/article>\n\n      <article class=\"dcg-audience-card\">\n        <div class=\"dcg-audience-card-inner\">\n          <div class=\"dcg-audience-card-top\">\n            <span class=\"dcg-audience-index\">03 \/ 05<\/span>\n            <span class=\"dcg-audience-icon\" aria-hidden=\"true\">\n              <span><\/span><span><\/span><span><\/span><span><\/span><span><\/span>\n            <\/span>\n          <\/div>\n\n          <div class=\"dcg-audience-card-main\">\n            <h3 class=\"dcg-audience-name\">Established companies<\/h3>\n            <p class=\"dcg-audience-copy\">\n              Improve customer experiences, replace inefficient processes and connect fragmented systems with technology designed around the business.\n            <\/p>\n\n            <div class=\"dcg-audience-solutions\">\n              <span>Digital transformation<\/span>\n              <span>Automation<\/span>\n              <span>System integration<\/span>\n            <\/div>\n\n            <div class=\"dcg-audience-footer\">\n              <span class=\"dcg-audience-footer-label\">Modernise operations<\/span>\n              <a class=\"dcg-audience-link\" href=\"#start-project\">\n                Explore\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n                  <path d=\"M5 19 19 5M9 5h10v10\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                <\/svg>\n              <\/a>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/article>\n\n      <article class=\"dcg-audience-card\">\n        <div class=\"dcg-audience-card-inner\">\n          <div class=\"dcg-audience-card-top\">\n            <span class=\"dcg-audience-index\">04 \/ 05<\/span>\n            <span class=\"dcg-audience-icon\" aria-hidden=\"true\">\n              <span><\/span><span><\/span><span><\/span><span><\/span><span><\/span>\n            <\/span>\n          <\/div>\n\n          <div class=\"dcg-audience-card-main\">\n            <h3 class=\"dcg-audience-name\">Corporate & enterprise<\/h3>\n            <p class=\"dcg-audience-copy\">\n              Deliver secure, resilient and scalable digital products that integrate with complex environments, teams and governance requirements.\n            <\/p>\n\n            <div class=\"dcg-audience-solutions\">\n              <span>Enterprise platforms<\/span>\n              <span>Private AI<\/span>\n              <span>Legacy modernisation<\/span>\n              <span>Cloud systems<\/span>\n            <\/div>\n\n            <div class=\"dcg-audience-footer\">\n              <span class=\"dcg-audience-footer-label\">Engineering at scale<\/span>\n              <a class=\"dcg-audience-link\" href=\"#start-project\">\n                Explore\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n                  <path d=\"M5 19 19 5M9 5h10v10\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                <\/svg>\n              <\/a>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/article>\n\n      <article class=\"dcg-audience-card\">\n        <div class=\"dcg-audience-card-inner\">\n          <div class=\"dcg-audience-card-top\">\n            <span class=\"dcg-audience-index\">05 \/ 05<\/span>\n            <span class=\"dcg-audience-icon\" aria-hidden=\"true\">\n              <span><\/span><span><\/span><span><\/span><span><\/span><span><\/span>\n            <\/span>\n          <\/div>\n\n          <div class=\"dcg-audience-card-main\">\n            <h3 class=\"dcg-audience-name\">Government & public sector<\/h3>\n            <p class=\"dcg-audience-copy\">\n              Create accessible, accountable and dependable digital services that improve delivery for citizens, departments and operational teams.\n            <\/p>\n\n            <div class=\"dcg-audience-solutions\">\n              <span>Digital public services<\/span>\n              <span>Secure portals<\/span>\n              <span>Accessibility<\/span>\n              <span>Data platforms<\/span>\n            <\/div>\n\n            <div class=\"dcg-audience-footer\">\n              <span class=\"dcg-audience-footer-label\">Technology with public value<\/span>\n              <a class=\"dcg-audience-link\" href=\"#start-project\">\n                Explore\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n                  <path d=\"M5 19 19 5M9 5h10v10\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                <\/svg>\n              <\/a>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/article>\n    <\/div>\n\n    <div class=\"dcg-audience-closing\">\n      <p>\n        Different scale. Different constraints. The same standard of thinking, design and engineering.\n      <\/p>\n      <a class=\"dcg-audience-cta\" href=\"#start-project\">Discuss your project<\/a>\n    <\/div>\n  <\/div>\n\n  <script>\n    (() => {\n      const section = document.getElementById('who-we-build-for');\n      if (!section || section.dataset.dcgReady === 'true') return;\n      section.dataset.dcgReady = 'true';\n\n      const cards = [...section.querySelectorAll('.dcg-audience-card')];\n\n      cards.forEach((card) => {\n        card.addEventListener('click', (event) => {\n          if (event.target.closest('a')) return;\n          cards.forEach((entry) => entry.classList.toggle('is-active', entry === card));\n        });\n\n        card.setAttribute('tabindex', '0');\n\n        card.addEventListener('keydown', (event) => {\n          if (event.key !== 'Enter' && event.key !== ' ') return;\n          event.preventDefault();\n          cards.forEach((entry) => entry.classList.toggle('is-active', entry === card));\n        });\n      });\n    })();\n  <\/script>\n<\/section>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5d492f3 e-con-full e-flex e-con e-parent\" data-id=\"5d492f3\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6ef3ac1 elementor-widget elementor-widget-html\" data-id=\"6ef3ac1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- DOTCOM.GROUP \u2014 HOMEPAGE TECHNOLOGY MAP BLOCK 04 -->\n<section class=\"dcg-techmap\" id=\"technology-map\" aria-labelledby=\"dcg-techmap-title\">\n  <style>\n    .dcg-techmap,\n    .dcg-techmap * {\n      box-sizing: border-box;\n    }\n\n    .dcg-techmap {\n      --dcg-black: #050505;\n      --dcg-white: #ffffff;\n      --dcg-grey: #9a9a9a;\n      --dcg-line: rgba(255,255,255,.13);\n      position: relative;\n      width: 100%;\n      overflow: hidden;\n      color: var(--dcg-white);\n      background: var(--dcg-black);\n      font-family: Inter, Arial, Helvetica, sans-serif;\n    }\n\n    .dcg-techmap::before {\n      content: \"\";\n      position: absolute;\n      inset: 0;\n      pointer-events: none;\n      opacity: .18;\n      background-image:\n        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),\n        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);\n      background-size: 64px 64px;\n      mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);\n    }\n\n    .dcg-techmap-shell {\n      position: relative;\n      z-index: 1;\n      width: min(1480px, calc(100% - 64px));\n      margin: 0 auto;\n      padding: clamp(100px, 11vw, 176px) 0;\n    }\n\n    .dcg-techmap-head {\n      display: grid;\n      grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);\n      gap: clamp(44px, 8vw, 126px);\n      align-items: end;\n      padding-bottom: clamp(54px, 7vw, 90px);\n      border-bottom: 1px solid var(--dcg-line);\n    }\n\n    .dcg-techmap-kicker {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      margin: 0 0 24px;\n      color: #c8c8c8;\n      font-size: 11px;\n      font-weight: 700;\n      line-height: 1.2;\n      letter-spacing: .22em;\n      text-transform: uppercase;\n    }\n\n    .dcg-techmap-kicker::before {\n      content: \"\";\n      width: 7px;\n      height: 7px;\n      border-radius: 50%;\n      background: #fff;\n      box-shadow: 0 0 18px rgba(255,255,255,.5);\n    }\n\n    .dcg-techmap-title {\n      max-width: 920px;\n      margin: 0;\n      font-size: clamp(48px, 6.2vw, 102px);\n      font-weight: 500;\n      line-height: .94;\n      letter-spacing: -.065em;\n      text-wrap: balance;\n    }\n\n    .dcg-techmap-title span {\n      color: #777;\n    }\n\n    .dcg-techmap-intro {\n      max-width: 560px;\n      margin: 0 0 7px auto;\n      color: var(--dcg-grey);\n      font-size: clamp(17px, 1.34vw, 21px);\n      line-height: 1.62;\n      letter-spacing: -.016em;\n    }\n\n    .dcg-techmap-workspace {\n      display: grid;\n      grid-template-columns: minmax(0, 1fr) minmax(360px, .62fr);\n      gap: clamp(34px, 5vw, 76px);\n      align-items: stretch;\n      padding-top: clamp(58px, 7vw, 96px);\n    }\n\n    .dcg-map-canvas {\n      position: relative;\n      min-height: 720px;\n      overflow: hidden;\n      border: 1px solid var(--dcg-line);\n      background:\n        radial-gradient(circle at 50% 44%, rgba(255,255,255,.08), transparent 26%),\n        rgba(255,255,255,.018);\n    }\n\n    .dcg-map-canvas::before,\n    .dcg-map-canvas::after {\n      content: \"\";\n      position: absolute;\n      pointer-events: none;\n    }\n\n    .dcg-map-canvas::before {\n      inset: 0;\n      opacity: .42;\n      background-image:\n        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),\n        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);\n      background-size: 40px 40px;\n    }\n\n    .dcg-map-canvas::after {\n      inset: 22px;\n      border: 1px solid rgba(255,255,255,.05);\n    }\n\n    .dcg-map-status {\n      position: absolute;\n      top: 28px;\n      left: 30px;\n      z-index: 4;\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      color: #8d8d8d;\n      font-size: 10px;\n      font-weight: 700;\n      letter-spacing: .18em;\n      text-transform: uppercase;\n    }\n\n    .dcg-map-status::before {\n      content: \"\";\n      width: 6px;\n      height: 6px;\n      border-radius: 50%;\n      background: #fff;\n      animation: dcgMapPulse 2s ease-in-out infinite;\n    }\n\n    .dcg-map-lines {\n      position: absolute;\n      inset: 0;\n      z-index: 1;\n      width: 100%;\n      height: 100%;\n      pointer-events: none;\n    }\n\n    .dcg-map-lines path {\n      fill: none;\n      stroke: rgba(255,255,255,.24);\n      stroke-width: 1.2;\n      stroke-dasharray: 7 10;\n      animation: dcgMapDash 18s linear infinite;\n    }\n\n    .dcg-map-lines path.is-active {\n      stroke: rgba(255,255,255,.95);\n      stroke-width: 1.8;\n      filter: drop-shadow(0 0 5px rgba(255,255,255,.45));\n    }\n\n    .dcg-map-core {\n      position: absolute;\n      z-index: 3;\n      left: 50%;\n      top: 50%;\n      width: 190px;\n      height: 190px;\n      transform: translate(-50%, -50%);\n      display: grid;\n      place-items: center;\n      border: 1px solid rgba(255,255,255,.28);\n      border-radius: 50%;\n      background: rgba(5,5,5,.84);\n      box-shadow:\n        0 0 0 22px rgba(255,255,255,.025),\n        0 0 0 44px rgba(255,255,255,.018);\n    }\n\n    .dcg-map-core::before {\n      content: \"\";\n      position: absolute;\n      inset: 13px;\n      border: 1px dashed rgba(255,255,255,.18);\n      border-radius: 50%;\n      animation: dcgMapSpin 20s linear infinite;\n    }\n\n    .dcg-core-grid {\n      width: 72px;\n      height: 72px;\n      display: grid;\n      grid-template-columns: repeat(3, 1fr);\n      grid-template-rows: repeat(3, 1fr);\n      gap: 9px;\n    }\n\n    .dcg-core-grid i {\n      display: block;\n      width: 100%;\n      height: 100%;\n      border-radius: 50%;\n      background: #fff;\n      transform: scale(.55);\n      opacity: .78;\n    }\n\n    .dcg-core-grid i:nth-child(5) {\n      transform: scale(1);\n      opacity: 1;\n      box-shadow: 0 0 24px rgba(255,255,255,.45);\n    }\n\n    .dcg-map-core-label {\n      position: absolute;\n      bottom: 31px;\n      left: 50%;\n      width: 160px;\n      transform: translateX(-50%);\n      color: #9c9c9c;\n      font-size: 9px;\n      font-weight: 700;\n      text-align: center;\n      letter-spacing: .15em;\n      text-transform: uppercase;\n    }\n\n    .dcg-map-node {\n      position: absolute;\n      z-index: 3;\n      width: 154px;\n      min-height: 92px;\n      padding: 18px 18px 16px;\n      border: 1px solid rgba(255,255,255,.17);\n      color: #a6a6a6;\n      background: rgba(5,5,5,.83);\n      text-align: left;\n      cursor: pointer;\n      transition:\n        color .32s ease,\n        background .32s ease,\n        border-color .32s ease,\n        transform .35s cubic-bezier(.2,.75,.2,1),\n        box-shadow .35s ease;\n    }\n\n    .dcg-map-node:hover,\n    .dcg-map-node:focus-visible,\n    .dcg-map-node.is-active {\n      color: #050505;\n      background: #fff;\n      border-color: #fff;\n      transform: translateY(-5px);\n      box-shadow: 0 18px 42px rgba(0,0,0,.24);\n      outline: none;\n    }\n\n    .dcg-map-node small {\n      display: block;\n      margin-bottom: 14px;\n      color: currentColor;\n      opacity: .62;\n      font-size: 9px;\n      font-weight: 700;\n      letter-spacing: .14em;\n    }\n\n    .dcg-map-node strong {\n      display: block;\n      color: currentColor;\n      font-size: 16px;\n      font-weight: 600;\n      line-height: 1.15;\n      letter-spacing: -.02em;\n    }\n\n    .dcg-map-node[data-step=\"strategy\"] { left: 7%; top: 13%; }\n    .dcg-map-node[data-step=\"design\"] { right: 7%; top: 13%; }\n    .dcg-map-node[data-step=\"engineering\"] { right: 5%; top: 43%; }\n    .dcg-map-node[data-step=\"intelligence\"] { right: 9%; bottom: 9%; }\n    .dcg-map-node[data-step=\"cloud\"] { left: 9%; bottom: 9%; }\n    .dcg-map-node[data-step=\"growth\"] { left: 5%; top: 43%; }\n\n    .dcg-map-panel {\n      min-height: 720px;\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      padding: clamp(30px, 3.2vw, 48px);\n      border: 1px solid var(--dcg-line);\n      background: #fff;\n      color: #050505;\n    }\n\n    .dcg-map-panel-top {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: 20px;\n      padding-bottom: 24px;\n      border-bottom: 1px solid rgba(5,5,5,.14);\n    }\n\n    .dcg-map-panel-status {\n      display: flex;\n      align-items: center;\n      gap: 9px;\n      color: #555;\n      font-size: 10px;\n      font-weight: 700;\n      letter-spacing: .16em;\n      text-transform: uppercase;\n    }\n\n    .dcg-map-panel-status::before {\n      content: \"\";\n      width: 6px;\n      height: 6px;\n      border-radius: 50%;\n      background: #050505;\n    }\n\n    .dcg-map-panel-index {\n      color: #888;\n      font-size: 10px;\n      font-weight: 700;\n      letter-spacing: .16em;\n    }\n\n    .dcg-map-panel-content {\n      padding: 64px 0;\n    }\n\n    .dcg-map-panel-eyebrow {\n      margin: 0 0 19px;\n      color: #7c7c7c;\n      font-size: 10px;\n      font-weight: 700;\n      letter-spacing: .18em;\n      text-transform: uppercase;\n    }\n\n    .dcg-map-panel-title {\n      margin: 0;\n      font-size: clamp(42px, 4.7vw, 74px);\n      font-weight: 500;\n      line-height: .92;\n      letter-spacing: -.06em;\n    }\n\n    .dcg-map-panel-copy {\n      max-width: 500px;\n      min-height: 105px;\n      margin: 28px 0 0;\n      color: #5f5f5f;\n      font-size: 16px;\n      line-height: 1.67;\n    }\n\n    .dcg-map-panel-list {\n      display: grid;\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n      gap: 0;\n      margin: 36px 0 0;\n      border-top: 1px solid rgba(5,5,5,.14);\n      border-left: 1px solid rgba(5,5,5,.14);\n    }\n\n    .dcg-map-panel-list span {\n      min-height: 60px;\n      display: flex;\n      align-items: center;\n      padding: 14px 16px;\n      border-right: 1px solid rgba(5,5,5,.14);\n      border-bottom: 1px solid rgba(5,5,5,.14);\n      color: #3f3f3f;\n      font-size: 11px;\n      font-weight: 700;\n      line-height: 1.35;\n      letter-spacing: .05em;\n      text-transform: uppercase;\n    }\n\n    .dcg-map-panel-footer {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: 20px;\n      padding-top: 25px;\n      border-top: 1px solid rgba(5,5,5,.14);\n    }\n\n    .dcg-map-panel-footer > span {\n      color: #777;\n      font-size: 10px;\n      font-weight: 700;\n      letter-spacing: .15em;\n      text-transform: uppercase;\n    }\n\n    .dcg-map-panel-link {\n      display: inline-flex;\n      align-items: center;\n      gap: 9px;\n      color: #050505;\n      text-decoration: none;\n      font-size: 13px;\n      font-weight: 700;\n    }\n\n    .dcg-map-panel-link svg {\n      width: 16px;\n      height: 16px;\n      stroke: currentColor;\n      transition: transform .25s ease;\n    }\n\n    .dcg-map-panel-link:hover svg,\n    .dcg-map-panel-link:focus-visible svg {\n      transform: translate(3px,-3px);\n    }\n\n    .dcg-techmap-bottom {\n      display: grid;\n      grid-template-columns: minmax(0, 1fr) auto;\n      gap: 30px;\n      align-items: center;\n      margin-top: clamp(54px, 7vw, 90px);\n      padding-top: 34px;\n      border-top: 1px solid var(--dcg-line);\n    }\n\n    .dcg-techmap-bottom p {\n      max-width: 960px;\n      margin: 0;\n      color: #cfcfcf;\n      font-size: clamp(23px, 2.3vw, 37px);\n      font-weight: 500;\n      line-height: 1.2;\n      letter-spacing: -.038em;\n    }\n\n    .dcg-techmap-cta {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      min-height: 54px;\n      padding: 0 24px;\n      border: 1px solid #fff;\n      color: #050505;\n      background: #fff;\n      text-decoration: none;\n      font-size: 12px;\n      font-weight: 700;\n      letter-spacing: .08em;\n      text-transform: uppercase;\n      transition: color .28s ease, background .28s ease;\n    }\n\n    .dcg-techmap-cta:hover,\n    .dcg-techmap-cta:focus-visible {\n      color: #fff;\n      background: transparent;\n      outline: none;\n    }\n\n    @keyframes dcgMapPulse {\n      0%,100% { opacity: .35; transform: scale(.8); }\n      50% { opacity: 1; transform: scale(1); }\n    }\n\n    @keyframes dcgMapDash {\n      to { stroke-dashoffset: -180; }\n    }\n\n    @keyframes dcgMapSpin {\n      to { transform: rotate(360deg); }\n    }\n\n    @media (max-width: 1120px) {\n      .dcg-techmap-head,\n      .dcg-techmap-workspace {\n        grid-template-columns: 1fr;\n      }\n\n      .dcg-techmap-intro {\n        margin-left: 0;\n      }\n\n      .dcg-map-panel {\n        min-height: 620px;\n      }\n    }\n\n    @media (max-width: 760px) {\n      .dcg-techmap-shell {\n        width: min(100% - 34px, 1480px);\n        padding: 82px 0 92px;\n      }\n\n      .dcg-techmap-title {\n        font-size: clamp(43px, 14vw, 65px);\n      }\n\n      .dcg-map-canvas {\n        min-height: 780px;\n      }\n\n      .dcg-map-core {\n        top: 46%;\n        width: 154px;\n        height: 154px;\n      }\n\n      .dcg-map-core-label {\n        bottom: 22px;\n      }\n\n      .dcg-map-node {\n        width: 132px;\n        min-height: 82px;\n        padding: 15px;\n      }\n\n      .dcg-map-node strong {\n        font-size: 14px;\n      }\n\n      .dcg-map-node[data-step=\"strategy\"] { left: 5%; top: 10%; }\n      .dcg-map-node[data-step=\"design\"] { right: 5%; top: 10%; }\n      .dcg-map-node[data-step=\"engineering\"] { right: 3%; top: 38%; }\n      .dcg-map-node[data-step=\"intelligence\"] { right: 5%; bottom: 8%; }\n      .dcg-map-node[data-step=\"cloud\"] { left: 5%; bottom: 8%; }\n      .dcg-map-node[data-step=\"growth\"] { left: 3%; top: 38%; }\n\n      .dcg-map-panel {\n        min-height: auto;\n      }\n\n      .dcg-map-panel-list {\n        grid-template-columns: 1fr;\n      }\n\n      .dcg-techmap-bottom {\n        grid-template-columns: 1fr;\n      }\n\n      .dcg-techmap-cta {\n        justify-self: start;\n      }\n    }\n\n    @media (max-width: 520px) {\n      .dcg-map-canvas {\n        min-height: 850px;\n      }\n\n      .dcg-map-core {\n        top: 47%;\n        width: 136px;\n        height: 136px;\n      }\n\n      .dcg-core-grid {\n        width: 60px;\n        height: 60px;\n        gap: 7px;\n      }\n\n      .dcg-map-node {\n        width: calc(50% - 27px);\n      }\n\n      .dcg-map-node[data-step=\"strategy\"] { left: 14px; top: 74px; }\n      .dcg-map-node[data-step=\"design\"] { right: 14px; top: 74px; }\n      .dcg-map-node[data-step=\"growth\"] { left: 14px; top: 245px; }\n      .dcg-map-node[data-step=\"engineering\"] { right: 14px; top: 245px; }\n      .dcg-map-node[data-step=\"cloud\"] { left: 14px; bottom: 42px; }\n      .dcg-map-node[data-step=\"intelligence\"] { right: 14px; bottom: 42px; }\n\n      .dcg-map-lines {\n        opacity: .62;\n      }\n\n      .dcg-map-panel-footer {\n        align-items: flex-start;\n        flex-direction: column;\n      }\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      .dcg-techmap *,\n      .dcg-techmap *::before,\n      .dcg-techmap *::after {\n        animation-duration: .01ms !important;\n        animation-iteration-count: 1 !important;\n        transition-duration: .01ms !important;\n      }\n    }\n  <\/style>\n\n  <div class=\"dcg-techmap-shell\">\n    <header class=\"dcg-techmap-head\">\n      <div>\n        <p class=\"dcg-techmap-kicker\">Connected capability<\/p>\n        <h2 class=\"dcg-techmap-title\" id=\"dcg-techmap-title\">\n          More than development. <span>A complete digital system.<\/span>\n        <\/h2>\n      <\/div>\n\n      <p class=\"dcg-techmap-intro\">\n        Every successful product depends on more than code. Explore the connected disciplines\n        we combine to move from a business objective to a secure, scalable and continuously\n        improving digital platform.\n      <\/p>\n    <\/header>\n\n    <div class=\"dcg-techmap-workspace\">\n      <div class=\"dcg-map-canvas\" aria-label=\"Interactive DotCom Group technology map\">\n        <span class=\"dcg-map-status\">System architecture live<\/span>\n\n        <svg class=\"dcg-map-lines\" viewBox=\"0 0 900 720\" preserveAspectRatio=\"none\" aria-hidden=\"true\">\n          <path class=\"is-active\" data-line=\"strategy\" d=\"M450 360 C330 300 250 220 145 150\"\/>\n          <path data-line=\"design\" d=\"M450 360 C570 290 650 220 755 150\"\/>\n          <path data-line=\"engineering\" d=\"M450 360 C580 360 680 350 790 350\"\/>\n          <path data-line=\"intelligence\" d=\"M450 360 C575 445 650 540 745 620\"\/>\n          <path data-line=\"cloud\" d=\"M450 360 C325 445 250 540 155 620\"\/>\n          <path data-line=\"growth\" d=\"M450 360 C320 360 220 350 110 350\"\/>\n        <\/svg>\n\n        <button class=\"dcg-map-node is-active\"\n                type=\"button\"\n                data-step=\"strategy\"\n                data-index=\"01 \/ 06\"\n                data-title=\"Strategy\"\n                data-copy=\"We define the commercial objective, user need, operating model and technical route before development begins.\"\n                data-items=\"Discovery|Product strategy|Technical planning|Roadmaps\">\n          <small>01<\/small>\n          <strong>Strategy<\/strong>\n        <\/button>\n\n        <button class=\"dcg-map-node\"\n                type=\"button\"\n                data-step=\"design\"\n                data-index=\"02 \/ 06\"\n                data-title=\"Experience design\"\n                data-copy=\"We turn complexity into clear, intuitive digital experiences that work across devices, users and accessibility needs.\"\n                data-items=\"UX research|Interface design|Prototyping|Design systems\">\n          <small>02<\/small>\n          <strong>Experience design<\/strong>\n        <\/button>\n\n        <button class=\"dcg-map-node\"\n                type=\"button\"\n                data-step=\"engineering\"\n                data-index=\"03 \/ 06\"\n                data-title=\"Engineering\"\n                data-copy=\"We build resilient websites, applications, platforms and APIs using architecture selected for the product\u2014not forced by a template.\"\n                data-items=\"Web development|App development|APIs|Custom software\">\n          <small>03<\/small>\n          <strong>Engineering<\/strong>\n        <\/button>\n\n        <button class=\"dcg-map-node\"\n                type=\"button\"\n                data-step=\"intelligence\"\n                data-index=\"04 \/ 06\"\n                data-title=\"Intelligence\"\n                data-copy=\"We add AI, automation and data-driven decision making where it creates measurable value, not simply because it is fashionable.\"\n                data-items=\"AI agents|Automation|Data intelligence|Private knowledge systems\">\n          <small>04<\/small>\n          <strong>Intelligence<\/strong>\n        <\/button>\n\n        <button class=\"dcg-map-node\"\n                type=\"button\"\n                data-step=\"cloud\"\n                data-index=\"05 \/ 06\"\n                data-title=\"Cloud & infrastructure\"\n                data-copy=\"We create the secure technical foundation required to deploy, integrate, monitor and scale digital products reliably.\"\n                data-items=\"Cloud architecture|Security|Integrations|DevOps\">\n          <small>05<\/small>\n          <strong>Cloud & infrastructure<\/strong>\n        <\/button>\n\n        <button class=\"dcg-map-node\"\n                type=\"button\"\n                data-step=\"growth\"\n                data-index=\"06 \/ 06\"\n                data-title=\"Support & growth\"\n                data-copy=\"We continue improving performance, capability and customer experience after launch as the organisation and product evolve.\"\n                data-items=\"Optimisation|Product support|Analytics|Continuous delivery\">\n          <small>06<\/small>\n          <strong>Support & growth<\/strong>\n        <\/button>\n\n        <div class=\"dcg-map-core\" aria-hidden=\"true\">\n          <span class=\"dcg-core-grid\">\n            <i><\/i><i><\/i><i><\/i>\n            <i><\/i><i><\/i><i><\/i>\n            <i><\/i><i><\/i><i><\/i>\n          <\/span>\n          <span class=\"dcg-map-core-label\">dotcom.group core<\/span>\n        <\/div>\n      <\/div>\n\n      <aside class=\"dcg-map-panel\" aria-live=\"polite\">\n        <div class=\"dcg-map-panel-top\">\n          <span class=\"dcg-map-panel-status\">Selected capability<\/span>\n          <span class=\"dcg-map-panel-index\">01 \/ 06<\/span>\n        <\/div>\n\n        <div class=\"dcg-map-panel-content\">\n          <p class=\"dcg-map-panel-eyebrow\">Connected discipline<\/p>\n          <h3 class=\"dcg-map-panel-title\">Strategy<\/h3>\n          <p class=\"dcg-map-panel-copy\">\n            We define the commercial objective, user need, operating model and technical route before development begins.\n          <\/p>\n\n          <div class=\"dcg-map-panel-list\" aria-label=\"Selected capability services\">\n            <span>Discovery<\/span>\n            <span>Product strategy<\/span>\n            <span>Technical planning<\/span>\n            <span>Roadmaps<\/span>\n          <\/div>\n        <\/div>\n\n        <div class=\"dcg-map-panel-footer\">\n          <span>One connected delivery model<\/span>\n          <a class=\"dcg-map-panel-link\" href=\"#start-project\">\n            Start a project\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n              <path d=\"M5 19 19 5M9 5h10v10\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n            <\/svg>\n          <\/a>\n        <\/div>\n      <\/aside>\n    <\/div>\n\n    <div class=\"dcg-techmap-bottom\">\n      <p>\n        We can join at any stage\u2014or take responsibility for the complete journey from first concept to long-term operation.\n      <\/p>\n      <a class=\"dcg-techmap-cta\" href=\"#start-project\">Map your project<\/a>\n    <\/div>\n  <\/div>\n\n  <script>\n    (() => {\n      const section = document.getElementById('technology-map');\n      if (!section || section.dataset.dcgReady === 'true') return;\n      section.dataset.dcgReady = 'true';\n\n      const nodes = [...section.querySelectorAll('.dcg-map-node')];\n      const lines = [...section.querySelectorAll('.dcg-map-lines path')];\n      const index = section.querySelector('.dcg-map-panel-index');\n      const title = section.querySelector('.dcg-map-panel-title');\n      const copy = section.querySelector('.dcg-map-panel-copy');\n      const list = section.querySelector('.dcg-map-panel-list');\n\n      const activate = (node) => {\n        const step = node.dataset.step;\n\n        nodes.forEach((entry) => entry.classList.toggle('is-active', entry === node));\n        lines.forEach((line) => line.classList.toggle('is-active', line.dataset.line === step));\n\n        index.textContent = node.dataset.index;\n        title.textContent = node.dataset.title;\n        copy.textContent = node.dataset.copy;\n\n        list.innerHTML = node.dataset.items\n          .split('|')\n          .map((item) => `<span>${item}<\/span>`)\n          .join('');\n      };\n\n      nodes.forEach((node) => {\n        node.addEventListener('mouseenter', () => activate(node));\n        node.addEventListener('focus', () => activate(node));\n        node.addEventListener('click', () => activate(node));\n      });\n    })();\n  <\/script>\n<\/section>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-64c64a4 e-con-full e-flex e-con e-parent\" data-id=\"64c64a4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-484529a elementor-widget elementor-widget-html\" data-id=\"484529a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- DOTCOM.GROUP \u2014 HOMEPAGE TECHNOLOGY MAP BLOCK 04 -->\n<section class=\"dcg-techmap\" id=\"technology-map\" aria-labelledby=\"dcg-techmap-title\">\n  <style>\n    .dcg-techmap,\n    .dcg-techmap * {\n      box-sizing: border-box;\n    }\n\n    .dcg-techmap {\n      --dcg-black: #050505;\n      --dcg-white: #ffffff;\n      --dcg-grey: #9a9a9a;\n      --dcg-line: rgba(255,255,255,.13);\n      position: relative;\n      width: 100%;\n      overflow: hidden;\n      color: var(--dcg-white);\n      background: var(--dcg-black);\n      font-family: Inter, Arial, Helvetica, sans-serif;\n    }\n\n    .dcg-techmap::before {\n      content: \"\";\n      position: absolute;\n      inset: 0;\n      pointer-events: none;\n      opacity: .18;\n      background-image:\n        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),\n        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);\n      background-size: 64px 64px;\n      mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);\n    }\n\n    .dcg-techmap-shell {\n      position: relative;\n      z-index: 1;\n      width: min(1480px, calc(100% - 64px));\n      margin: 0 auto;\n      padding: clamp(100px, 11vw, 176px) 0;\n    }\n\n    .dcg-techmap-head {\n      display: grid;\n      grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);\n      gap: clamp(44px, 8vw, 126px);\n      align-items: end;\n      padding-bottom: clamp(54px, 7vw, 90px);\n      border-bottom: 1px solid var(--dcg-line);\n    }\n\n    .dcg-techmap-kicker {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      margin: 0 0 24px;\n      color: #c8c8c8;\n      font-size: 11px;\n      font-weight: 700;\n      line-height: 1.2;\n      letter-spacing: .22em;\n      text-transform: uppercase;\n    }\n\n    .dcg-techmap-kicker::before {\n      content: \"\";\n      width: 7px;\n      height: 7px;\n      border-radius: 50%;\n      background: #fff;\n      box-shadow: 0 0 18px rgba(255,255,255,.5);\n    }\n\n    .dcg-techmap-title {\n      max-width: 920px;\n      margin: 0;\n      font-size: clamp(48px, 6.2vw, 102px);\n      font-weight: 500;\n      line-height: .94;\n      letter-spacing: -.065em;\n      text-wrap: balance;\n    }\n\n    .dcg-techmap-title span {\n      color: #777;\n    }\n\n    .dcg-techmap-intro {\n      max-width: 560px;\n      margin: 0 0 7px auto;\n      color: var(--dcg-grey);\n      font-size: clamp(17px, 1.34vw, 21px);\n      line-height: 1.62;\n      letter-spacing: -.016em;\n    }\n\n    .dcg-techmap-workspace {\n      display: grid;\n      grid-template-columns: minmax(0, 1fr) minmax(360px, .62fr);\n      gap: clamp(34px, 5vw, 76px);\n      align-items: stretch;\n      padding-top: clamp(58px, 7vw, 96px);\n    }\n\n    .dcg-map-canvas {\n      position: relative;\n      min-height: 720px;\n      overflow: hidden;\n      border: 1px solid var(--dcg-line);\n      background:\n        radial-gradient(circle at 50% 44%, rgba(255,255,255,.08), transparent 26%),\n        rgba(255,255,255,.018);\n    }\n\n    .dcg-map-canvas::before,\n    .dcg-map-canvas::after {\n      content: \"\";\n      position: absolute;\n      pointer-events: none;\n    }\n\n    .dcg-map-canvas::before {\n      inset: 0;\n      opacity: .42;\n      background-image:\n        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),\n        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);\n      background-size: 40px 40px;\n    }\n\n    .dcg-map-canvas::after {\n      inset: 22px;\n      border: 1px solid rgba(255,255,255,.05);\n    }\n\n    .dcg-map-status {\n      position: absolute;\n      top: 28px;\n      left: 30px;\n      z-index: 4;\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      color: #8d8d8d;\n      font-size: 10px;\n      font-weight: 700;\n      letter-spacing: .18em;\n      text-transform: uppercase;\n    }\n\n    .dcg-map-status::before {\n      content: \"\";\n      width: 6px;\n      height: 6px;\n      border-radius: 50%;\n      background: #fff;\n      animation: dcgMapPulse 2s ease-in-out infinite;\n    }\n\n    .dcg-map-lines {\n      position: absolute;\n      inset: 0;\n      z-index: 1;\n      width: 100%;\n      height: 100%;\n      pointer-events: none;\n    }\n\n    .dcg-map-lines path {\n      fill: none;\n      stroke: rgba(255,255,255,.24);\n      stroke-width: 1.2;\n      stroke-dasharray: 7 10;\n      animation: dcgMapDash 18s linear infinite;\n    }\n\n    .dcg-map-lines path.is-active {\n      stroke: rgba(255,255,255,.95);\n      stroke-width: 1.8;\n      filter: drop-shadow(0 0 5px rgba(255,255,255,.45));\n    }\n\n    .dcg-map-core {\n      position: absolute;\n      z-index: 3;\n      left: 50%;\n      top: 50%;\n      width: 190px;\n      height: 190px;\n      transform: translate(-50%, -50%);\n      display: grid;\n      place-items: center;\n      border: 1px solid rgba(255,255,255,.28);\n      border-radius: 50%;\n      background: rgba(5,5,5,.84);\n      box-shadow:\n        0 0 0 22px rgba(255,255,255,.025),\n        0 0 0 44px rgba(255,255,255,.018);\n    }\n\n    .dcg-map-core::before {\n      content: \"\";\n      position: absolute;\n      inset: 13px;\n      border: 1px dashed rgba(255,255,255,.18);\n      border-radius: 50%;\n      animation: dcgMapSpin 20s linear infinite;\n    }\n\n    .dcg-core-grid {\n      width: 72px;\n      height: 72px;\n      display: grid;\n      grid-template-columns: repeat(3, 1fr);\n      grid-template-rows: repeat(3, 1fr);\n      gap: 9px;\n    }\n\n    .dcg-core-grid i {\n      display: block;\n      width: 100%;\n      height: 100%;\n      border-radius: 50%;\n      background: #fff;\n      transform: scale(.55);\n      opacity: .78;\n    }\n\n    .dcg-core-grid i:nth-child(5) {\n      transform: scale(1);\n      opacity: 1;\n      box-shadow: 0 0 24px rgba(255,255,255,.45);\n    }\n\n    .dcg-map-core-label {\n      position: absolute;\n      bottom: 31px;\n      left: 50%;\n      width: 160px;\n      transform: translateX(-50%);\n      color: #9c9c9c;\n      font-size: 9px;\n      font-weight: 700;\n      text-align: center;\n      letter-spacing: .15em;\n      text-transform: uppercase;\n    }\n\n    .dcg-map-node {\n      position: absolute;\n      z-index: 3;\n      width: 154px;\n      min-height: 92px;\n      padding: 18px 18px 16px;\n      border: 1px solid rgba(255,255,255,.17);\n      color: #a6a6a6;\n      background: rgba(5,5,5,.83);\n      text-align: left;\n      cursor: pointer;\n      transition:\n        color .32s ease,\n        background .32s ease,\n        border-color .32s ease,\n        transform .35s cubic-bezier(.2,.75,.2,1),\n        box-shadow .35s ease;\n    }\n\n    .dcg-map-node:hover,\n    .dcg-map-node:focus-visible,\n    .dcg-map-node.is-active {\n      color: #050505;\n      background: #fff;\n      border-color: #fff;\n      transform: translateY(-5px);\n      box-shadow: 0 18px 42px rgba(0,0,0,.24);\n      outline: none;\n    }\n\n    .dcg-map-node small {\n      display: block;\n      margin-bottom: 14px;\n      color: currentColor;\n      opacity: .62;\n      font-size: 9px;\n      font-weight: 700;\n      letter-spacing: .14em;\n    }\n\n    .dcg-map-node strong {\n      display: block;\n      color: currentColor;\n      font-size: 16px;\n      font-weight: 600;\n      line-height: 1.15;\n      letter-spacing: -.02em;\n    }\n\n    .dcg-map-node[data-step=\"strategy\"] { left: 7%; top: 13%; }\n    .dcg-map-node[data-step=\"design\"] { right: 7%; top: 13%; }\n    .dcg-map-node[data-step=\"engineering\"] { right: 5%; top: 43%; }\n    .dcg-map-node[data-step=\"intelligence\"] { right: 9%; bottom: 9%; }\n    .dcg-map-node[data-step=\"cloud\"] { left: 9%; bottom: 9%; }\n    .dcg-map-node[data-step=\"growth\"] { left: 5%; top: 43%; }\n\n    .dcg-map-panel {\n      min-height: 720px;\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      padding: clamp(30px, 3.2vw, 48px);\n      border: 1px solid var(--dcg-line);\n      background: #fff;\n      color: #050505;\n    }\n\n    .dcg-map-panel-top {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: 20px;\n      padding-bottom: 24px;\n      border-bottom: 1px solid rgba(5,5,5,.14);\n    }\n\n    .dcg-map-panel-status {\n      display: flex;\n      align-items: center;\n      gap: 9px;\n      color: #555;\n      font-size: 10px;\n      font-weight: 700;\n      letter-spacing: .16em;\n      text-transform: uppercase;\n    }\n\n    .dcg-map-panel-status::before {\n      content: \"\";\n      width: 6px;\n      height: 6px;\n      border-radius: 50%;\n      background: #050505;\n    }\n\n    .dcg-map-panel-index {\n      color: #888;\n      font-size: 10px;\n      font-weight: 700;\n      letter-spacing: .16em;\n    }\n\n    .dcg-map-panel-content {\n      padding: 64px 0;\n    }\n\n    .dcg-map-panel-eyebrow {\n      margin: 0 0 19px;\n      color: #7c7c7c;\n      font-size: 10px;\n      font-weight: 700;\n      letter-spacing: .18em;\n      text-transform: uppercase;\n    }\n\n    .dcg-map-panel-title {\n      margin: 0;\n      font-size: clamp(42px, 4.7vw, 74px);\n      font-weight: 500;\n      line-height: .92;\n      letter-spacing: -.06em;\n    }\n\n    .dcg-map-panel-copy {\n      max-width: 500px;\n      min-height: 105px;\n      margin: 28px 0 0;\n      color: #5f5f5f;\n      font-size: 16px;\n      line-height: 1.67;\n    }\n\n    .dcg-map-panel-list {\n      display: grid;\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n      gap: 0;\n      margin: 36px 0 0;\n      border-top: 1px solid rgba(5,5,5,.14);\n      border-left: 1px solid rgba(5,5,5,.14);\n    }\n\n    .dcg-map-panel-list span {\n      min-height: 60px;\n      display: flex;\n      align-items: center;\n      padding: 14px 16px;\n      border-right: 1px solid rgba(5,5,5,.14);\n      border-bottom: 1px solid rgba(5,5,5,.14);\n      color: #3f3f3f;\n      font-size: 11px;\n      font-weight: 700;\n      line-height: 1.35;\n      letter-spacing: .05em;\n      text-transform: uppercase;\n    }\n\n    .dcg-map-panel-footer {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: 20px;\n      padding-top: 25px;\n      border-top: 1px solid rgba(5,5,5,.14);\n    }\n\n    .dcg-map-panel-footer > span {\n      color: #777;\n      font-size: 10px;\n      font-weight: 700;\n      letter-spacing: .15em;\n      text-transform: uppercase;\n    }\n\n    .dcg-map-panel-link {\n      display: inline-flex;\n      align-items: center;\n      gap: 9px;\n      color: #050505;\n      text-decoration: none;\n      font-size: 13px;\n      font-weight: 700;\n    }\n\n    .dcg-map-panel-link svg {\n      width: 16px;\n      height: 16px;\n      stroke: currentColor;\n      transition: transform .25s ease;\n    }\n\n    .dcg-map-panel-link:hover svg,\n    .dcg-map-panel-link:focus-visible svg {\n      transform: translate(3px,-3px);\n    }\n\n    .dcg-techmap-bottom {\n      display: grid;\n      grid-template-columns: minmax(0, 1fr) auto;\n      gap: 30px;\n      align-items: center;\n      margin-top: clamp(54px, 7vw, 90px);\n      padding-top: 34px;\n      border-top: 1px solid var(--dcg-line);\n    }\n\n    .dcg-techmap-bottom p {\n      max-width: 960px;\n      margin: 0;\n      color: #cfcfcf;\n      font-size: clamp(23px, 2.3vw, 37px);\n      font-weight: 500;\n      line-height: 1.2;\n      letter-spacing: -.038em;\n    }\n\n    .dcg-techmap-cta {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      min-height: 54px;\n      padding: 0 24px;\n      border: 1px solid #fff;\n      color: #050505;\n      background: #fff;\n      text-decoration: none;\n      font-size: 12px;\n      font-weight: 700;\n      letter-spacing: .08em;\n      text-transform: uppercase;\n      transition: color .28s ease, background .28s ease;\n    }\n\n    .dcg-techmap-cta:hover,\n    .dcg-techmap-cta:focus-visible {\n      color: #fff;\n      background: transparent;\n      outline: none;\n    }\n\n    @keyframes dcgMapPulse {\n      0%,100% { opacity: .35; transform: scale(.8); }\n      50% { opacity: 1; transform: scale(1); }\n    }\n\n    @keyframes dcgMapDash {\n      to { stroke-dashoffset: -180; }\n    }\n\n    @keyframes dcgMapSpin {\n      to { transform: rotate(360deg); }\n    }\n\n    @media (max-width: 1120px) {\n      .dcg-techmap-head,\n      .dcg-techmap-workspace {\n        grid-template-columns: 1fr;\n      }\n\n      .dcg-techmap-intro {\n        margin-left: 0;\n      }\n\n      .dcg-map-panel {\n        min-height: 620px;\n      }\n    }\n\n    @media (max-width: 760px) {\n      .dcg-techmap-shell {\n        width: min(100% - 34px, 1480px);\n        padding: 82px 0 92px;\n      }\n\n      .dcg-techmap-title {\n        font-size: clamp(43px, 14vw, 65px);\n      }\n\n      .dcg-map-canvas {\n        min-height: 780px;\n      }\n\n      .dcg-map-core {\n        top: 46%;\n        width: 154px;\n        height: 154px;\n      }\n\n      .dcg-map-core-label {\n        bottom: 22px;\n      }\n\n      .dcg-map-node {\n        width: 132px;\n        min-height: 82px;\n        padding: 15px;\n      }\n\n      .dcg-map-node strong {\n        font-size: 14px;\n      }\n\n      .dcg-map-node[data-step=\"strategy\"] { left: 5%; top: 10%; }\n      .dcg-map-node[data-step=\"design\"] { right: 5%; top: 10%; }\n      .dcg-map-node[data-step=\"engineering\"] { right: 3%; top: 38%; }\n      .dcg-map-node[data-step=\"intelligence\"] { right: 5%; bottom: 8%; }\n      .dcg-map-node[data-step=\"cloud\"] { left: 5%; bottom: 8%; }\n      .dcg-map-node[data-step=\"growth\"] { left: 3%; top: 38%; }\n\n      .dcg-map-panel {\n        min-height: auto;\n      }\n\n      .dcg-map-panel-list {\n        grid-template-columns: 1fr;\n      }\n\n      .dcg-techmap-bottom {\n        grid-template-columns: 1fr;\n      }\n\n      .dcg-techmap-cta {\n        justify-self: start;\n      }\n    }\n\n    @media (max-width: 520px) {\n      .dcg-map-canvas {\n        min-height: 850px;\n      }\n\n      .dcg-map-core {\n        top: 47%;\n        width: 136px;\n        height: 136px;\n      }\n\n      .dcg-core-grid {\n        width: 60px;\n        height: 60px;\n        gap: 7px;\n      }\n\n      .dcg-map-node {\n        width: calc(50% - 27px);\n      }\n\n      .dcg-map-node[data-step=\"strategy\"] { left: 14px; top: 74px; }\n      .dcg-map-node[data-step=\"design\"] { right: 14px; top: 74px; }\n      .dcg-map-node[data-step=\"growth\"] { left: 14px; top: 245px; }\n      .dcg-map-node[data-step=\"engineering\"] { right: 14px; top: 245px; }\n      .dcg-map-node[data-step=\"cloud\"] { left: 14px; bottom: 42px; }\n      .dcg-map-node[data-step=\"intelligence\"] { right: 14px; bottom: 42px; }\n\n      .dcg-map-lines {\n        opacity: .62;\n      }\n\n      .dcg-map-panel-footer {\n        align-items: flex-start;\n        flex-direction: column;\n      }\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      .dcg-techmap *,\n      .dcg-techmap *::before,\n      .dcg-techmap *::after {\n        animation-duration: .01ms !important;\n        animation-iteration-count: 1 !important;\n        transition-duration: .01ms !important;\n      }\n    }\n  <\/style>\n\n  <div class=\"dcg-techmap-shell\">\n    <header class=\"dcg-techmap-head\">\n      <div>\n        <p class=\"dcg-techmap-kicker\">Connected capability<\/p>\n        <h2 class=\"dcg-techmap-title\" id=\"dcg-techmap-title\">\n          More than development. <span>A complete digital system.<\/span>\n        <\/h2>\n      <\/div>\n\n      <p class=\"dcg-techmap-intro\">\n        Every successful product depends on more than code. Explore the connected disciplines\n        we combine to move from a business objective to a secure, scalable and continuously\n        improving digital platform.\n      <\/p>\n    <\/header>\n\n    <div class=\"dcg-techmap-workspace\">\n      <div class=\"dcg-map-canvas\" aria-label=\"Interactive DotCom Group technology map\">\n        <span class=\"dcg-map-status\">System architecture live<\/span>\n\n        <svg class=\"dcg-map-lines\" viewBox=\"0 0 900 720\" preserveAspectRatio=\"none\" aria-hidden=\"true\">\n          <path class=\"is-active\" data-line=\"strategy\" d=\"M450 360 C330 300 250 220 145 150\"\/>\n          <path data-line=\"design\" d=\"M450 360 C570 290 650 220 755 150\"\/>\n          <path data-line=\"engineering\" d=\"M450 360 C580 360 680 350 790 350\"\/>\n          <path data-line=\"intelligence\" d=\"M450 360 C575 445 650 540 745 620\"\/>\n          <path data-line=\"cloud\" d=\"M450 360 C325 445 250 540 155 620\"\/>\n          <path data-line=\"growth\" d=\"M450 360 C320 360 220 350 110 350\"\/>\n        <\/svg>\n\n        <button class=\"dcg-map-node is-active\"\n                type=\"button\"\n                data-step=\"strategy\"\n                data-index=\"01 \/ 06\"\n                data-title=\"Strategy\"\n                data-copy=\"We define the commercial objective, user need, operating model and technical route before development begins.\"\n                data-items=\"Discovery|Product strategy|Technical planning|Roadmaps\">\n          <small>01<\/small>\n          <strong>Strategy<\/strong>\n        <\/button>\n\n        <button class=\"dcg-map-node\"\n                type=\"button\"\n                data-step=\"design\"\n                data-index=\"02 \/ 06\"\n                data-title=\"Experience design\"\n                data-copy=\"We turn complexity into clear, intuitive digital experiences that work across devices, users and accessibility needs.\"\n                data-items=\"UX research|Interface design|Prototyping|Design systems\">\n          <small>02<\/small>\n          <strong>Experience design<\/strong>\n        <\/button>\n\n        <button class=\"dcg-map-node\"\n                type=\"button\"\n                data-step=\"engineering\"\n                data-index=\"03 \/ 06\"\n                data-title=\"Engineering\"\n                data-copy=\"We build resilient websites, applications, platforms and APIs using architecture selected for the product\u2014not forced by a template.\"\n                data-items=\"Web development|App development|APIs|Custom software\">\n          <small>03<\/small>\n          <strong>Engineering<\/strong>\n        <\/button>\n\n        <button class=\"dcg-map-node\"\n                type=\"button\"\n                data-step=\"intelligence\"\n                data-index=\"04 \/ 06\"\n                data-title=\"Intelligence\"\n                data-copy=\"We add AI, automation and data-driven decision making where it creates measurable value, not simply because it is fashionable.\"\n                data-items=\"AI agents|Automation|Data intelligence|Private knowledge systems\">\n          <small>04<\/small>\n          <strong>Intelligence<\/strong>\n        <\/button>\n\n        <button class=\"dcg-map-node\"\n                type=\"button\"\n                data-step=\"cloud\"\n                data-index=\"05 \/ 06\"\n                data-title=\"Cloud & infrastructure\"\n                data-copy=\"We create the secure technical foundation required to deploy, integrate, monitor and scale digital products reliably.\"\n                data-items=\"Cloud architecture|Security|Integrations|DevOps\">\n          <small>05<\/small>\n          <strong>Cloud & infrastructure<\/strong>\n        <\/button>\n\n        <button class=\"dcg-map-node\"\n                type=\"button\"\n                data-step=\"growth\"\n                data-index=\"06 \/ 06\"\n                data-title=\"Support & growth\"\n                data-copy=\"We continue improving performance, capability and customer experience after launch as the organisation and product evolve.\"\n                data-items=\"Optimisation|Product support|Analytics|Continuous delivery\">\n          <small>06<\/small>\n          <strong>Support & growth<\/strong>\n        <\/button>\n\n        <div class=\"dcg-map-core\" aria-hidden=\"true\">\n          <span class=\"dcg-core-grid\">\n            <i><\/i><i><\/i><i><\/i>\n            <i><\/i><i><\/i><i><\/i>\n            <i><\/i><i><\/i><i><\/i>\n          <\/span>\n          <span class=\"dcg-map-core-label\">dotcom.group core<\/span>\n        <\/div>\n      <\/div>\n\n      <aside class=\"dcg-map-panel\" aria-live=\"polite\">\n        <div class=\"dcg-map-panel-top\">\n          <span class=\"dcg-map-panel-status\">Selected capability<\/span>\n          <span class=\"dcg-map-panel-index\">01 \/ 06<\/span>\n        <\/div>\n\n        <div class=\"dcg-map-panel-content\">\n          <p class=\"dcg-map-panel-eyebrow\">Connected discipline<\/p>\n          <h3 class=\"dcg-map-panel-title\">Strategy<\/h3>\n          <p class=\"dcg-map-panel-copy\">\n            We define the commercial objective, user need, operating model and technical route before development begins.\n          <\/p>\n\n          <div class=\"dcg-map-panel-list\" aria-label=\"Selected capability services\">\n            <span>Discovery<\/span>\n            <span>Product strategy<\/span>\n            <span>Technical planning<\/span>\n            <span>Roadmaps<\/span>\n          <\/div>\n        <\/div>\n\n        <div class=\"dcg-map-panel-footer\">\n          <span>One connected delivery model<\/span>\n          <a class=\"dcg-map-panel-link\" href=\"#start-project\">\n            Start a project\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n              <path d=\"M5 19 19 5M9 5h10v10\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n            <\/svg>\n          <\/a>\n        <\/div>\n      <\/aside>\n    <\/div>\n\n    <div class=\"dcg-techmap-bottom\">\n      <p>\n        We can join at any stage\u2014or take responsibility for the complete journey from first concept to long-term operation.\n      <\/p>\n      <a class=\"dcg-techmap-cta\" href=\"#start-project\">Map your project<\/a>\n    <\/div>\n  <\/div>\n\n  <script>\n    (() => {\n      const section = document.getElementById('technology-map');\n      if (!section || section.dataset.dcgReady === 'true') return;\n      section.dataset.dcgReady = 'true';\n\n      const nodes = [...section.querySelectorAll('.dcg-map-node')];\n      const lines = [...section.querySelectorAll('.dcg-map-lines path')];\n      const index = section.querySelector('.dcg-map-panel-index');\n      const title = section.querySelector('.dcg-map-panel-title');\n      const copy = section.querySelector('.dcg-map-panel-copy');\n      const list = section.querySelector('.dcg-map-panel-list');\n\n      const activate = (node) => {\n        const step = node.dataset.step;\n\n        nodes.forEach((entry) => entry.classList.toggle('is-active', entry === node));\n        lines.forEach((line) => line.classList.toggle('is-active', line.dataset.line === step));\n\n        index.textContent = node.dataset.index;\n        title.textContent = node.dataset.title;\n        copy.textContent = node.dataset.copy;\n\n        list.innerHTML = node.dataset.items\n          .split('|')\n          .map((item) => `<span>${item}<\/span>`)\n          .join('');\n      };\n\n      nodes.forEach((node) => {\n        node.addEventListener('mouseenter', () => activate(node));\n        node.addEventListener('focus', () => activate(node));\n        node.addEventListener('click', () => activate(node));\n      });\n    })();\n  <\/script>\n<\/section>\n\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>dotcom.group Digital products. Intelligent systems. Start a project Independent digital engineering group We build what comes next. Websites, applications, artificial intelligence and custom digital systems for individuals, companies, corporates and public-sector organisations. Build with us Explore capabilities dotcom.system online Ready. Select a capability to begin. Web development Applications AI systems Automation Custom software Cloud &amp; [&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-9","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/dotcom.group\/index.php?rest_route=\/wp\/v2\/pages\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dotcom.group\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dotcom.group\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dotcom.group\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dotcom.group\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=9"}],"version-history":[{"count":5,"href":"https:\/\/dotcom.group\/index.php?rest_route=\/wp\/v2\/pages\/9\/revisions"}],"predecessor-version":[{"id":43,"href":"https:\/\/dotcom.group\/index.php?rest_route=\/wp\/v2\/pages\/9\/revisions\/43"}],"wp:attachment":[{"href":"https:\/\/dotcom.group\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}