{"id":10,"date":"2026-11-11T08:24:19","date_gmt":"2026-11-11T08:24:19","guid":{"rendered":"https:\/\/synetaltraining.co.uk\/?page_id=10"},"modified":"2026-11-11T09:50:16","modified_gmt":"2026-11-11T09:50:16","slug":"elementor-10","status":"publish","type":"page","link":"http:\/\/synetaltraining.co.uk\/?page_id=10","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"10\" class=\"elementor elementor-10\">\n\t\t\t\t<div class=\"elementor-element elementor-element-591ffbf e-con e-atomic-element e-flexbox-base e-default-div e-0eb02ae \" data-id=\"591ffbf\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"591ffbf\">\n    \t\t<div class=\"elementor-element elementor-element-4dd28a2 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"4dd28a2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en-GB\">\r\n<head>\r\n  <meta charset=\"utf-8\">\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n  <title>Synetal Training Limited | Career-Focused IT &amp; Healthcare Training in London<\/title>\r\n  <meta name=\"description\" content=\"Synetal Training Limited is a London-based provider of practical, career-focused IT and healthcare training, with programmes in IT support, networking, cybersecurity, cloud, DevOps, AI and healthcare.\">\r\n  <meta name=\"theme-color\" content=\"#14162E\">\r\n  <link rel=\"canonical\" href=\"https:\/\/synetaltraining.co.uk\/\">\r\n\r\n  <!-- Open Graph -->\r\n  <meta property=\"og:type\" content=\"website\">\r\n  <meta property=\"og:site_name\" content=\"Synetal Training Limited\">\r\n  <meta property=\"og:title\" content=\"Synetal Training Limited | Skills for Tomorrow\">\r\n  <meta property=\"og:description\" content=\"Practical, career-focused IT and healthcare training in London \u2014 led by experienced trainers and backed by genuine career support.\">\r\n  <meta property=\"og:url\" content=\"https:\/\/synetaltraining.co.uk\/\">\r\n  <meta property=\"og:image\" content=\"https:\/\/synetaltraining.co.uk\/wp-content\/uploads\/2026\/11\/synetal-Training-logo.jpeg\">\r\n  <meta property=\"og:locale\" content=\"en_GB\">\r\n  <meta name=\"twitter:card\" content=\"summary\">\r\n\r\n  <!-- Fonts: Sora (headings) + Inter (body) -->\r\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;450;500;600&family=Sora:wght@500;600;700&display=swap\" rel=\"stylesheet\">\r\n\r\n  <!-- Marks JS as available. Animations only ever ENHANCE: if scripts are blocked, all content stays visible. -->\r\n  <script>document.documentElement.classList.add('js');<\/script>\r\n\r\n  <style>\r\n    \/* ==========================================================================\r\n       1. BRAND TOKENS\r\n       ========================================================================== *\/\r\n    :root {\r\n      --navy: #14162E;\r\n      --indigo: #1F1A6B;\r\n      --green: #2E8B3A;\r\n      --green-fresh: #42A85A;\r\n      --amber: #E8960C;\r\n      --cream: #FBFAF7;\r\n      --white: #FFFFFF;\r\n      --text: #202238;\r\n      --text-2: #666B7A;\r\n      --border: #E9E8E2;\r\n\r\n      --green-tint: #EEF6EF;\r\n      --amber-tint: #FDF4E4;\r\n      --indigo-tint: #EFEEF8;\r\n\r\n      --font-head: 'Sora', 'Inter', system-ui, sans-serif;\r\n      --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;\r\n\r\n      --r-lg: 16px;\r\n      --r-md: 12px;\r\n      --r-sm: 8px;\r\n\r\n      --sh-1: 0 1px 2px rgba(20,22,46,.05);\r\n      --sh-2: 0 1px 2px rgba(20,22,46,.04), 0 6px 18px rgba(20,22,46,.06);\r\n      --sh-3: 0 2px 4px rgba(20,22,46,.04), 0 14px 32px rgba(20,22,46,.08), 0 32px 64px -32px rgba(20,22,46,.18);\r\n\r\n      --ease: cubic-bezier(.22, .61, .36, 1);\r\n      --header-h: 76px;\r\n    }\r\n\r\n    \/* ==========================================================================\r\n       2. BASE & TYPOGRAPHY\r\n       ========================================================================== *\/\r\n    *, *::before, *::after { box-sizing: border-box; }\r\n    html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; }\r\n    body {\r\n      margin: 0; background: var(--cream); color: var(--text);\r\n      font-family: var(--font-body); font-size: 16px; font-weight: 400; line-height: 1.7;\r\n      -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;\r\n    }\r\n    h1, h2, h3, h4 { margin: 0; font-family: var(--font-head); color: var(--navy); letter-spacing: -.02em; }\r\n    h1 { font-size: clamp(2.125rem, 1.2rem + 3.6vw, 4.125rem); line-height: 1.1; font-weight: 700; }\r\n    h2 { font-size: clamp(1.9rem, 1.4rem + 1.9vw, 2.875rem); line-height: 1.15; font-weight: 700; }\r\n    h3 { font-size: clamp(1.1875rem, 1.1rem + .3vw, 1.375rem); line-height: 1.3; font-weight: 600; letter-spacing: -.01em; }\r\n    h1 em, h2 em { font-style: italic; color: var(--green); }\r\n    p { margin: 0; }\r\n    a { color: inherit; text-decoration: none; }\r\n    img { max-width: 100%; height: auto; display: block; }\r\n    svg { display: block; }\r\n    button { font: inherit; }\r\n    :focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; border-radius: 4px; }\r\n    [hidden] { display: none !important; }\r\n    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }\r\n    .skip-link { position: absolute; left: 16px; top: -60px; z-index: 200; padding: 10px 16px; border-radius: var(--r-sm); background: var(--navy); color: #fff; font-weight: 600; transition: top .2s; }\r\n    .skip-link:focus { top: 12px; }\r\n\r\n    .container { width: min(1200px, 100% - 48px); margin-inline: auto; }\r\n    .section { padding: clamp(72px, 9vw, 120px) 0; }\r\n    .bg-white { background: var(--white); }\r\n    .bg-cream { background: var(--cream); }\r\n    .icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }\r\n\r\n    \/* Eyebrow label *\/\r\n    .eyebrow {\r\n      display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px;\r\n      font-size: .8125rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--green);\r\n    }\r\n    .eyebrow::before { content: \"\"; width: 24px; height: 2px; border-radius: 2px; background: var(--amber); }\r\n\r\n    \/* Section header *\/\r\n    .section-head { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; margin-bottom: 56px; }\r\n    .section-head > p { max-width: 500px; justify-self: end; font-size: 1.0625rem; color: var(--text-2); }\r\n    .section-head.center { grid-template-columns: 1fr; text-align: center; justify-items: center; }\r\n    .section-head.center > p { justify-self: center; max-width: 620px; margin-top: 4px; }\r\n    .lede { font-size: 1.0625rem; color: var(--text-2); }\r\n\r\n    \/* ==========================================================================\r\n       3. BUTTONS\r\n       ========================================================================== *\/\r\n    .btn {\r\n      display: inline-flex; align-items: center; justify-content: center; gap: 10px;\r\n      min-height: 50px; padding: 0 26px; border-radius: 10px; border: 1px solid transparent;\r\n      font-size: .9375rem; font-weight: 600; letter-spacing: -.005em; white-space: nowrap; cursor: pointer;\r\n      transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);\r\n    }\r\n    .btn .icon { width: 18px; height: 18px; transition: transform .3s var(--ease); }\r\n    .btn:hover .icon { transform: translateX(4px); }\r\n    .btn:active { transform: translateY(1px); }\r\n    .btn-green { background: var(--green); color: #fff; box-shadow: 0 1px 2px rgba(20,22,46,.1), 0 8px 20px -8px rgba(46,139,58,.55); }\r\n    .btn-green:hover { background: var(--green-fresh); box-shadow: 0 1px 2px rgba(20,22,46,.1), 0 12px 26px -8px rgba(46,139,58,.6); }\r\n    .btn-navy { background: var(--navy); color: #fff; }\r\n    .btn-navy:hover { background: var(--indigo); }\r\n    .btn-outline-light { color: #fff; border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.04); }\r\n    .btn-outline-light:hover { border-color: #fff; background: rgba(255,255,255,.1); }\r\n    .btn-outline { color: var(--navy); border-color: var(--border); background: var(--white); }\r\n    .btn-outline:hover { border-color: var(--navy); }\r\n    .btn-sm { min-height: 42px; padding: 0 18px; font-size: .875rem; }\r\n\r\n    \/* ==========================================================================\r\n       4. TOP BAR & STICKY HEADER\r\n       ========================================================================== *\/\r\n    .topbar { background: var(--navy); color: #C5C7DD; font-size: .8125rem; }\r\n    .topbar .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px 24px; min-height: 40px; }\r\n    .topbar-links { display: flex; flex-wrap: wrap; gap: 6px 24px; }\r\n    .topbar a, .topbar span { display: inline-flex; align-items: center; gap: 8px; transition: color .2s; }\r\n    .topbar a:hover { color: #fff; }\r\n    .topbar .icon { width: 15px; height: 15px; color: var(--green-fresh); }\r\n\r\n    .site-header {\r\n      position: sticky; top: 0; z-index: 100;\r\n      background: rgba(255,255,255,.96); border-bottom: 1px solid var(--border);\r\n      transition: background-color .3s var(--ease), box-shadow .3s var(--ease);\r\n    }\r\n    .site-header.is-scrolled {\r\n      background: rgba(255,255,255,.82);\r\n      -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);\r\n      box-shadow: 0 8px 24px -16px rgba(20,22,46,.28);\r\n    }\r\n    .nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--header-h); }\r\n\r\n    \/* Logo (official image, with text fallback if the image cannot load) *\/\r\n    .logo { display: inline-flex; align-items: center; flex: none; }\r\n    .logo img { height: 46px; width: auto; object-fit: contain; }\r\n    .logo-fallback { font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; color: var(--indigo); letter-spacing: -.02em; }\r\n    .logo-fallback small { display: block; font-family: var(--font-body); font-size: .7rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }\r\n\r\n    .menu { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }\r\n    .menu a:not(.btn) {\r\n      position: relative; display: block; padding: 10px 11px; white-space: nowrap;\r\n      font-size: .90625rem; font-weight: 500; color: var(--text); transition: color .25s;\r\n    }\r\n    .menu a:not(.btn)::after {\r\n      content: \"\"; position: absolute; left: 11px; right: 11px; bottom: 4px; height: 2px; border-radius: 2px;\r\n      background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);\r\n    }\r\n    .menu a:not(.btn):hover { color: var(--green); }\r\n    .menu a:not(.btn):hover::after, .menu a.is-active::after { transform: scaleX(1); }\r\n    .menu .menu-cta { margin-left: 12px; }\r\n\r\n    .menu-button {\r\n      display: none; width: 44px; height: 44px; padding: 0; border-radius: 10px; cursor: pointer;\r\n      border: 1px solid var(--border); background: var(--white); color: var(--navy);\r\n      align-items: center; justify-content: center;\r\n    }\r\n    .menu-button .bars { position: relative; width: 18px; height: 12px; }\r\n    .menu-button .bars span { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: currentColor; transition: transform .3s var(--ease), opacity .2s, top .3s var(--ease); }\r\n    .menu-button .bars span:nth-child(1) { top: 0; }\r\n    .menu-button .bars span:nth-child(2) { top: 5px; }\r\n    .menu-button .bars span:nth-child(3) { top: 10px; }\r\n    .menu-button[aria-expanded=\"true\"] .bars span:nth-child(1) { top: 5px; transform: rotate(45deg); }\r\n    .menu-button[aria-expanded=\"true\"] .bars span:nth-child(2) { opacity: 0; }\r\n    .menu-button[aria-expanded=\"true\"] .bars span:nth-child(3) { top: 5px; transform: rotate(-45deg); }\r\n\r\n    \/* ==========================================================================\r\n       5. HERO (midnight navy)\r\n       ========================================================================== *\/\r\n    .hero { position: relative; overflow: hidden; background: var(--navy); color: #fff; }\r\n    .hero::before {\r\n      content: \"\"; position: absolute; inset: 0; pointer-events: none;\r\n      background:\r\n        radial-gradient(640px 420px at 88% 18%, rgba(66,168,90,.16), transparent 70%),\r\n        radial-gradient(700px 520px at 60% 110%, rgba(31,26,107,.9), transparent 70%);\r\n    }\r\n    .hero::after {\r\n      content: \"\"; position: absolute; inset: 0; pointer-events: none; opacity: .5;\r\n      background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);\r\n      background-size: 56px 56px;\r\n      -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse at 70% 40%, #000 0%, transparent 70%);\r\n    }\r\n    .hero .container { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; padding: clamp(64px, 8vw, 112px) 0 clamp(72px, 9vw, 120px); }\r\n    .hero .eyebrow { color: #8FD39E; }\r\n    .hero h1 { color: #fff; }\r\n    .hero h1 em { color: #6FCB83; }\r\n    .hero-text { margin: 24px 0 36px; max-width: 540px; font-size: 1.125rem; line-height: 1.7; color: #C5C7DD; }\r\n    .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }\r\n    .trust-row { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 40px 0 0; padding: 28px 0 0; list-style: none; border-top: 1px solid rgba(255,255,255,.1); }\r\n    .trust-row li { display: inline-flex; align-items: center; gap: 10px; font-size: .9375rem; font-weight: 500; color: #E6E7F2; }\r\n    .trust-row .tick { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(66,168,90,.18); color: #6FCB83; }\r\n    .trust-row .tick .icon { width: 13px; height: 13px; stroke-width: 2.6; }\r\n\r\n    \/* Hero visual: learning dashboard *\/\r\n    .dashboard { position: relative; margin-bottom: 24px; }\r\n    .dash-window {\r\n      position: relative; border-radius: var(--r-lg); background: var(--white); color: var(--text);\r\n      box-shadow: 0 30px 80px -20px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08);\r\n      overflow: hidden; transition: transform .6s var(--ease);\r\n    }\r\n    .dashboard:hover .dash-window { transform: translateY(-4px); }\r\n    .dash-bar { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--border); background: #FCFCFA; }\r\n    .dots { display: flex; gap: 6px; }\r\n    .dots i { width: 10px; height: 10px; border-radius: 50%; background: #E3E2DC; }\r\n    .dash-bar small { font-size: .75rem; font-weight: 600; color: var(--text-2); letter-spacing: .02em; }\r\n    .dash-body { padding: 22px 22px 44px; }\r\n    .dash-greeting { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }\r\n    .dash-greeting h3 { font-size: 1.05rem; }\r\n    .dash-greeting p { font-size: .8125rem; color: var(--text-2); }\r\n    .pill { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 5px 10px; border-radius: 999px; font-size: .75rem; font-weight: 600; }\r\n    .pill-green { background: var(--green-tint); color: var(--green); }\r\n    .pill-amber { background: var(--amber-tint); color: #A86A00; }\r\n    .pill-indigo { background: var(--indigo-tint); color: var(--indigo); }\r\n    .pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }\r\n    .dash-course { display: grid; grid-template-columns: 40px 1fr auto; gap: 14px; align-items: center; padding: 14px; border: 1px solid var(--border); border-radius: var(--r-md); }\r\n    .dash-course + .dash-course { margin-top: 10px; }\r\n    .dash-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--green-tint); color: var(--green); }\r\n    .dash-ico.amber { background: var(--amber-tint); color: #A86A00; }\r\n    .dash-ico.indigo { background: var(--indigo-tint); color: var(--indigo); }\r\n    .dash-ico .icon { width: 20px; height: 20px; }\r\n    .dash-course strong { display: block; font-size: .9rem; font-weight: 600; line-height: 1.35; }\r\n    .dash-course span { font-size: .78rem; color: var(--text-2); }\r\n    .progress { height: 6px; margin-top: 8px; border-radius: 6px; background: #F0EFEA; overflow: hidden; }\r\n    .progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green), var(--green-fresh)); transform-origin: left; }\r\n    .js .dashboard .progress i { transform: scaleX(0); transition: transform 1.4s var(--ease) .6s; }\r\n    .js .dashboard.is-in .progress i { transform: scaleX(1); }\r\n    .dash-split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }\r\n    .dash-mini { padding: 14px; border-radius: var(--r-md); background: #FAFAF7; border: 1px solid var(--border); }\r\n    .dash-mini small { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }\r\n    .dash-mini b { display: block; margin-top: 4px; font-family: var(--font-head); font-size: .95rem; font-weight: 600; color: var(--navy); }\r\n    .float-card {\r\n      position: absolute; left: -28px; bottom: -24px; display: flex; align-items: center; gap: 12px;\r\n      padding: 12px 16px 12px 12px; border-radius: var(--r-md); background: var(--white); color: var(--text);\r\n      box-shadow: 0 18px 40px -12px rgba(0,0,0,.45);\r\n    }\r\n    .float-card .dash-ico { width: 36px; height: 36px; background: var(--green); color: #fff; }\r\n    .float-card strong { display: block; font-size: .85rem; font-weight: 600; }\r\n    .float-card span { font-size: .75rem; color: var(--text-2); }\r\n\r\n    \/* ==========================================================================\r\n       6. TRAINING APPROACH\r\n       ========================================================================== *\/\r\n    .approach { display: grid; grid-template-columns: 1.1fr .9fr; gap: 72px; align-items: start; }\r\n    .approach h2 { margin-bottom: 24px; }\r\n    .approach .intro { margin-bottom: 20px; font-family: var(--font-head); font-size: 1.25rem; font-weight: 500; line-height: 1.5; letter-spacing: -.01em; color: var(--indigo); }\r\n    .approach p + p { margin-top: 16px; }\r\n    .approach .lede + .lede { margin-top: 16px; }\r\n    .info-card { border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--border); box-shadow: var(--sh-2); overflow: hidden; }\r\n    .info-card header { display: flex; align-items: center; justify-content: space-between; padding: 20px 26px; background: var(--navy); color: #fff; }\r\n    .info-card header h3 { color: #fff; font-size: 1rem; }\r\n    .info-card dl { margin: 0; padding: 6px 26px 10px; }\r\n    .info-card dl div { display: grid; grid-template-columns: 116px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--border); }\r\n    .info-card dl div:last-child { border-bottom: 0; }\r\n    .info-card dt { padding-top: 2px; font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }\r\n    .info-card dd { margin: 0; font-size: .9375rem; font-weight: 500; color: var(--text); }\r\n\r\n    \/* Shared card *\/\r\n    .card {\r\n      position: relative; height: 100%; padding: 32px 28px; border-radius: var(--r-lg);\r\n      background: var(--white); border: 1px solid var(--border); box-shadow: var(--sh-1);\r\n      transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);\r\n    }\r\n    .card:hover { transform: translateY(-5px); box-shadow: var(--sh-3); border-color: #DCDBD3; }\r\n    .card-icon {\r\n      display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 22px; border-radius: var(--r-md);\r\n      background: var(--green-tint); color: var(--green); transition: background-color .4s var(--ease), color .4s var(--ease);\r\n    }\r\n    .card:hover .card-icon { background: var(--green); color: #fff; }\r\n    .card-icon .icon { width: 24px; height: 24px; }\r\n    .card h3 { margin-bottom: 10px; }\r\n    .card p { font-size: .9375rem; color: var(--text-2); }\r\n    .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }\r\n    .features { margin-top: 72px; }\r\n    .mvv { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 24px; border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--border); }\r\n    .mvv > div { padding: 26px 28px; }\r\n    .mvv > div + div { border-left: 1px solid var(--border); }\r\n    .mvv h4 { margin-bottom: 8px; font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--green); }\r\n    .mvv p { font-size: .9375rem; color: var(--text-2); }\r\n\r\n    \/* ==========================================================================\r\n       7. COURSES\r\n       ========================================================================== *\/\r\n    .filter-input { position: absolute; opacity: 0; pointer-events: none; }\r\n    .filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }\r\n    .filters label {\r\n      display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 18px; border-radius: 999px; cursor: pointer;\r\n      border: 1px solid var(--border); background: var(--white); font-size: .875rem; font-weight: 600; color: var(--text-2);\r\n      transition: color .25s, background-color .25s, border-color .25s;\r\n    }\r\n    .filters label:hover { color: var(--navy); border-color: #CFCEC5; }\r\n    .filters label span { font-size: .75rem; font-weight: 600; color: var(--text-2); opacity: .8; }\r\n    #f-all:checked ~ .filters [for=\"f-all\"], #f-it:checked ~ .filters [for=\"f-it\"], #f-hc:checked ~ .filters [for=\"f-hc\"] { background: var(--navy); border-color: var(--navy); color: #fff; }\r\n    #f-all:checked ~ .filters [for=\"f-all\"] span, #f-it:checked ~ .filters [for=\"f-it\"] span, #f-hc:checked ~ .filters [for=\"f-hc\"] span { color: #fff; }\r\n    #f-all:focus-visible ~ .filters [for=\"f-all\"], #f-it:focus-visible ~ .filters [for=\"f-it\"], #f-hc:focus-visible ~ .filters [for=\"f-hc\"] { outline: 3px solid var(--amber); outline-offset: 2px; }\r\n    #f-it:checked ~ .course-list .course:not([data-cat=\"it\"]),\r\n    #f-hc:checked ~ .course-list .course:not([data-cat=\"hc\"]) { display: none; }\r\n\r\n    .course-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }\r\n    .course > a {\r\n      display: grid; grid-template-columns: 52px minmax(0, 1.1fr) minmax(0, 1.5fr) 132px 44px; gap: 28px; align-items: center;\r\n      padding: 24px 28px; border-radius: var(--r-md); background: var(--white); border: 1px solid var(--border);\r\n      transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease), background-color .35s var(--ease);\r\n    }\r\n    .course:nth-child(even) > a { background: #FDFDFB; }\r\n    .course > a:hover { transform: translateY(-3px); border-color: rgba(46,139,58,.45); background: #FBFDFB; box-shadow: var(--sh-2); }\r\n    .course-no { font-family: var(--font-head); font-size: 1.125rem; font-weight: 600; color: var(--amber); }\r\n    .badge { display: inline-block; margin-bottom: 6px; padding: 3px 10px; border-radius: 999px; background: var(--green-tint); color: var(--green); font-size: .75rem; font-weight: 600; letter-spacing: .02em; }\r\n    .badge.hc { background: var(--amber-tint); color: #A86A00; }\r\n    .course h3 { font-size: 1.1875rem; font-weight: 600; }\r\n    .course p { font-size: .9375rem; line-height: 1.6; color: var(--text-2); }\r\n    .course-dur { font-size: .8125rem; color: var(--text-2); }\r\n    .course-dur b { display: block; font-size: .9375rem; font-weight: 600; color: var(--text); }\r\n    .course-go { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); color: var(--navy); transition: all .35s var(--ease); }\r\n    .course-go .icon { width: 18px; height: 18px; transition: transform .35s var(--ease); }\r\n    .course > a:hover .course-go { background: var(--green); border-color: var(--green); color: #fff; }\r\n    .course > a:hover .course-go .icon { transform: translateX(3px); }\r\n    .course-note { margin-top: 20px; font-size: .875rem; color: var(--text-2); }\r\n\r\n    \/* ==========================================================================\r\n       8. JOURNEY STEPS\r\n       ========================================================================== *\/\r\n    .journey { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin: 0; padding: 0; list-style: none; }\r\n    .journey::before { content: \"\"; position: absolute; top: 27px; left: 12.5%; right: 12.5%; height: 2px; background: linear-gradient(90deg, var(--green), var(--amber)); opacity: .35; }\r\n    .step { position: relative; text-align: center; }\r\n    .step-num {\r\n      position: relative; display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 22px; border-radius: 50%;\r\n      background: var(--white); border: 2px solid var(--green); color: var(--green);\r\n      font-family: var(--font-head); font-size: 1rem; font-weight: 700; box-shadow: 0 0 0 8px var(--cream);\r\n      transition: background-color .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);\r\n    }\r\n    .step:hover .step-num { background: var(--green); color: #fff; transform: scale(1.06); }\r\n    .step:last-child .step-num { border-color: var(--amber); color: #A86A00; }\r\n    .step:last-child:hover .step-num { background: var(--amber); color: #fff; }\r\n    .step h3 { margin-bottom: 10px; }\r\n    .step p { max-width: 250px; margin: 0 auto; font-size: .9375rem; color: var(--text-2); }\r\n\r\n    \/* ==========================================================================\r\n       9. STATISTICS\r\n       ========================================================================== *\/\r\n    .stats { position: relative; overflow: hidden; padding: clamp(72px, 8vw, 104px) 0; background: linear-gradient(135deg, var(--navy) 0%, var(--indigo) 100%); color: #fff; }\r\n    .stats::before { content: \"\"; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(520px 320px at 8% 0%, rgba(66,168,90,.18), transparent 70%), radial-gradient(520px 320px at 100% 100%, rgba(232,150,12,.12), transparent 70%); }\r\n    .stats .container { position: relative; }\r\n    .stats .section-head h2 { color: #fff; }\r\n    .stats .section-head .eyebrow { color: #8FD39E; }\r\n    .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }\r\n    .stat {\r\n      padding: 30px 28px; border-radius: var(--r-lg);\r\n      background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);\r\n      -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);\r\n      transition: transform .4s var(--ease), background-color .4s var(--ease), border-color .4s var(--ease);\r\n    }\r\n    .stat:hover { transform: translateY(-5px); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); }\r\n    .stat b { display: block; font-family: var(--font-head); font-size: clamp(2.5rem, 2rem + 1.6vw, 3.25rem); font-weight: 700; line-height: 1.05; letter-spacing: -.03em; }\r\n    .stat b i { font-style: normal; color: var(--amber); }\r\n    .stat span { display: block; margin-top: 8px; font-size: .9375rem; color: #C5C7DD; }\r\n\r\n    \/* ==========================================================================\r\n       10. WHY CHOOSE\r\n       ========================================================================== *\/\r\n    .split { display: grid; grid-template-columns: .9fr 1.1fr; gap: 72px; align-items: start; }\r\n    .split h2 { margin-bottom: 22px; }\r\n    .split .lede + .lede { margin-top: 16px; }\r\n    .benefits { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }\r\n    .benefits li {\r\n      display: flex; gap: 16px; padding: 20px 22px; border-radius: var(--r-md); background: var(--white); border: 1px solid var(--border);\r\n      transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);\r\n    }\r\n    .benefits li:hover { transform: translateX(4px); box-shadow: var(--sh-2); border-color: #DCDBD3; }\r\n    .check { display: grid; place-items: center; flex: none; width: 28px; height: 28px; margin-top: 1px; border-radius: 50%; background: var(--green); color: #fff; }\r\n    .check .icon { width: 15px; height: 15px; stroke-width: 2.6; }\r\n    .benefits h3 { margin-bottom: 2px; font-size: 1.0625rem; }\r\n    .benefits p { font-size: .9375rem; color: var(--text-2); }\r\n\r\n    \/* ==========================================================================\r\n       11. TESTIMONIALS\r\n       ========================================================================== *\/\r\n    .testimonials { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }\r\n    .testimonial { display: flex; flex-direction: column; margin: 0; }\r\n    .stars { display: flex; gap: 3px; color: var(--amber); }\r\n    .stars svg { width: 17px; height: 17px; fill: currentColor; }\r\n    .testimonial blockquote { flex: 1; margin: 18px 0 24px; font-size: 1.0625rem; line-height: 1.7; color: var(--text); }\r\n    .testimonial figcaption { display: flex; align-items: center; gap: 14px; padding-top: 20px; border-top: 1px solid var(--border); }\r\n    .avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--indigo-tint); color: var(--indigo); font-family: var(--font-head); font-weight: 600; }\r\n    .testimonial figcaption strong { display: block; font-size: .9375rem; font-weight: 600; }\r\n    .testimonial figcaption span { font-size: .8125rem; color: var(--text-2); }\r\n\r\n    \/* ==========================================================================\r\n       12. FAQ ACCORDION\r\n       ========================================================================== *\/\r\n    .faq-list { display: grid; gap: 12px; }\r\n    .faq { border-radius: var(--r-md); background: var(--white); border: 1px solid var(--border); transition: border-color .3s, box-shadow .3s; }\r\n    .faq[open] { border-color: rgba(46,139,58,.4); box-shadow: var(--sh-2); }\r\n    .faq summary {\r\n      display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 24px; cursor: pointer; list-style: none;\r\n      font-family: var(--font-head); font-size: 1.0625rem; font-weight: 600; color: var(--navy); letter-spacing: -.01em;\r\n    }\r\n    .faq summary::-webkit-details-marker { display: none; }\r\n    .faq summary:hover { color: var(--green); }\r\n    .pm { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--green-tint); transition: background-color .3s; }\r\n    .pm::before, .pm::after { content: \"\"; position: absolute; top: 50%; left: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: var(--green); transition: transform .3s var(--ease), background-color .3s; }\r\n    .pm::after { transform: rotate(90deg); }\r\n    .faq[open] .pm { background: var(--green); }\r\n    .faq[open] .pm::before, .faq[open] .pm::after { background: #fff; }\r\n    .faq[open] .pm::after { transform: rotate(0deg); }\r\n    .faq-body { overflow: hidden; }\r\n    .faq-body p { padding: 0 24px 22px; font-size: .9375rem; color: var(--text-2); }\r\n\r\n    \/* ==========================================================================\r\n       13. CTA\r\n       ========================================================================== *\/\r\n    .cta { position: relative; overflow: hidden; padding: clamp(72px, 8vw, 104px) 0; background: var(--navy); color: #fff; text-align: center; }\r\n    .cta::before { content: \"\"; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(600px 300px at 20% 100%, rgba(46,139,58,.22), transparent 70%), radial-gradient(600px 300px at 80% 0%, rgba(31,26,107,.95), transparent 70%); }\r\n    .cta .container { position: relative; }\r\n    .cta h2 { max-width: 760px; margin: 0 auto; color: #fff; }\r\n    .cta h2 em { color: #6FCB83; }\r\n    .cta p { max-width: 560px; margin: 18px auto 34px; font-size: 1.0625rem; color: #C5C7DD; }\r\n\r\n    \/* ==========================================================================\r\n       14. CONTACT\r\n       ========================================================================== *\/\r\n    .contact { display: grid; grid-template-columns: .85fr 1.15fr; gap: 64px; align-items: start; }\r\n    .contact h2 { margin-bottom: 18px; }\r\n    .contact-items { display: grid; gap: 12px; margin: 32px 0 0; padding: 0; list-style: none; }\r\n    .contact-items li { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: var(--r-md); background: var(--white); border: 1px solid var(--border); transition: border-color .3s, transform .3s var(--ease); }\r\n    .contact-items li:hover { border-color: rgba(46,139,58,.4); transform: translateY(-2px); }\r\n    .contact-items .dash-ico { flex: none; }\r\n    .contact-items small { display: block; font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }\r\n    .contact-items a, .contact-items address { font-style: normal; font-size: .9375rem; font-weight: 600; color: var(--navy); word-break: break-word; }\r\n    .contact-items a:hover { color: var(--green); }\r\n    .next-steps { margin-top: 32px; padding: 24px 26px; border-radius: var(--r-md); background: var(--cream); border: 1px solid var(--border); }\r\n    .next-steps h3 { margin-bottom: 14px; font-size: 1rem; }\r\n    .next-steps ol { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: ns; }\r\n    .next-steps li { position: relative; padding-left: 38px; font-size: .9375rem; color: var(--text-2); counter-increment: ns; }\r\n    .next-steps li::before { content: counter(ns, decimal-leading-zero); position: absolute; left: 0; top: 0; font-family: var(--font-head); font-size: .875rem; font-weight: 700; color: var(--amber); }\r\n    .next-steps li b { color: var(--text); font-weight: 600; }\r\n\r\n    .form { padding: clamp(26px, 4vw, 40px); border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--border); box-shadow: var(--sh-3); }\r\n    .form h3 { font-size: 1.375rem; }\r\n    .form > p { margin: 6px 0 4px; font-size: .9375rem; color: var(--text-2); }\r\n    .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }\r\n    .field label { display: block; margin: 18px 0 8px; font-size: .875rem; font-weight: 600; color: var(--text); }\r\n    .field label span { font-weight: 400; color: var(--text-2); }\r\n    .field input, .field select, .field textarea {\r\n      width: 100%; min-height: 50px; padding: 12px 15px; border-radius: 10px; border: 1px solid var(--border);\r\n      background: #FCFCFA; color: var(--text); font: inherit; font-size: .9375rem;\r\n      transition: border-color .25s, box-shadow .25s, background-color .25s;\r\n    }\r\n    .field select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='8' fill='none' stroke='%23666B7A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'\/%3E%3C\/svg%3E\"); background-repeat: no-repeat; background-position: right 16px center; }\r\n    .field textarea { min-height: 130px; resize: vertical; }\r\n    .field input::placeholder, .field textarea::placeholder { color: #A3A6B2; }\r\n    .field input:hover, .field select:hover, .field textarea:hover { border-color: #D4D3CA; }\r\n    .field input:focus, .field select:focus, .field textarea:focus { outline: none; background-color: #fff; border-color: var(--green); box-shadow: 0 0 0 4px rgba(46,139,58,.14); }\r\n    .form .btn { width: 100%; margin-top: 24px; }\r\n    .form-note { margin-top: 14px; font-size: .8125rem; text-align: center; color: var(--text-2); }\r\n\r\n    \/* ==========================================================================\r\n       15. FOOTER\r\n       ========================================================================== *\/\r\n    .footer { padding: 80px 0 28px; background: var(--navy); color: #B5B8CF; font-size: .9375rem; }\r\n    .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 48px; }\r\n    .footer .logo { padding: 10px 14px; margin-bottom: 20px; border-radius: var(--r-md); background: #fff; }\r\n    .footer .logo img { height: 42px; }\r\n    .footer p { max-width: 300px; }\r\n    .footer h4 { margin-bottom: 18px; font-family: var(--font-body); font-size: .8125rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #fff; }\r\n    .footer ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }\r\n    .footer a { transition: color .25s; }\r\n    .footer a:hover { color: #fff; }\r\n    .footer address { font-style: normal; }\r\n    .footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); font-size: .8125rem; }\r\n\r\n    .to-top {\r\n      position: fixed; right: 20px; bottom: 20px; z-index: 90; display: grid; place-items: center;\r\n      width: 46px; height: 46px; border-radius: 12px; background: var(--green); color: #fff; box-shadow: 0 10px 24px -8px rgba(20,22,46,.45);\r\n      transition: opacity .3s, transform .3s var(--ease), background-color .3s;\r\n    }\r\n    .to-top:hover { background: var(--green-fresh); }\r\n    .to-top .icon { transform: rotate(-90deg); }\r\n    .js .to-top { opacity: 0; pointer-events: none; transform: translateY(10px); }\r\n    .js .to-top.is-visible { opacity: 1; pointer-events: auto; transform: none; }\r\n\r\n    \/* ==========================================================================\r\n       16. SCROLL REVEAL (enabled only when JavaScript runs)\r\n       Uses the independent `translate` property so hover `transform` effects never conflict.\r\n       ========================================================================== *\/\r\n    .js .reveal {\r\n      opacity: 0; translate: 0 28px;\r\n      transition: opacity .8s var(--ease) var(--d, 0s), translate .8s var(--ease) var(--d, 0s),\r\n                  transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease), background-color .4s var(--ease);\r\n    }\r\n    .js .reveal.is-in { opacity: 1; translate: none; }\r\n\r\n    \/* ==========================================================================\r\n       17. RESPONSIVE \u2014 1200 \/ 992 \/ 768 \/ 576 \/ 390\r\n       ========================================================================== *\/\r\n    @media (max-width: 1200px) {\r\n      .menu-button { display: inline-flex; }\r\n      .menu {\r\n        position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0;\r\n        padding: 12px 24px 24px; background: #fff; border-bottom: 1px solid var(--border); box-shadow: 0 24px 40px -24px rgba(20,22,46,.3);\r\n        max-height: calc(100vh - var(--header-h)); overflow-y: auto;\r\n      }\r\n      .js .menu { visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s; }\r\n      .js .menu.is-open { visibility: visible; opacity: 1; transform: none; }\r\n      html:not(.js) .menu-button { display: none; }\r\n      html:not(.js) .menu { position: static; flex-direction: row; flex-wrap: wrap; padding: 0 0 12px; box-shadow: none; border: 0; }\r\n      html:not(.js) .nav { height: auto; flex-wrap: wrap; padding-top: 12px; }\r\n      .menu a:not(.btn) { padding: 14px 4px; border-bottom: 1px solid var(--border); font-size: .9375rem; }\r\n      .menu a:not(.btn)::after { display: none; }\r\n      .menu .menu-cta { margin: 16px 0 0; }\r\n      .menu .menu-cta .btn { width: 100%; }\r\n    }\r\n    @media (max-width: 992px) {\r\n      .hero .container, .approach, .split, .contact, .section-head { grid-template-columns: 1fr; gap: 48px; }\r\n      .section-head { gap: 16px; }\r\n      .section-head > p { justify-self: start; }\r\n      .dashboard { max-width: 560px; }\r\n      .float-card { left: 16px; bottom: -24px; }\r\n      .stat-grid { grid-template-columns: repeat(2, 1fr); }\r\n      .course > a { grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 8px 18px; padding: 22px; }\r\n      .course p, .course-dur { grid-column: 2; }\r\n      .course-go { grid-row: 1; grid-column: 3; }\r\n      .footer-grid { grid-template-columns: 1fr 1fr; }\r\n    }\r\n    @media (max-width: 768px) {\r\n      .grid-3, .testimonials { grid-template-columns: 1fr 1fr; }\r\n        .mvv { grid-template-columns: 1fr; }\r\n      .mvv > div + div { border-left: 0; border-top: 1px solid var(--border); }\r\n      .journey { grid-template-columns: 1fr; gap: 0; max-width: 520px; }\r\n      .journey::before { top: 28px; bottom: 28px; left: 27px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--green), var(--amber)); }\r\n      .step { display: grid; grid-template-columns: 56px 1fr; gap: 0 20px; text-align: left; padding-bottom: 32px; }\r\n      .step:last-child { padding-bottom: 0; }\r\n      .step-num { grid-row: span 2; margin: 0; }\r\n      .step h3 { margin: 12px 0 6px; }\r\n      .step p { max-width: none; margin: 0; }\r\n      .testimonials { grid-template-columns: 1fr; }\r\n    }\r\n    @media (max-width: 576px) {\r\n      .container { width: min(1200px, 100% - 40px); }\r\n      .topbar .address { display: none; }\r\n      .grid-3, .stat-grid, .footer-grid, .field-row { grid-template-columns: 1fr; }\r\n      .hero-actions .btn { width: 100%; }\r\n      .trust-row { flex-direction: column; }\r\n      .float-card { display: none; }\r\n      .dash-split { grid-template-columns: 1fr; }\r\n      .dash-body { padding-bottom: 22px; }\r\n      .dashboard { margin-bottom: 0; }\r\n      .dash-course { grid-template-columns: 40px 1fr; }\r\n      .dash-course > .pill { display: none; }\r\n      .info-card dl div { grid-template-columns: 1fr; gap: 2px; }\r\n      .card { padding: 26px 22px; }\r\n      .filters { gap: 6px; }\r\n      .filters label { padding: 0 14px; }\r\n    }\r\n    @media (max-width: 390px) {\r\n      body { font-size: 15px; }\r\n      .container { width: calc(100% - 32px); }\r\n      .logo img { height: 40px; }\r\n      .course > a { grid-template-columns: minmax(0, 1fr) 40px; padding: 20px 18px; }\r\n      .course-no { display: none; }\r\n      .course p, .course-dur { grid-column: 1; }\r\n      .course-go { grid-column: 2; width: 40px; height: 40px; }\r\n    }\r\n    @media (prefers-reduced-motion: reduce) {\r\n      html { scroll-behavior: auto; }\r\n      *, *::before, *::after { animation: none !important; transition: none !important; }\r\n      .js .reveal { opacity: 1; translate: none; }\r\n      .js .dashboard .progress i { transform: none; }\r\n    }\r\n  <\/style>\r\n<\/head>\r\n\r\n<body id=\"home\">\r\n  <a class=\"skip-link\" href=\"#main\">Skip to content<\/a>\r\n\r\n  <!-- Icon sprite -->\r\n  <svg width=\"0\" height=\"0\" style=\"position:absolute\" aria-hidden=\"true\" focusable=\"false\">\r\n    <defs>\r\n      <symbol id=\"i-arrow\" viewBox=\"0 0 24 24\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/symbol>\r\n      <symbol id=\"i-phone\" viewBox=\"0 0 24 24\"><path d=\"M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z\"\/><\/symbol>\r\n      <symbol id=\"i-mail\" viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\"\/><path d=\"m3 7 9 6 9-6\"\/><\/symbol>\r\n      <symbol id=\"i-pin\" viewBox=\"0 0 24 24\"><path d=\"M20 10c0 6-8 12-8 12S4 16 4 10a8 8 0 1 1 16 0z\"\/><circle cx=\"12\" cy=\"10\" r=\"3\"\/><\/symbol>\r\n      <symbol id=\"i-cloud\" viewBox=\"0 0 24 24\"><path d=\"M18 10a6 6 0 0 0-11.7-1.5A4.5 4.5 0 0 0 7 17.5h11a3.8 3.8 0 0 0 0-7.5z\"\/><\/symbol>\r\n      <symbol id=\"i-shield\" viewBox=\"0 0 24 24\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/><path d=\"m9 12 2 2 4-4\"\/><\/symbol>\r\n      <symbol id=\"i-heart\" viewBox=\"0 0 24 24\"><path d=\"M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1 1.1L12 21l7.8-7.5 1-1.1a5.5 5.5 0 0 0 0-7.8z\"\/><\/symbol>\r\n      <symbol id=\"i-network\" viewBox=\"0 0 24 24\"><rect x=\"9\" y=\"2\" width=\"6\" height=\"6\" rx=\"1\"\/><rect x=\"2\" y=\"16\" width=\"6\" height=\"6\" rx=\"1\"\/><rect x=\"16\" y=\"16\" width=\"6\" height=\"6\" rx=\"1\"\/><path d=\"M12 8v4M5 16v-2a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v2\"\/><\/symbol>\r\n      <symbol id=\"i-terminal\" viewBox=\"0 0 24 24\"><rect x=\"2\" y=\"4\" width=\"20\" height=\"16\" rx=\"2\"\/><path d=\"m6 9 3 3-3 3M12 15h5\"\/><\/symbol>\r\n      <symbol id=\"i-layers\" viewBox=\"0 0 24 24\"><path d=\"M12 2 2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5\"\/><\/symbol>\r\n      <symbol id=\"i-check\" viewBox=\"0 0 24 24\"><path d=\"M20 6 9 17l-5-5\"\/><\/symbol>\r\n      <symbol id=\"i-users\" viewBox=\"0 0 24 24\"><circle cx=\"9\" cy=\"8\" r=\"4\"\/><path d=\"M2 21a7 7 0 0 1 14 0M16 4a4 4 0 0 1 0 8M22 21a7 7 0 0 0-4-6.3\"\/><\/symbol>\r\n      <symbol id=\"i-clock\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"9\"\/><path d=\"M12 7v5l3 2\"\/><\/symbol>\r\n      <symbol id=\"i-compass\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"9\"\/><path d=\"m15.5 8.5-2 5-5 2 2-5z\"\/><\/symbol>\r\n      <symbol id=\"i-briefcase\" viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"7\" width=\"18\" height=\"13\" rx=\"2\"\/><path d=\"M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M3 13h18\"\/><\/symbol>\r\n      <symbol id=\"i-tool\" viewBox=\"0 0 24 24\"><path d=\"M14.7 6.3a4 4 0 0 0 5 5L13 18a2.8 2.8 0 0 1-4-4z\"\/><path d=\"M14.7 6.3 17 4l3 3-2.3 2.3\"\/><path d=\"m9 14-5 5\"\/><\/symbol>\r\n      <symbol id=\"i-chart\" viewBox=\"0 0 24 24\"><path d=\"M3 3v18h18\"\/><path d=\"m7 15 4-4 3 3 6-6\"\/><\/symbol>\r\n      <symbol id=\"i-award\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"9\" r=\"6\"\/><path d=\"m8.5 14-1.5 8 5-3 5 3-1.5-8\"\/><\/symbol>\r\n      <symbol id=\"i-star\" viewBox=\"0 0 24 24\"><path d=\"m12 2 3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1z\"\/><\/symbol>\r\n    <\/defs>\r\n  <\/svg>\r\n\r\n  <!-- ================= TOP BAR ================= -->\r\n  <div class=\"topbar\">\r\n    <div class=\"container\">\r\n      <div class=\"topbar-links\">\r\n        <a href=\"tel:+447352473257\"><svg class=\"icon\" aria-hidden=\"true\"><use href=\"#i-phone\"\/><\/svg>+44 (7352) 473257<\/a>\r\n        <a href=\"mailto:synetaltraininglimited@gmail.com\"><svg class=\"icon\" aria-hidden=\"true\"><use href=\"#i-mail\"\/><\/svg>synetaltraininglimited@gmail.com<\/a>\r\n      <\/div>\r\n      <span class=\"address\"><svg class=\"icon\" aria-hidden=\"true\"><use href=\"#i-pin\"\/><\/svg>14 Truman Walk, London E3 3FB<\/span>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- ================= HEADER ================= -->\r\n  <header class=\"site-header\" id=\"site-header\">\r\n    <div class=\"container nav\">\r\n      <a class=\"logo\" href=\"#home\" aria-label=\"Synetal Training Limited \u2013 home\">\r\n        <img src=\"https:\/\/synetaltraining.co.uk\/wp-content\/uploads\/2026\/11\/synetal-Training-logo.jpeg\"\r\n             alt=\"Synetal Training \u2013 Skills for Tomorrow\" height=\"46\" decoding=\"async\"\r\n             onerror=\"this.hidden=true;this.nextElementSibling.hidden=false\">\r\n        <span class=\"logo-fallback\" hidden>Synetal Training<small>Skills for Tomorrow<\/small><\/span>\r\n      <\/a>\r\n\r\n      <button class=\"menu-button\" id=\"menu-button\" type=\"button\" aria-controls=\"primary-menu\" aria-expanded=\"false\" aria-label=\"Open menu\">\r\n        <span class=\"bars\" aria-hidden=\"true\"><span><\/span><span><\/span><span><\/span><\/span>\r\n      <\/button>\r\n\r\n      <nav aria-label=\"Primary\">\r\n        <ul class=\"menu\" id=\"primary-menu\">\r\n          <li><a href=\"#home\">Home<\/a><\/li>\r\n          <li><a href=\"#about\">About Us<\/a><\/li>\r\n          <li><a href=\"#courses\" data-filter=\"all\">Courses<\/a><\/li>\r\n          <li><a href=\"#courses\" data-filter=\"it\">IT Training<\/a><\/li>\r\n          <li><a href=\"#courses\" data-filter=\"hc\">Healthcare Training<\/a><\/li>\r\n          <li><a href=\"#career-support\">Career Support<\/a><\/li>\r\n          <li><a href=\"#contact\">Contact<\/a><\/li>\r\n          <li class=\"menu-cta\"><a class=\"btn btn-green btn-sm\" href=\"#courses\" data-filter=\"all\">Explore Courses<svg class=\"icon\" aria-hidden=\"true\"><use href=\"#i-arrow\"\/><\/svg><\/a><\/li>\r\n        <\/ul>\r\n      <\/nav>\r\n    <\/div>\r\n  <\/header>\r\n\r\n  <main id=\"main\">\r\n    <!-- ================= HERO ================= -->\r\n    <section class=\"hero\" aria-labelledby=\"hero-title\">\r\n      <div class=\"container\">\r\n        <div>\r\n          <p class=\"eyebrow reveal\">Career-focused training in the UK<\/p>\r\n          <h1 id=\"hero-title\" class=\"reveal\" style=\"--d:.06s\">Build a Career in <em>IT &amp; Healthcare<\/em> with Practical Training.<\/h1>\r\n          <p class=\"hero-text reveal\" style=\"--d:.12s\">Gain practical skills, industry knowledge and career-focused training designed to help you take your next professional step.<\/p>\r\n          <div class=\"hero-actions reveal\" style=\"--d:.18s\">\r\n            <a class=\"btn btn-green\" href=\"#courses\">Explore Our Courses<svg class=\"icon\" aria-hidden=\"true\"><use href=\"#i-arrow\"\/><\/svg><\/a>\r\n            <a class=\"btn btn-outline-light\" href=\"#contact\">Talk to Our Team<\/a>\r\n          <\/div>\r\n          <ul class=\"trust-row reveal\" style=\"--d:.24s\">\r\n            <li><span class=\"tick\"><svg class=\"icon\" aria-hidden=\"true\"><use href=\"#i-check\"\/><\/svg><\/span>Practical Learning<\/li>\r\n            <li><span class=\"tick\"><svg class=\"icon\" aria-hidden=\"true\"><use href=\"#i-check\"\/><\/svg><\/span>Career-Focused Programmes<\/li>\r\n            <li><span class=\"tick\"><svg class=\"icon\" aria-hidden=\"true\"><use href=\"#i-check\"\/><\/svg><\/span>Professional Support<\/li>\r\n          <\/ul>\r\n        <\/div>\r\n\r\n        <!-- Illustrative learning dashboard (decorative) -->\r\n        <div class=\"dashboard reveal\" style=\"--d:.15s\" aria-hidden=\"true\">\r\n          <div class=\"dash-window\">\r\n            <div class=\"dash-bar\"><div class=\"dots\"><i><\/i><i><\/i><i><\/i><\/div><small>Learner dashboard<\/small><span class=\"pill pill-green\"><span class=\"dot\"><\/span>Live<\/span><\/div>\r\n            <div class=\"dash-body\">\r\n              <div class=\"dash-greeting\">\r\n                <div><h3>Your learning pathway<\/h3><p>Structured modules \u00b7 Hands-on labs<\/p><\/div>\r\n                <span class=\"pill pill-indigo\">This week<\/span>\r\n              <\/div>\r\n              <div class=\"dash-course\">\r\n                <span class=\"dash-ico\"><svg class=\"icon\"><use href=\"#i-network\"\/><\/svg><\/span>\r\n                <div><strong>Network Engineer<\/strong><span>Lab practice \u00b7 CompTIA Network+ &amp; CCNA prep<\/span><div class=\"progress\"><i style=\"width:72%\"><\/i><\/div><\/div>\r\n                <span class=\"pill pill-green\">Labs<\/span>\r\n              <\/div>\r\n              <div class=\"dash-course\">\r\n                <span class=\"dash-ico indigo\"><svg class=\"icon\"><use href=\"#i-cloud\"\/><\/svg><\/span>\r\n                <div><strong>Microsoft Azure Fundamentals<\/strong><span>AZ-900 exam preparation<\/span><div class=\"progress\"><i style=\"width:48%\"><\/i><\/div><\/div>\r\n                <span class=\"pill pill-indigo\">Cloud<\/span>\r\n              <\/div>\r\n              <div class=\"dash-course\">\r\n                <span class=\"dash-ico amber\"><svg class=\"icon\"><use href=\"#i-heart\"\/><\/svg><\/span>\r\n                <div><strong>Health Care<\/strong><span>Healthcare assistant training<\/span><div class=\"progress\"><i style=\"width:30%\"><\/i><\/div><\/div>\r\n                <span class=\"pill pill-amber\">Care<\/span>\r\n              <\/div>\r\n              <div class=\"dash-split\">\r\n                <div class=\"dash-mini\"><small>Next session<\/small><b>Mentor feedback<\/b><\/div>\r\n                <div class=\"dash-mini\"><small>Career support<\/small><b>CV &amp; interview prep<\/b><\/div>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"float-card\">\r\n            <span class=\"dash-ico\"><svg class=\"icon\"><use href=\"#i-award\"\/><\/svg><\/span>\r\n            <div><strong>Module completed<\/strong><span>Keep building momentum<\/span><\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <!-- ================= TRAINING APPROACH \/ ABOUT ================= -->\r\n    <section class=\"section bg-cream\" id=\"about\" aria-labelledby=\"about-title\">\r\n      <div class=\"container\">\r\n        <div class=\"approach\">\r\n          <div class=\"reveal\">\r\n            <p class=\"eyebrow\">About Us<\/p>\r\n            <h2 id=\"about-title\">Training That Connects <em>Skills<\/em> to Opportunity<\/h2>\r\n            <p class=\"intro\">We help learners build the knowledge and confidence employers look for in technology and healthcare.<\/p>\r\n            <p class=\"lede\">Synetal Training Limited is a London-based training provider. Our programmes combine structured learning with hands-on labs, real-world scenarios and one-to-one guidance, so that what you learn translates directly into the workplace.<\/p>\r\n            <p class=\"lede\">Whether you are changing careers, taking your first steps into the industry or strengthening existing skills, our team supports you from your first enquiry through to career preparation \u2014 with clear, honest advice at every stage.<\/p>\r\n          <\/div>\r\n          <aside class=\"info-card reveal\" style=\"--d:.1s\" aria-label=\"Programme information\">\r\n            <header><h3>Programme information<\/h3><span class=\"pill pill-green\"><span class=\"dot\"><\/span>Enrolling<\/span><\/header>\r\n            <dl>\r\n              <div><dt>Based in<\/dt><dd>London, United Kingdom<\/dd><\/div>\r\n              <div><dt>Focus areas<\/dt><dd>IT, Cloud, Cybersecurity, AI &amp; Healthcare<\/dd><\/div>\r\n              <div><dt>Duration<\/dt><dd>4 \u2013 12 weeks per programme<\/dd><\/div>\r\n              <div><dt>Delivery<\/dt><dd>Flexible, self-paced and guided learning<\/dd><\/div>\r\n              <div><dt>Support<\/dt><dd>CV, interview skills &amp; career planning<\/dd><\/div>\r\n            <\/dl>\r\n          <\/aside>\r\n        <\/div>\r\n\r\n        <div class=\"grid-3 features\" data-stagger>\r\n          <article class=\"card reveal\"><div class=\"card-icon\"><svg class=\"icon\" aria-hidden=\"true\"><use href=\"#i-tool\"\/><\/svg><\/div><h3>Practical Learning<\/h3><p>Hands-on labs, real-world scenarios and one-to-one guidance, so what you learn translates directly into the workplace.<\/p><\/article>\r\n          <article class=\"card reveal\"><div class=\"card-icon\"><svg class=\"icon\" aria-hidden=\"true\"><use href=\"#i-compass\"\/><\/svg><\/div><h3>Career Guidance<\/h3><p>Support from your first enquiry through to career preparation \u2014 with clear, honest advice at every stage.<\/p><\/article>\r\n          <article class=\"card reveal\"><div class=\"card-icon\"><svg class=\"icon\" aria-hidden=\"true\"><use href=\"#i-chart\"\/><\/svg><\/div><h3>Industry-Relevant Skills<\/h3><p>The knowledge and confidence employers look for in technology and healthcare.<\/p><\/article>\r\n        <\/div>\r\n\r\n        <div class=\"mvv reveal\">\r\n          <div><h4>Our Mission<\/h4><p>To make high-quality IT and healthcare training accessible, practical and directly connected to employment opportunities.<\/p><\/div>\r\n          <div><h4>Our Vision<\/h4><p>A workforce equipped with the digital and care skills of tomorrow, with every learner empowered to build a rewarding career.<\/p><\/div>\r\n          <div><h4>Our Values<\/h4><p>Integrity, learner-first support, practical excellence and a commitment to continuous improvement.<\/p><\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <!-- ================= COURSES ================= -->\r\n    <section class=\"section bg-white\" id=\"courses\" aria-labelledby=\"courses-title\">\r\n      <div class=\"container\">\r\n        <div class=\"section-head\">\r\n          <div class=\"reveal\"><p class=\"eyebrow\">Our Programmes<\/p><h2 id=\"courses-title\">Programmes Built for <em>Real Careers<\/em><\/h2><\/div>\r\n          <p class=\"reveal\" style=\"--d:.08s\">Flexible, career-focused pathways across IT, cloud, security, AI and healthcare \u2014 each designed to build practical skills, confidence and job readiness.<\/p>\r\n        <\/div>\r\n\r\n        <input class=\"filter-input\" type=\"radio\" name=\"course-filter\" id=\"f-all\" value=\"all\" checked>\r\n        <input class=\"filter-input\" type=\"radio\" name=\"course-filter\" id=\"f-it\" value=\"it\">\r\n        <input class=\"filter-input\" type=\"radio\" name=\"course-filter\" id=\"f-hc\" value=\"hc\">\r\n        <div class=\"filters reveal\" role=\"group\" aria-label=\"Filter programmes\">\r\n          <label for=\"f-all\">All Programmes <span>9<\/span><\/label>\r\n          <label for=\"f-it\">IT Training <span>8<\/span><\/label>\r\n          <label for=\"f-hc\">Healthcare Training <span>1<\/span><\/label>\r\n        <\/div>\r\n\r\n        <ol class=\"course-list\" data-stagger>\r\n          <li class=\"course reveal\" data-cat=\"it\"><a href=\"#contact\" data-course=\"IT Support Engineer\" aria-label=\"Enquire about IT Support Engineer\"><span class=\"course-no\">01<\/span><div><span class=\"badge\">Traineeship<\/span><h3>IT Support Engineer<\/h3><\/div><p>A career-change traineeship with no prior technical knowledge needed. Explore pathways across cloud, networking, security and DevOps.<\/p><div class=\"course-dur\"><b>4 \u2013 12 weeks<\/b>Flexible learning<\/div><span class=\"course-go\"><svg class=\"icon\" aria-hidden=\"true\"><use href=\"#i-arrow\"\/><\/svg><\/span><\/a><\/li>\r\n          <li class=\"course reveal\" data-cat=\"it\"><a href=\"#contact\" data-course=\"Network Engineer\" aria-label=\"Enquire about Network Engineer\"><span class=\"course-no\">02<\/span><div><span class=\"badge\">Networking<\/span><h3>Network Engineer<\/h3><\/div><p>Hands-on lab practice preparing you for CompTIA Network+ (N10-009) and Cisco CCNA (200-301).<\/p><div class=\"course-dur\"><b>4 \u2013 12 weeks<\/b>Flexible learning<\/div><span class=\"course-go\"><svg class=\"icon\" aria-hidden=\"true\"><use href=\"#i-arrow\"\/><\/svg><\/span><\/a><\/li>\r\n          <li class=\"course reveal\" data-cat=\"it\"><a href=\"#contact\" data-course=\"Cybersecurity Engineer\" aria-label=\"Enquire about Cybersecurity Engineer\"><span class=\"course-no\">03<\/span><div><span class=\"badge\">Cybersecurity<\/span><h3>Cybersecurity Engineer<\/h3><\/div><p>A master programme covering networking, cloud security, ethical hacking and penetration testing.<\/p><div class=\"course-dur\"><b>4 \u2013 12 weeks<\/b>Flexible learning<\/div><span class=\"course-go\"><svg class=\"icon\" aria-hidden=\"true\"><use href=\"#i-arrow\"\/><\/svg><\/span><\/a><\/li>\r\n          <li class=\"course reveal\" data-cat=\"it\"><a href=\"#contact\" data-course=\"Cloud Architect\" aria-label=\"Enquire about Cloud Architect\"><span class=\"course-no\">04<\/span><div><span class=\"badge\">Cloud Computing<\/span><h3>Cloud Architect<\/h3><\/div><p>An industry-focused bootcamp across AWS, Microsoft Azure and Google Cloud, with specialist tracks.<\/p><div class=\"course-dur\"><b>4 \u2013 12 weeks<\/b>Flexible learning<\/div><span class=\"course-go\"><svg class=\"icon\" aria-hidden=\"true\"><use href=\"#i-arrow\"\/><\/svg><\/span><\/a><\/li>\r\n          <li class=\"course reveal\" data-cat=\"it\"><a href=\"#contact\" data-course=\"AWS Solutions Architect \u2013 Associate\" aria-label=\"Enquire about AWS Solutions Architect \u2013 Associate\"><span class=\"course-no\">05<\/span><div><span class=\"badge\">DevOps &amp; Cloud<\/span><h3>AWS Solutions Architect \u2013 Associate<\/h3><\/div><p>Design resilient cloud environments and prepare for AWS certification.<\/p><div class=\"course-dur\"><b>4 \u2013 12 weeks<\/b>Flexible learning<\/div><span class=\"course-go\"><svg class=\"icon\" aria-hidden=\"true\"><use href=\"#i-arrow\"\/><\/svg><\/span><\/a><\/li>\r\n          <li class=\"course reveal\" data-cat=\"it\"><a href=\"#contact\" data-course=\"Microsoft Azure Fundamentals (AZ-900)\" aria-label=\"Enquire about Microsoft Azure Fundamentals (AZ-900)\"><span class=\"course-no\">06<\/span><div><span class=\"badge\">DevOps &amp; Cloud<\/span><h3>Microsoft Azure Fundamentals (AZ-900)<\/h3><\/div><p>Build a strong Azure foundation and prepare confidently for the AZ-900 exam.<\/p><div class=\"course-dur\"><b>4 \u2013 12 weeks<\/b>Flexible learning<\/div><span class=\"course-go\"><svg class=\"icon\" aria-hidden=\"true\"><use href=\"#i-arrow\"\/><\/svg><\/span><\/a><\/li>\r\n          <li class=\"course reveal\" data-cat=\"it\"><a href=\"#contact\" data-course=\"Terraform with Ansible Bootcamp\" aria-label=\"Enquire about Terraform with Ansible Bootcamp\"><span class=\"course-no\">07<\/span><div><span class=\"badge\">DevOps &amp; Cloud<\/span><h3>Terraform with Ansible Bootcamp<\/h3><\/div><p>Automate deployments and infrastructure with Terraform and Ansible.<\/p><div class=\"course-dur\"><b>4 \u2013 12 weeks<\/b>Flexible learning<\/div><span class=\"course-go\"><svg class=\"icon\" aria-hidden=\"true\"><use href=\"#i-arrow\"\/><\/svg><\/span><\/a><\/li>\r\n          <li class=\"course reveal\" data-cat=\"it\"><a href=\"#contact\" data-course=\"MLOps Zero to Hero\" aria-label=\"Enquire about MLOps Zero to Hero\"><span class=\"course-no\">08<\/span><div><span class=\"badge\">AI &amp; Machine Learning<\/span><h3>MLOps Zero to Hero<\/h3><\/div><p>From cloud certification to production-grade MLOps: build, deploy and manage ML models.<\/p><div class=\"course-dur\"><b>4 \u2013 12 weeks<\/b>Flexible learning<\/div><span class=\"course-go\"><svg class=\"icon\" aria-hidden=\"true\"><use href=\"#i-arrow\"\/><\/svg><\/span><\/a><\/li>\r\n          <li class=\"course reveal\" data-cat=\"hc\"><a href=\"#contact\" data-course=\"Health Care\" aria-label=\"Enquire about Health Care\"><span class=\"course-no\">09<\/span><div><span class=\"badge hc\">Healthcare<\/span><h3>Health Care<\/h3><\/div><p>Practical healthcare assistant training for working in care environments.<\/p><div class=\"course-dur\"><b>4 \u2013 12 weeks<\/b>Flexible learning<\/div><span class=\"course-go\"><svg class=\"icon\" aria-hidden=\"true\"><use href=\"#i-arrow\"\/><\/svg><\/span><\/a><\/li>\r\n        <\/ol>\r\n        <p class=\"course-note reveal\">Select a programme to send an enquiry \u2014 our team will advise on eligibility, pathway and start dates.<\/p>\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <!-- ================= PRACTICAL TRAINING ================= -->\r\n    <section class=\"section bg-cream\" id=\"career-support\" aria-labelledby=\"practical-title\">\r\n      <div class=\"container\">\r\n        <div class=\"section-head\">\r\n          <div class=\"reveal\"><p class=\"eyebrow\">Why Synetal<\/p><h2 id=\"practical-title\">Practical Training You Can <em>Rely On<\/em><\/h2><\/div>\r\n          <p class=\"reveal\" style=\"--d:.08s\">Everything we do is designed to move you from learning to working \u2014 with support that continues well beyond the classroom.<\/p>\r\n        <\/div>\r\n        <div class=\"grid-3 practical\" data-stagger>\r\n          <article class=\"card reveal\"><div class=\"card-icon\"><svg class=\"icon\" aria-hidden=\"true\"><use href=\"#i-chart\"\/><\/svg><\/div><h3>Industry-Relevant Skills<\/h3><p>Curriculum aligned with current technology and workplace requirements.<\/p><\/article>\r\n          <article class=\"card reveal\"><div class=\"card-icon\"><svg class=\"icon\" aria-hidden=\"true\"><use href=\"#i-terminal\"\/><\/svg><\/div><h3>Hands-On Experience<\/h3><p>Projects, exercises, labs and real-world scenarios that build genuine ability.<\/p><\/article>\r\n          <article class=\"card reveal\"><div class=\"card-icon\"><svg class=\"icon\" aria-hidden=\"true\"><use href=\"#i-users\"\/><\/svg><\/div><h3>Expert Guidance<\/h3><p>Learn from experienced trainers and industry professionals.<\/p><\/article>\r\n          <article class=\"card reveal\"><div class=\"card-icon\"><svg class=\"icon\" aria-hidden=\"true\"><use href=\"#i-briefcase\"\/><\/svg><\/div><h3>Career Development<\/h3><p>CV preparation, interview skills, professional profiles and career planning.<\/p><\/article>\r\n          <article class=\"card reveal\"><div class=\"card-icon\"><svg class=\"icon\" aria-hidden=\"true\"><use href=\"#i-clock\"\/><\/svg><\/div><h3>Flexible Learning<\/h3><p>Study at your own pace with options that fit around your commitments.<\/p><\/article>\r\n          <article class=\"card reveal\"><div class=\"card-icon\"><svg class=\"icon\" aria-hidden=\"true\"><use href=\"#i-layers\"\/><\/svg><\/div><h3>Ongoing Mentorship<\/h3><p>Guidance throughout your learning journey as your confidence grows.<\/p><\/article>\r\n        <\/div>\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <!-- ================= LEARNING JOURNEY ================= -->\r\n    <section class=\"section bg-cream\" style=\"padding-top:0\" aria-labelledby=\"journey-title\">\r\n      <div class=\"container\">\r\n        <div class=\"section-head center\">\r\n          <div class=\"reveal\"><p class=\"eyebrow\">How It Works<\/p><h2 id=\"journey-title\">Four Steps From <em>Enquiry to Launch<\/em><\/h2><\/div>\r\n        <\/div>\r\n        <ol class=\"journey\" data-stagger>\r\n          <li class=\"step reveal\"><span class=\"step-num\">01<\/span><h3>Enquire<\/h3><p>Tell us your goals and background. We help you choose the right pathway.<\/p><\/li>\r\n          <li class=\"step reveal\"><span class=\"step-num\">02<\/span><h3>Choose Your Programme<\/h3><p>Confirm the programme that fits your goals, with clear advice on what it involves.<\/p><\/li>\r\n          <li class=\"step reveal\"><span class=\"step-num\">03<\/span><h3>Learn &amp; Practise<\/h3><p>Follow structured, expert-led training and build confidence through labs, projects and mentor feedback.<\/p><\/li>\r\n          <li class=\"step reveal\"><span class=\"step-num\">04<\/span><h3>Launch Your Career<\/h3><p>Refine your CV, prepare for interviews and step towards your next role.<\/p><\/li>\r\n        <\/ol>\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <!-- ================= STATISTICS ================= -->\r\n    <section class=\"stats\" aria-labelledby=\"stats-title\">\r\n      <div class=\"container\">\r\n        <div class=\"section-head center\">\r\n          <div class=\"reveal\"><p class=\"eyebrow\">At a Glance<\/p><h2 id=\"stats-title\">Training With Measurable Focus<\/h2><\/div>\r\n        <\/div>\r\n        <div class=\"stat-grid\" data-stagger>\r\n          <div class=\"stat reveal\"><b data-count=\"94\">94<i>%<\/i><\/b><span>Success rate<\/span><\/div>\r\n          <div class=\"stat reveal\"><b data-count=\"90\">90<i>%<\/i><\/b><span>Learner satisfaction<\/span><\/div>\r\n          <div class=\"stat reveal\"><b data-count=\"7\">7<i>+<\/i><\/b><span>Career pathways<\/span><\/div>\r\n          <div class=\"stat reveal\"><b data-count=\"9\">9<i>+<\/i><\/b><span>Years of group experience<\/span><\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <!-- ================= WHY CHOOSE ================= -->\r\n    <section class=\"section bg-white\" aria-labelledby=\"why-title\">\r\n      <div class=\"container split\">\r\n        <div class=\"reveal\">\r\n          <p class=\"eyebrow\">Why Choose Synetal Training?<\/p>\r\n          <h2 id=\"why-title\">Transparent, Professional and <em>Learner-First<\/em><\/h2>\r\n          <p class=\"lede\">We believe in earning your trust through clarity.<\/p>\r\n          <p class=\"lede\">You will always know what a programme involves, what support is available and what to realistically expect.<\/p>\r\n          <a class=\"btn btn-navy\" href=\"#contact\" style=\"margin-top:32px\">Speak to an Advisor<svg class=\"icon\" aria-hidden=\"true\"><use href=\"#i-arrow\"\/><\/svg><\/a>\r\n        <\/div>\r\n        <ul class=\"benefits\" data-stagger>\r\n          <li class=\"reveal\"><span class=\"check\"><svg class=\"icon\" aria-hidden=\"true\"><use href=\"#i-check\"\/><\/svg><\/span><div><h3>Practical learning approach<\/h3><p>Structured learning with hands-on labs, real-world scenarios and one-to-one guidance.<\/p><\/div><\/li>\r\n          <li class=\"reveal\"><span class=\"check\"><svg class=\"icon\" aria-hidden=\"true\"><use href=\"#i-check\"\/><\/svg><\/span><div><h3>Clear, honest guidance<\/h3><p>Straightforward advice on pathways, eligibility and expectations.<\/p><\/div><\/li>\r\n          <li class=\"reveal\"><span class=\"check\"><svg class=\"icon\" aria-hidden=\"true\"><use href=\"#i-check\"\/><\/svg><\/span><div><h3>Your information is respected<\/h3><p>Personal details are handled with care and used only to respond to you.<\/p><\/div><\/li>\r\n          <li class=\"reveal\"><span class=\"check\"><svg class=\"icon\" aria-hidden=\"true\"><use href=\"#i-check\"\/><\/svg><\/span><div><h3>No false promises<\/h3><p>Outcomes depend on eligibility, effort and employers. We never guarantee a job offer.<\/p><\/div><\/li>\r\n          <li class=\"reveal\"><span class=\"check\"><svg class=\"icon\" aria-hidden=\"true\"><use href=\"#i-check\"\/><\/svg><\/span><div><h3>Real people, real support<\/h3><p>Reach our team by phone or email at any stage of your journey.<\/p><\/div><\/li>\r\n        <\/ul>\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <!-- ================= TESTIMONIALS ================= -->\r\n    <section class=\"section bg-cream\" id=\"reviews\" aria-labelledby=\"reviews-title\">\r\n      <div class=\"container\">\r\n        <div class=\"section-head\">\r\n          <div class=\"reveal\"><p class=\"eyebrow\">Learner Feedback<\/p><h2 id=\"reviews-title\">What Our <em>Learners<\/em> Say<\/h2><\/div>\r\n          <p class=\"reveal\" style=\"--d:.08s\">Hear from learners who built practical skills and confidence through our Healthcare Assistant training.<\/p>\r\n        <\/div>\r\n        <div class=\"testimonials\" data-stagger>\r\n          <figure class=\"card testimonial reveal\">\r\n            <div class=\"stars\" role=\"img\" aria-label=\"Rated 5 out of 5\"><svg><use href=\"#i-star\"\/><\/svg><svg><use href=\"#i-star\"\/><\/svg><svg><use href=\"#i-star\"\/><\/svg><svg><use href=\"#i-star\"\/><\/svg><svg><use href=\"#i-star\"\/><\/svg><\/div>\r\n            <blockquote>\u201cThe training was clear, informative and easy to understand. I gained useful knowledge and feel more confident about my healthcare career journey.\u201d<\/blockquote>\r\n            <figcaption><span class=\"avatar\" aria-hidden=\"true\">H<\/span><div><strong>Harshida<\/strong><span>Healthcare Assistant<\/span><\/div><\/figcaption>\r\n          <\/figure>\r\n          <figure class=\"card testimonial reveal\">\r\n            <div class=\"stars\" role=\"img\" aria-label=\"Rated 5 out of 5\"><svg><use href=\"#i-star\"\/><\/svg><svg><use href=\"#i-star\"\/><\/svg><svg><use href=\"#i-star\"\/><\/svg><svg><use href=\"#i-star\"\/><\/svg><svg><use href=\"#i-star\"\/><\/svg><\/div>\r\n            <blockquote>\u201cI really enjoyed the learning experience. The training helped me understand the role better and develop important skills for working in healthcare.\u201d<\/blockquote>\r\n            <figcaption><span class=\"avatar\" aria-hidden=\"true\">L<\/span><div><strong>Leesha<\/strong><span>Healthcare Assistant<\/span><\/div><\/figcaption>\r\n          <\/figure>\r\n          <figure class=\"card testimonial reveal\">\r\n            <div class=\"stars\" role=\"img\" aria-label=\"Rated 5 out of 5\"><svg><use href=\"#i-star\"\/><\/svg><svg><use href=\"#i-star\"\/><\/svg><svg><use href=\"#i-star\"\/><\/svg><svg><use href=\"#i-star\"\/><\/svg><svg><use href=\"#i-star\"\/><\/svg><\/div>\r\n            <blockquote>\u201cThe course was practical and engaging. I learned valuable healthcare skills and received helpful guidance throughout my learning journey.\u201d<\/blockquote>\r\n            <figcaption><span class=\"avatar\" aria-hidden=\"true\">A<\/span><div><strong>Anirudh<\/strong><span>Healthcare Assistant<\/span><\/div><\/figcaption>\r\n          <\/figure>\r\n          <figure class=\"card testimonial reveal\">\r\n            <div class=\"stars\" role=\"img\" aria-label=\"Rated 5 out of 5\"><svg><use href=\"#i-star\"\/><\/svg><svg><use href=\"#i-star\"\/><\/svg><svg><use href=\"#i-star\"\/><\/svg><svg><use href=\"#i-star\"\/><\/svg><svg><use href=\"#i-star\"\/><\/svg><\/div>\r\n            <blockquote>\u201cThe training gave me a better understanding of healthcare work and helped me build my knowledge and confidence.\u201d<\/blockquote>\r\n            <figcaption><span class=\"avatar\" aria-hidden=\"true\">B<\/span><div><strong>Balzendra<\/strong><span>Healthcare Assistant<\/span><\/div><\/figcaption>\r\n          <\/figure>\r\n        <\/div>\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <!-- ================= FAQ ================= -->\r\n    <section class=\"section bg-white\" id=\"faq\" aria-labelledby=\"faq-title\">\r\n      <div class=\"container split\">\r\n        <div class=\"reveal\">\r\n          <p class=\"eyebrow\">FAQ<\/p>\r\n          <h2 id=\"faq-title\">Questions We\u2019re <em>Often Asked<\/em><\/h2>\r\n          <p class=\"lede\">Can\u2019t find your answer? Our team is happy to help.<\/p>\r\n          <a class=\"btn btn-outline\" href=\"#contact\" style=\"margin-top:28px\">Contact Our Team<svg class=\"icon\" aria-hidden=\"true\"><use href=\"#i-arrow\"\/><\/svg><\/a>\r\n        <\/div>\r\n        <div class=\"faq-list reveal\" style=\"--d:.08s\">\r\n          <details class=\"faq\" name=\"faq\" open><summary>Do I need prior experience?<span class=\"pm\" aria-hidden=\"true\"><\/span><\/summary><div class=\"faq-body\"><p>Not for our traineeship pathways. The IT Support Engineer traineeship is designed for career changers with no prior technical knowledge.<\/p><\/div><\/details>\r\n          <details class=\"faq\" name=\"faq\"><summary>How long are the courses?<span class=\"pm\" aria-hidden=\"true\"><\/span><\/summary><div class=\"faq-body\"><p>Most programmes run for 4 to 12 weeks, depending on the pathway and your pace.<\/p><\/div><\/details>\r\n          <details class=\"faq\" name=\"faq\"><summary>Is the learning flexible?<span class=\"pm\" aria-hidden=\"true\"><\/span><\/summary><div class=\"faq-body\"><p>Yes. Our programmes offer flexible options so you can study around work and personal commitments.<\/p><\/div><\/details>\r\n          <details class=\"faq\" name=\"faq\"><summary>Do you help with CVs and interviews?<span class=\"pm\" aria-hidden=\"true\"><\/span><\/summary><div class=\"faq-body\"><p>Yes. Career support includes CV preparation, interview skills, professional profiles and career planning.<\/p><\/div><\/details>\r\n          <details class=\"faq\" name=\"faq\"><summary>Do you guarantee a job?<span class=\"pm\" aria-hidden=\"true\"><\/span><\/summary><div class=\"faq-body\"><p>We provide training and career guidance, but hiring decisions rest with employers, so we cannot guarantee employment.<\/p><\/div><\/details>\r\n          <details class=\"faq\" name=\"faq\"><summary>How do I enrol?<span class=\"pm\" aria-hidden=\"true\"><\/span><\/summary><div class=\"faq-body\"><p>Send an enquiry using the form below, or call or email us. We will guide you through the next steps.<\/p><\/div><\/details>\r\n        <\/div>\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <!-- ================= CTA ================= -->\r\n    <section class=\"cta\" aria-labelledby=\"cta-title\">\r\n      <div class=\"container reveal\">\r\n        <h2 id=\"cta-title\">Ready to Start Building Skills for <em>Tomorrow?<\/em><\/h2>\r\n        <p>Take the next step towards your professional future with practical, career-focused training.<\/p>\r\n        <a class=\"btn btn-green\" href=\"#courses\">Explore Courses<svg class=\"icon\" aria-hidden=\"true\"><use href=\"#i-arrow\"\/><\/svg><\/a>\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <!-- ================= CONTACT ================= -->\r\n    <section class=\"section bg-cream\" id=\"contact\" aria-labelledby=\"contact-title\">\r\n      <div class=\"container contact\">\r\n        <div class=\"reveal\">\r\n          <p class=\"eyebrow\">Contact Us<\/p>\r\n          <h2 id=\"contact-title\">Let\u2019s Talk About <em>Your Career<\/em><\/h2>\r\n          <p class=\"lede\">Questions about a course, eligibility or career support? Send us a message and our team will get back to you.<\/p>\r\n          <ul class=\"contact-items\">\r\n            <li><span class=\"dash-ico\"><svg class=\"icon\" aria-hidden=\"true\"><use href=\"#i-phone\"\/><\/svg><\/span><div><small>Telephone<\/small><a href=\"tel:+447352473257\">+44 (7352) 473257<\/a><\/div><\/li>\r\n            <li><span class=\"dash-ico\"><svg class=\"icon\" aria-hidden=\"true\"><use href=\"#i-mail\"\/><\/svg><\/span><div><small>Email<\/small><a href=\"mailto:synetaltraininglimited@gmail.com\">synetaltraininglimited@gmail.com<\/a><\/div><\/li>\r\n            <li><span class=\"dash-ico\"><svg class=\"icon\" aria-hidden=\"true\"><use href=\"#i-pin\"\/><\/svg><\/span><div><small>Address<\/small><address>14 Truman Walk, London E3 3FB<\/address><\/div><\/li>\r\n          <\/ul>\r\n          <div class=\"next-steps\">\r\n            <h3>What happens next<\/h3>\r\n            <ol>\r\n              <li><b>We review<\/b> \u2014 our team reads your enquiry and understands your goals and background.<\/li>\r\n              <li><b>We get in touch<\/b> \u2014 we contact you by phone or email to recommend the right pathway.<\/li>\r\n              <li><b>You begin<\/b> \u2014 confirm your programme and start building skills for tomorrow.<\/li>\r\n            <\/ol>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <!-- Enquiry form: opens the visitor's email app (same behaviour as the original site). -->\r\n        <form class=\"form reveal\" style=\"--d:.08s\" id=\"enquiry-form\" action=\"mailto:synetaltraininglimited@gmail.com\" method=\"post\" enctype=\"text\/plain\">\r\n          <h3>Send an enquiry<\/h3>\r\n          <p>Fill in the form and we\u2019ll respond as soon as we can.<\/p>\r\n          <div class=\"field-row\">\r\n            <div class=\"field\"><label for=\"f-name\">Full Name<\/label><input id=\"f-name\" name=\"Full Name\" type=\"text\" autocomplete=\"name\" placeholder=\"Your full name\" required><\/div>\r\n            <div class=\"field\"><label for=\"f-email\">Email Address<\/label><input id=\"f-email\" name=\"Email\" type=\"email\" autocomplete=\"email\" placeholder=\"you@example.com\" required><\/div>\r\n          <\/div>\r\n          <div class=\"field-row\">\r\n            <div class=\"field\"><label for=\"f-phone\">Phone Number <span>(optional)<\/span><\/label><input id=\"f-phone\" name=\"Phone\" type=\"tel\" autocomplete=\"tel\" placeholder=\"+44\"><\/div>\r\n            <div class=\"field\">\r\n              <label for=\"f-programme\">Programme of Interest<\/label>\r\n              <select id=\"f-programme\" name=\"Programme\">\r\n                <option>IT Support Engineer<\/option>\r\n                <option>Network Engineer<\/option>\r\n                <option>Cybersecurity Engineer<\/option>\r\n                <option>Cloud Architect<\/option>\r\n                <option>AWS Solutions Architect \u2013 Associate<\/option>\r\n                <option>Microsoft Azure Fundamentals (AZ-900)<\/option>\r\n                <option>Terraform with Ansible Bootcamp<\/option>\r\n                <option>MLOps Zero to Hero<\/option>\r\n                <option>Health Care<\/option>\r\n                <option>Not sure yet \u2013 please advise<\/option>\r\n              <\/select>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"field\"><label for=\"f-message\">Message<\/label><textarea id=\"f-message\" name=\"Message\" rows=\"5\" placeholder=\"Tell us about your goals and background\u2026\" required><\/textarea><\/div>\r\n          <button class=\"btn btn-green\" type=\"submit\">Submit Enquiry<svg class=\"icon\" aria-hidden=\"true\"><use href=\"#i-arrow\"\/><\/svg><\/button>\r\n          <p class=\"form-note\">Submitting opens your email app with your enquiry ready to send to our team.<\/p>\r\n        <\/form>\r\n      <\/div>\r\n    <\/section>\r\n  <\/main>\r\n\r\n  <!-- ================= FOOTER ================= -->\r\n  <footer class=\"footer\">\r\n    <div class=\"container\">\r\n      <div class=\"footer-grid\">\r\n        <div>\r\n          <a class=\"logo\" href=\"#home\" aria-label=\"Synetal Training Limited \u2013 home\">\r\n            <img src=\"https:\/\/synetaltraining.co.uk\/wp-content\/uploads\/2026\/11\/synetal-Training-logo.jpeg\"\r\n                 alt=\"Synetal Training \u2013 Skills for Tomorrow\" height=\"42\" loading=\"lazy\" decoding=\"async\"\r\n                 onerror=\"this.hidden=true;this.nextElementSibling.hidden=false\">\r\n            <span class=\"logo-fallback\" hidden>Synetal Training<small>Skills for Tomorrow<\/small><\/span>\r\n          <\/a>\r\n          <p>Career-focused IT and healthcare training for tomorrow\u2019s workforce, based in London.<\/p>\r\n        <\/div>\r\n        <nav aria-label=\"Footer \u2013 quick links\">\r\n          <h4>Quick Links<\/h4>\r\n          <ul>\r\n            <li><a href=\"#about\">About Us<\/a><\/li>\r\n            <li><a href=\"#courses\">Courses<\/a><\/li>\r\n            <li><a href=\"#career-support\">Career Support<\/a><\/li>\r\n            <li><a href=\"#faq\">FAQ<\/a><\/li>\r\n            <li><a href=\"#contact\">Contact<\/a><\/li>\r\n          <\/ul>\r\n        <\/nav>\r\n        <nav aria-label=\"Footer \u2013 programmes\">\r\n          <h4>Programmes<\/h4>\r\n          <ul>\r\n            <li><a href=\"#courses\" data-filter=\"it\">IT Training<\/a><\/li>\r\n            <li><a href=\"#courses\" data-filter=\"it\">Cybersecurity<\/a><\/li>\r\n            <li><a href=\"#courses\" data-filter=\"it\">Cloud &amp; DevOps<\/a><\/li>\r\n            <li><a href=\"#courses\" data-filter=\"hc\">Healthcare Training<\/a><\/li>\r\n          <\/ul>\r\n        <\/nav>\r\n        <div>\r\n          <h4>Contact<\/h4>\r\n          <ul>\r\n            <li><a href=\"tel:+447352473257\">+44 (7352) 473257<\/a><\/li>\r\n            <li><a href=\"mailto:synetaltraininglimited@gmail.com\">synetaltraininglimited@gmail.com<\/a><\/li>\r\n            <li><address>14 Truman Walk, London E3 3FB<\/address><\/li>\r\n          <\/ul>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"footer-bottom\">\r\n        <span>\u00a9 <span id=\"year\">2026<\/span> Synetal Training Limited. All rights reserved.<\/span>\r\n        <!-- Add Privacy Policy \/ Terms & Conditions links here once those pages exist, e.g.\r\n             <a href=\"\/privacy-policy\/\">Privacy Policy<\/a> \u00b7 <a href=\"\/terms-and-conditions\/\">Terms &amp; Conditions<\/a> -->\r\n        <span>Skills for Tomorrow<\/span>\r\n      <\/div>\r\n    <\/div>\r\n  <\/footer>\r\n\r\n  <a class=\"to-top\" id=\"to-top\" href=\"#home\" aria-label=\"Back to top\"><svg class=\"icon\" aria-hidden=\"true\"><use href=\"#i-arrow\"\/><\/svg><\/a>\r\n\r\n  <!-- ================= SCRIPT (vanilla, progressive enhancement) ================= -->\r\n  <script>\r\n  (function () {\r\n    'use strict';\r\n    var reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n    var $ = function (s, c) { return (c || document).querySelector(s); };\r\n    var $$ = function (s, c) { return Array.prototype.slice.call((c || document).querySelectorAll(s)); };\r\n\r\n    \/* 1. Sticky header + back-to-top *\/\r\n    var header = $('#site-header'), toTop = $('#to-top');\r\n    function onScroll() {\r\n      var y = window.scrollY || window.pageYOffset;\r\n      header.classList.toggle('is-scrolled', y > 10);\r\n      toTop.classList.toggle('is-visible', y > 800);\r\n    }\r\n    window.addEventListener('scroll', onScroll, { passive: true });\r\n    onScroll();\r\n\r\n    \/* 2. Mobile menu *\/\r\n    var menuBtn = $('#menu-button'), menu = $('#primary-menu');\r\n    function setMenu(open) {\r\n      menu.classList.toggle('is-open', open);\r\n      menuBtn.setAttribute('aria-expanded', String(open));\r\n      menuBtn.setAttribute('aria-label', open ? 'Close menu' : 'Open menu');\r\n    }\r\n    menuBtn.addEventListener('click', function () { setMenu(!menu.classList.contains('is-open')); });\r\n    document.addEventListener('keydown', function (e) {\r\n      if (e.key === 'Escape' && menu.classList.contains('is-open')) { setMenu(false); menuBtn.focus(); }\r\n    });\r\n    document.addEventListener('click', function (e) {\r\n      if (menu.classList.contains('is-open') && !menu.contains(e.target) && !menuBtn.contains(e.target)) setMenu(false);\r\n    });\r\n    window.addEventListener('resize', function () { if (window.innerWidth > 1200) setMenu(false); });\r\n\r\n    \/* 3. Links that pre-select a course filter (IT Training \/ Healthcare Training) *\/\r\n    $$('a[data-filter]').forEach(function (link) {\r\n      link.addEventListener('click', function () {\r\n        var radio = document.getElementById('f-' + link.getAttribute('data-filter'));\r\n        if (radio) radio.checked = true;\r\n      });\r\n    });\r\n    $$('#primary-menu a').forEach(function (a) { a.addEventListener('click', function () { setMenu(false); }); });\r\n\r\n    \/* 4. Course rows pre-fill the \"Programme of Interest\" field *\/\r\n    var programme = $('#f-programme');\r\n    $$('.course a[data-course]').forEach(function (a) {\r\n      a.addEventListener('click', function () { programme.value = a.getAttribute('data-course'); });\r\n    });\r\n\r\n    \/* 5. FAQ: one item open at a time, with smooth height animation *\/\r\n    var faqs = $$('.faq');\r\n    function animate(el, from, to, done) {\r\n      if (reduceMotion || !el.animate) { done && done(); return; }\r\n      var anim = el.animate([{ height: from + 'px' }, { height: to + 'px' }], { duration: 320, easing: 'cubic-bezier(.22,.61,.36,1)' });\r\n      anim.onfinish = function () { done && done(); };\r\n    }\r\n    function closeFaq(item) {\r\n      var body = $('.faq-body', item);\r\n      animate(body, body.offsetHeight, 0, function () { item.open = false; });\r\n      if (reduceMotion || !body.animate) item.open = false;\r\n    }\r\n    faqs.forEach(function (item) {\r\n      var summary = $('summary', item), body = $('.faq-body', item);\r\n      summary.addEventListener('click', function (e) {\r\n        e.preventDefault();\r\n        if (item.open) { closeFaq(item); return; }\r\n        faqs.forEach(function (other) { if (other !== item && other.open) closeFaq(other); });\r\n        item.open = true;\r\n        animate(body, 0, body.offsetHeight);\r\n      });\r\n    });\r\n\r\n    \/* 6. Stagger delays for grouped cards *\/\r\n    $$('[data-stagger]').forEach(function (group) {\r\n      $$('.reveal', group).forEach(function (el, i) { el.style.setProperty('--d', (Math.min(i, 8) * 0.07) + 's'); });\r\n    });\r\n\r\n    \/* 7. Count-up statistics *\/\r\n    function countUp(el) {\r\n      if (el.dataset.done) return;\r\n      el.dataset.done = '1';\r\n      var target = parseInt(el.getAttribute('data-count'), 10);\r\n      var suffixEl = el.querySelector('i'), suffix = suffixEl ? suffixEl.outerHTML : '';\r\n      if (reduceMotion || !target) return;\r\n      var start = null, duration = 1400;\r\n      function frame(t) {\r\n        if (!start) start = t;\r\n        var p = Math.min((t - start) \/ duration, 1);\r\n        el.innerHTML = Math.round(target * (1 - Math.pow(1 - p, 3))) + suffix;\r\n        if (p < 1) requestAnimationFrame(frame);\r\n      }\r\n      requestAnimationFrame(frame);\r\n      setTimeout(function () { el.innerHTML = target + suffix; }, duration + 300);\r\n    }\r\n\r\n    \/* 8. Scroll-triggered reveals (Intersection Observer) *\/\r\n    var items = $$('.reveal');\r\n    function show(el) {\r\n      el.classList.add('is-in');\r\n      $$('[data-count]', el).forEach(countUp);\r\n    }\r\n    if ('IntersectionObserver' in window && !reduceMotion) {\r\n      var io = new IntersectionObserver(function (entries) {\r\n        entries.forEach(function (entry) {\r\n          if (entry.isIntersecting) { show(entry.target); io.unobserve(entry.target); }\r\n        });\r\n      }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });\r\n      items.forEach(function (el) { io.observe(el); });\r\n    } else {\r\n      items.forEach(show);\r\n    }\r\n    \/* Safety net: never leave content hidden (e.g. inside page builders or iframes) *\/\r\n    setTimeout(function () { items.forEach(function (el) { if (!el.classList.contains('is-in')) show(el); }); }, 3000);\r\n\r\n    \/* 9. Current year *\/\r\n    var year = $('#year'); if (year) year.textContent = new Date().getFullYear();\r\n  })();\r\n  <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Synetal Training Limited | Career-Focused IT &amp; Healthcare Training in [&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-10","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/synetaltraining.co.uk\/index.php?rest_route=\/wp\/v2\/pages\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/synetaltraining.co.uk\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/synetaltraining.co.uk\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/synetaltraining.co.uk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/synetaltraining.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=10"}],"version-history":[{"count":17,"href":"http:\/\/synetaltraining.co.uk\/index.php?rest_route=\/wp\/v2\/pages\/10\/revisions"}],"predecessor-version":[{"id":57,"href":"http:\/\/synetaltraining.co.uk\/index.php?rest_route=\/wp\/v2\/pages\/10\/revisions\/57"}],"wp:attachment":[{"href":"http:\/\/synetaltraining.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}