{"id":23,"date":"2026-03-09T07:33:03","date_gmt":"2026-03-09T07:33:03","guid":{"rendered":"https:\/\/eclecticmedicalbilling.geeksquared.dev\/?page_id=23"},"modified":"2026-03-11T03:15:17","modified_gmt":"2026-03-11T03:15:17","slug":"home","status":"publish","type":"page","link":"https:\/\/eclecticmedicalbilling.geeksquared.dev\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"23\" class=\"elementor elementor-23\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f6c66f9 e-con-full e-flex e-con e-parent\" data-id=\"f6c66f9\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0a99191 elementor-widget elementor-widget-html\" data-id=\"0a99191\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" \/>\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\/>\n  <title>Eclectic Medical Billing & Coding LLC<\/title>\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n  <style>\n    \/* Custom heading font *\/\n    @font-face {\n      font-family: 'TTDrugs';\n      src: url('https:\/\/eclecticmedicalbilling.geeksquared.dev\/wp-content\/uploads\/2026\/03\/TT-Drugs-Trial-Regular-BF66880905ce62d.ttf') format('truetype');\n      font-weight: normal;\n      font-style: normal;\n      font-display: swap;\n    }\n\n    :root {\n      --blue:      #5170FF;\n      --blue-dk:   #3A56E8;\n      --blue-lt:   #7B92FF;\n      --white:     #FFFFFF;\n      --off-white: #F4F6FB;\n      --black:     #0D0D0D;\n      --gray:      #6B7280;\n      --gray-lt:   #E4E8F4;\n      --radius:    12px;\n      --pad:       clamp(20px, 6vw, 90px);\n    }\n\n    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n    html { scroll-behavior: smooth; }\n    body { font-family: 'Outfit', sans-serif; color: var(--black); background: var(--white); overflow-x: hidden; line-height: 1.7; }\n    img { display: block; max-width: 100%; }\n    a { text-decoration: none; color: inherit; }\n\n    \/* Headings use TTDrugs font *\/\n    h1, h2, h3, h4, h5, h6 {\n      font-family: 'TTDrugs', 'Outfit', sans-serif;\n      font-weight: normal;\n      line-height: 1.15;\n      letter-spacing: -0.01em;\n    }\n    h1 { font-size: clamp(2.6rem, 5vw, 4.4rem); }\n    \/* 2. Slightly reduced h2 size *\/\n    h2 { font-size: clamp(1.55rem, 3vw, 2.3rem); }\n    h3 { font-size: 1.05rem; }\n\n    .wrap { max-width: 1280px; margin-inline: auto; padding-inline: var(--pad); }\n\n    .tag {\n      display: inline-block;\n      font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;\n      color: var(--blue); background: rgba(81,112,255,.1);\n      padding: 5px 14px; border-radius: 100px; margin-bottom: 14px;\n      font-family: 'Outfit', sans-serif;\n    }\n\n    \/* NAV \u2014 1. Increased navbar height so logo can be bigger *\/\n    nav {\n      position: fixed; top: 0; left: 0; right: 0; z-index: 200;\n      background: rgba(255,255,255,0.93); backdrop-filter: blur(16px);\n      border-bottom: 1px solid rgba(81,112,255,0.1); transition: box-shadow .3s;\n    }\n    nav.scrolled { box-shadow: 0 4px 24px rgba(0,0,0,.07); }\n    .nav-inner {\n      display: flex; align-items: center; justify-content: space-between;\n      \/* 1. Increased from 68px to 86px *\/\n      height: 86px;\n      padding-inline: var(--pad); max-width: 1280px; margin-inline: auto;\n    }\n    \/* 1. Logo larger *\/\n    .nav-logo img { height: 62px; width: auto; }\n    .nav-links { display: flex; gap: 32px; list-style: none; }\n    .nav-links a { font-size: 0.875rem; font-weight: 500; color: var(--black); opacity: .65; transition: opacity .2s, color .2s; }\n    .nav-links a:hover { opacity: 1; color: var(--blue); }\n    .nav-cta {\n      background: var(--blue); color: var(--white) !important; opacity: 1 !important;\n      padding: 10px 24px; border-radius: 100px; font-weight: 600;\n      transition: background .2s, transform .2s !important;\n    }\n    .nav-cta:hover { background: var(--blue-dk) !important; transform: translateY(-1px); }\n\n    .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; background: none; border: none; }\n    .hamburger span { display: block; width: 24px; height: 2px; background: var(--black); border-radius: 2px; transition: transform .3s, opacity .3s; }\n    .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }\n    .hamburger.open span:nth-child(2) { opacity: 0; }\n    .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }\n\n    \/* 1. Mobile menu top adjusted for taller nav *\/\n    .mobile-menu {\n      display: none; position: fixed; top: 86px; left: 0; right: 0;\n      background: var(--white); border-bottom: 1px solid var(--gray-lt); z-index: 199;\n      padding: 24px var(--pad); flex-direction: column; gap: 20px;\n      box-shadow: 0 12px 40px rgba(0,0,0,.1);\n    }\n    .mobile-menu.open { display: flex; }\n    .mobile-menu a { font-size: 1rem; font-weight: 500; color: var(--black); opacity: .75; }\n    .mobile-menu a.mob-cta {\n      background: var(--blue); color: var(--white) !important; opacity: 1;\n      padding: 13px 24px; border-radius: 100px; text-align: center; font-weight: 600; margin-top: 4px;\n    }\n\n    \/* HERO \u2014 2. padding-top updated for taller nav, image flush to bottom *\/\n    #hero {\n      position: relative; height: 100vh; min-height: 640px;\n      display: flex; align-items: stretch;\n      \/* 2. Updated padding for taller nav *\/\n      padding-top: 86px;\n      overflow: hidden;\n    }\n    .hero-bg {\n      position: absolute; inset: 0;\n      background-image: url('https:\/\/eclecticmedicalbilling.geeksquared.dev\/wp-content\/uploads\/2026\/03\/Cleveland-Ohio-background-1.jpg');\n      background-size: cover; background-position: center center; z-index: 0;\n    }\n    .hero-bg::after {\n      content: ''; position: absolute; inset: 0;\n      background: linear-gradient(120deg, rgba(81,112,255,0.88) 0%, rgba(40,65,200,0.76) 45%, rgba(10,10,40,0.62) 100%);\n    }\n    .hero-content {\n      position: relative; z-index: 2; width: 100%;\n      display: grid; grid-template-columns: 1fr 1fr;\n      align-items: center;\n      padding-inline: var(--pad);\n      max-width: 1280px; margin-inline: auto;\n    }\n    .hero-text { padding: 40px 40px 40px 0; animation: fadeUp .8s ease both; }\n    .hero-text h1 { color: var(--white); margin-bottom: 20px; text-shadow: 0 2px 20px rgba(0,0,0,.25); }\n    .hero-text h1 em { font-style: normal; color: #B0C4FF; }\n    \/* 3. Increased paragraph text sizes in hero *\/\n    .hero-sub { color: rgba(255,255,255,.88); font-size: 1.05rem; max-width: 500px; margin-bottom: 10px; }\n    .hero-support { color: rgba(255,255,255,.75); font-size: 0.95rem; max-width: 480px; margin-bottom: 36px; }\n    .hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }\n\n    .btn-primary {\n      background: var(--white); color: var(--blue); font-weight: 700; font-size: 0.925rem;\n      padding: 13px 30px; border-radius: 100px; border: none; cursor: pointer;\n      transition: transform .2s, box-shadow .2s; box-shadow: 0 4px 20px rgba(0,0,0,.18);\n    }\n    .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.22); }\n    .btn-outline {\n      background: transparent; color: var(--white); font-weight: 600; font-size: 0.925rem;\n      padding: 13px 30px; border-radius: 100px; border: 1.5px solid rgba(255,255,255,.5); cursor: pointer;\n      transition: background .2s, border-color .2s;\n    }\n    .btn-outline:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.9); }\n\n    \/* 2. Hero photo flush to bottom *\/\n    .hero-photo-wrap {\n      position: relative; display: flex; justify-content: center; align-items: flex-end;\n      animation: fadeUp .8s .2s ease both;\n      align-self: stretch;\n      height: 100%;\n    }\n    .hero-photo {\n      \/* 2. Fill full height of hero, flush to bottom *\/\n      height: 100%;\n      max-height: 100%;\n      width: auto;\n      object-fit: contain;\n      object-position: bottom center;\n      filter: drop-shadow(-12px 0 50px rgba(0,0,0,.45));\n      position: relative; z-index: 2; display: block;\n      \/* Ensure it sits at the very bottom *\/\n      margin-top: auto;\n    }\n    .hero-photo-wrap::before {\n      content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);\n      width: 280px; height: 280px; background: rgba(81,112,255,.28);\n      border-radius: 50%; filter: blur(70px); z-index: 1;\n    }\n\n    \/* STATS RIBBON *\/\n    .stats-ribbon { background: var(--blue); }\n    .stats-inner {\n      display: grid; grid-template-columns: repeat(3, 1fr);\n      max-width: 1280px; margin-inline: auto; padding-inline: var(--pad);\n    }\n    .stat-item { padding: 22px 0; text-align: center; border-right: 1px solid rgba(255,255,255,.2); }\n    .stat-item:last-child { border-right: none; }\n    \/* Stats numbers also use heading font *\/\n    .stat-num { font-size: 1.75rem; font-weight: 800; color: var(--white); line-height: 1; font-family: 'TTDrugs', 'Outfit', sans-serif; }\n    .stat-label { font-size: 0.78rem; color: rgba(255,255,255,.7); font-weight: 500; margin-top: 3px; }\n\n    \/* SECTIONS *\/\n    section { padding: 68px 0; }\n\n    \/* ABOUT *\/\n    #about { background: var(--white); }\n    .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: stretch; }\n    .about-img-wrap { position: relative; display: flex; flex-direction: column; }\n    .about-img {\n      width: 100%; flex: 1; min-height: 400px;\n      object-fit: cover; object-position: top;\n      border-radius: var(--radius); box-shadow: 0 16px 48px rgba(81,112,255,.14);\n    }\n    .about-img-accent {\n      position: absolute; bottom: -16px; right: -16px;\n      width: 120px; height: 120px; background: var(--blue); border-radius: var(--radius); z-index: -1;\n    }\n    .about-img-badge {\n      position: absolute; bottom: 26px; left: -18px;\n      background: var(--white); border-radius: 10px; padding: 12px 18px;\n      box-shadow: 0 10px 36px rgba(0,0,0,.12); z-index: 2;\n    }\n    .badge-text { font-weight: 700; font-size: 0.97rem; color: var(--blue); }\n    .badge-sub { font-size: 0.72rem; color: var(--gray); margin-top: 2px; }\n    .about-text { display: flex; flex-direction: column; justify-content: center; }\n    \/* 3. Increased paragraph text in about *\/\n    .about-text p { color: var(--gray); font-size: 1rem; margin-bottom: 14px; line-height: 1.75; }\n    .about-text p:last-of-type { margin-bottom: 0; }\n\n    \/* SERVICES *\/\n    #services { background: var(--off-white); }\n    .section-header { margin-bottom: 36px; }\n    \/* 3. Increased section intro text *\/\n    .section-intro { color: var(--gray); font-size: 1rem; margin-top: 10px; max-width: 620px; line-height: 1.75; }\n    .services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }\n    .service-card {\n      background: var(--white); border-radius: var(--radius); overflow: hidden;\n      box-shadow: 0 4px 20px rgba(81,112,255,.1), 0 1px 4px rgba(0,0,0,.05);\n      border: 1px solid rgba(81,112,255,.07);\n      transition: transform .3s, box-shadow .3s; display: flex; flex-direction: column;\n    }\n    .service-card:hover { transform: translateY(-5px); box-shadow: 0 18px 48px rgba(81,112,255,.18), 0 2px 8px rgba(0,0,0,.06); }\n    .service-img { width: 100%; height: 140px; object-fit: cover; }\n    .service-body { padding: 18px; flex: 1; }\n    .service-icon {\n      width: 36px; height: 36px; background: rgba(81,112,255,.1); border-radius: 8px;\n      display: flex; align-items: center; justify-content: center; font-size: 1rem; margin-bottom: 10px;\n    }\n    \/* 4. Increased service title font size *\/\n    .service-body h3 { font-size: 1.08rem; margin-bottom: 8px; line-height: 1.3; font-family: 'TTDrugs', 'Outfit', sans-serif; font-weight: normal; }\n    \/* 3. Increased service body text *\/\n    .service-body p { color: var(--gray); font-size: 0.9rem; line-height: 1.65; }\n\n    \/* MISSION \/ VISION *\/\n    #mission { background: var(--black); position: relative; overflow: hidden; }\n    #mission::before {\n      content: ''; position: absolute; top: -150px; right: -150px;\n      width: 500px; height: 500px; background: rgba(81,112,255,.14); border-radius: 50%; filter: blur(90px);\n    }\n    .mission-grid {\n      display: grid; grid-template-columns: 1fr 1fr; gap: 2px;\n      background: rgba(81,112,255,.18); border-radius: var(--radius); overflow: hidden;\n    }\n    .mission-card { background: #0f0f1a; padding: 44px 40px; }\n    .mission-card .tag { background: rgba(81,112,255,.2); color: var(--blue-lt); }\n    .mission-card h2 { color: var(--white); margin-bottom: 14px; font-size: 1.55rem; }\n    \/* 3. Increased mission paragraph text *\/\n    .mission-card p { color: rgba(255,255,255,.65); font-size: 1rem; line-height: 1.8; }\n    .mission-divider { width: 36px; height: 3px; background: var(--blue); border-radius: 2px; margin: 14px 0; }\n\n    \/* CONTACT *\/\n    #contact { background: var(--white); }\n    .contact-centered { max-width: 780px; margin-inline: auto; text-align: center; }\n    .contact-centered h2 { margin-bottom: 12px; }\n    \/* 3. Increased contact intro text *\/\n    .contact-centered > p { color: var(--gray); font-size: 1rem; margin-bottom: 36px; line-height: 1.75; }\n    .contact-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 32px; }\n    .contact-card {\n      background: var(--off-white); border: 1px solid rgba(81,112,255,.1);\n      border-radius: var(--radius); padding: 28px 20px; text-align: center;\n      transition: box-shadow .3s, transform .3s;\n    }\n    .contact-card:hover { box-shadow: 0 10px 32px rgba(81,112,255,.14); transform: translateY(-3px); }\n    .contact-card-icon {\n      width: 46px; height: 46px; background: rgba(81,112,255,.1); border-radius: 12px;\n      display: flex; align-items: center; justify-content: center; font-size: 1.25rem; margin: 0 auto 12px;\n    }\n    .contact-card strong {\n      display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em;\n      text-transform: uppercase; color: var(--gray); margin-bottom: 6px;\n    }\n    .contact-card a, .contact-card span { font-size: 0.92rem; font-weight: 600; color: var(--black); transition: color .2s; }\n    .contact-card a:hover { color: var(--blue); }\n\n    \/* 5. Contact form wrapper *\/\n    .contact-form-wrap {\n      margin: 0 0 36px 0;\n      text-align: left;\n      background: var(--off-white);\n      border: 1px solid rgba(81,112,255,.1);\n      border-radius: var(--radius);\n      padding: 32px 36px;\n    }\n\n    \/* FOOTER *\/\n    footer { background: var(--off-white); border-top: 1px solid var(--gray-lt); padding: 44px 0 28px; }\n    .footer-inner {\n      display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 48px;\n      border-bottom: 1px solid var(--gray-lt); padding-bottom: 32px; margin-bottom: 24px;\n    }\n    .footer-brand img { height: 50px; margin-bottom: 12px; }\n    .footer-brand p { color: var(--gray); font-size: 0.9rem; max-width: 300px; line-height: 1.7; }\n    .footer-links { display: flex; flex-direction: column; gap: 10px; text-align: right; }\n    .footer-links a { color: var(--gray); font-size: 0.9rem; font-weight: 500; transition: color .2s; }\n    .footer-links a:hover { color: var(--blue); }\n    .footer-bottom { display: flex; justify-content: center; align-items: center; }\n    .footer-copy { color: var(--gray); font-size: 0.78rem; line-height: 1.9; text-align: center; }\n    .footer-copy a { color: var(--blue); font-weight: 600; }\n    .footer-copy a:hover { text-decoration: underline; }\n\n    \/* ANIMATIONS *\/\n    @keyframes fadeUp {\n      from { opacity: 0; transform: translateY(28px); }\n      to   { opacity: 1; transform: translateY(0); }\n    }\n    .reveal { opacity: 0; transform: translateY(20px); transition: opacity .65s ease, transform .65s ease; }\n    .reveal.visible { opacity: 1; transform: none; }\n\n    \/* TABLET *\/\n    @media (max-width: 1024px) {\n      .services-grid { grid-template-columns: repeat(2, 1fr); }\n    }\n\n    \/* MOBILE *\/\n    @media (max-width: 768px) {\n      section { padding: 52px 0; }\n      .nav-links { display: none; }\n      .hamburger { display: flex; }\n\n      \/* 1. Mobile nav height *\/\n      .nav-inner { height: 74px; }\n      .nav-logo img { height: 50px; }\n      .mobile-menu { top: 74px; }\n\n      #hero { height: auto; min-height: 100svh; align-items: flex-start; }\n      .hero-content {\n        grid-template-columns: 1fr; height: auto;\n        padding-top: 24px; padding-bottom: 0; text-align: center;\n      }\n      .hero-text { padding: 28px 0 16px; }\n      .hero-sub, .hero-support { max-width: 100%; }\n      .hero-btns { justify-content: center; }\n\n      .hero-photo-wrap {\n        height: auto; justify-content: center; align-items: flex-end;\n        margin-top: 8px;\n      }\n      .hero-photo { height: 360px; max-height: 360px; }\n\n      .stats-inner { grid-template-columns: 1fr; }\n      .stat-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,.2); padding: 18px; }\n      .stat-item:last-child { border-bottom: none; }\n\n      .about-grid { grid-template-columns: 1fr; gap: 32px; }\n      .about-img { min-height: 300px; flex: none; height: 320px; }\n      .about-img-badge { left: 8px; bottom: 18px; }\n      .about-img-accent { right: -10px; bottom: -10px; }\n\n      .services-grid { grid-template-columns: 1fr; gap: 14px; }\n      .service-img { height: 170px; }\n\n      .mission-grid { grid-template-columns: 1fr; }\n      .mission-card { padding: 36px 26px; }\n\n      .contact-cards { grid-template-columns: 1fr; gap: 12px; }\n      .contact-centered { text-align: left; }\n      .contact-form-wrap { padding: 24px 20px; }\n\n      .footer-inner { grid-template-columns: 1fr; gap: 28px; }\n      .footer-brand { display: flex; flex-direction: column; align-items: center; text-align: center; }\n      .footer-brand p { text-align: center; }\n      .footer-links { text-align: center; flex-direction: row; flex-wrap: wrap; gap: 14px; justify-content: center; }\n      .footer-bottom { justify-content: center; }\n      .footer-copy { text-align: center; }\n    }\n\n    @media (max-width: 480px) {\n      h1 { font-size: 2.2rem; }\n      h2 { font-size: 1.55rem; }\n      .hero-btns { flex-direction: column; align-items: center; }\n    }\n    @font-face {\n  font-family: 'TTDrugsDemi';\n  src: url('https:\/\/eclecticmedicalbilling.geeksquared.dev\/wp-content\/uploads\/2026\/03\/TT-Drugs-Trial-DemiBold-BF6688090620df7.ttf') format('truetype');\n  font-weight: normal;\n  font-style: normal;\n  font-display: swap;\n}\n\n.service-body h3 {\n  font-family: 'TTDrugsDemi', 'Outfit', sans-serif !important;\n}\n  <\/style>\n<\/head>\n<body>\n\n  <!-- NAV -->\n  <nav id=\"navbar\">\n    <div class=\"nav-inner\">\n      <a class=\"nav-logo\" href=\"#hero\">\n        <img decoding=\"async\" src=\"https:\/\/eclecticmedicalbilling.geeksquared.dev\/wp-content\/uploads\/2026\/03\/Eclectic-Medical-Billing-amp.png\" alt=\"Eclectic Medical Billing & Coding\" \/>\n      <\/a>\n      <ul class=\"nav-links\">\n        <li><a href=\"#about\">About<\/a><\/li>\n        <li><a href=\"#services\">Services<\/a><\/li>\n        <li><a href=\"#mission\">Mission<\/a><\/li>\n        <li><a href=\"#contact\" class=\"nav-cta\">Get in Touch<\/a><\/li>\n      <\/ul>\n      <button class=\"hamburger\" id=\"ham\" aria-label=\"Open menu\">\n        <span><\/span><span><\/span><span><\/span>\n      <\/button>\n    <\/div>\n    <div class=\"mobile-menu\" id=\"mobileMenu\">\n      <a href=\"#about\" onclick=\"closeMob()\">About<\/a>\n      <a href=\"#services\" onclick=\"closeMob()\">Services<\/a>\n      <a href=\"#mission\" onclick=\"closeMob()\">Mission<\/a>\n      <a href=\"#contact\" class=\"mob-cta\" onclick=\"closeMob()\">Get in Touch<\/a>\n    <\/div>\n  <\/nav>\n\n  <!-- HERO -->\n  <section id=\"hero\">\n    <div class=\"hero-bg\"><\/div>\n    <div class=\"hero-content\">\n      <div class=\"hero-text\">\n        <h1>From <em>Reentry<\/em><br>to Renewal<\/h1>\n        <p class=\"hero-sub\">Eclectic Medical Billing & Coding helps individuals, community programs, and workforce initiatives build practical pathways into medical billing, coding, and administrative healthcare careers.<\/p>\n        <p class=\"hero-support\">Based in Cleveland, Ohio, Andrea Darrington provides education-focused support, workforce development guidance, and training opportunities designed to promote sustainable employment, dignity, and long-term growth.<\/p>\n        <div class=\"hero-btns\">\n          <a href=\"#contact\" class=\"btn-primary\">Get in Touch<\/a>\n          <a href=\"#services\" class=\"btn-outline\">Explore Services<\/a>\n        <\/div>\n      <\/div>\n      <div class=\"hero-photo-wrap\">\n        <img decoding=\"async\" class=\"hero-photo\"\n          src=\"https:\/\/eclecticmedicalbilling.geeksquared.dev\/wp-content\/uploads\/2026\/03\/Andrea-Transparent.png\"\n          alt=\"Andrea Darrington, Founder\" \/>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- STATS RIBBON -->\n  <div class=\"stats-ribbon\">\n    <div class=\"stats-inner\">\n      <div class=\"stat-item reveal\">\n        <div class=\"stat-num\">Cleveland<\/div>\n        <div class=\"stat-label\">Based in Ohio<\/div>\n      <\/div>\n      <div class=\"stat-item reveal\">\n        <div class=\"stat-num\">4+<\/div>\n        <div class=\"stat-label\">Career-Focused Services<\/div>\n      <\/div>\n      <div class=\"stat-item reveal\">\n        <div class=\"stat-num\">100%<\/div>\n        <div class=\"stat-label\">Community-Driven Mission<\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- ABOUT -->\n  <section id=\"about\">\n    <div class=\"wrap\">\n      <div class=\"about-grid\">\n        <div class=\"about-img-wrap reveal\">\n          <img decoding=\"async\" class=\"about-img\"\n            src=\"https:\/\/eclecticmedicalbilling.geeksquared.dev\/wp-content\/uploads\/2026\/03\/524F447F-AFF2-4675-AF04-C20CD9CEE276_1_201_a.jpeg\"\n            alt=\"Andrea Darrington\" \/>\n          <div class=\"about-img-accent\"><\/div>\n          <div class=\"about-img-badge\">\n            <div class=\"badge-text\">Andrea Darrington<\/div>\n            <div class=\"badge-sub\">Founder &amp; Lead Consultant<\/div>\n          <\/div>\n        <\/div>\n        <div class=\"about-text reveal\">\n          <span class=\"tag\">About Andrea<\/span>\n          <h2>Purpose-Driven Leadership in Healthcare Careers<\/h2>\n          <div style=\"width:34px;height:3px;background:var(--blue);border-radius:2px;margin:14px 0 20px;\"><\/div>\n          <p>Andrea Darrington is the founder of Eclectic Medical Billing &amp; Coding, a Cleveland-based business focused on workforce development, healthcare career exposure, and professional training support. Her mission is rooted in helping people move forward with practical skills, renewed confidence, and real opportunities for growth.<\/p>\n          <p>Andrea's vision centers on serving individuals who are preparing for a fresh start \u2014 including those connected to reentry programs, community organizations, and workforce development initiatives. Through a supportive and purpose-driven approach, she aims to help clients and partners create meaningful pathways toward employment in healthcare administration and related support roles.<\/p>\n          <p>By combining education, encouragement, and career-minded services, Eclectic Medical Billing &amp; Coding works to bridge the gap between potential and opportunity.<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- SERVICES -->\n  <section id=\"services\">\n    <div class=\"wrap\">\n      <div class=\"section-header reveal\">\n        <span class=\"tag\">Our Services<\/span>\n        <h2>How We Can Help You<\/h2>\n        <p class=\"section-intro\">Whether you are looking for training support, administrative skill-building, or a partner for reentry-focused education, we are here to help.<\/p>\n      <\/div>\n      <div class=\"services-grid\">\n        <div class=\"service-card reveal\">\n          <img decoding=\"async\" class=\"service-img\" src=\"https:\/\/images.unsplash.com\/photo-1576091160399-112ba8d25d1d?w=800&auto=format&fit=crop\" alt=\"Medical Billing Training\" \/>\n          <div class=\"service-body\">\n            <div class=\"service-icon\">\ud83c\udfe5<\/div>\n            <h3>Medical Billing &amp; Coding Training Support<\/h3>\n            <p>Introductory guidance and education-focused support for individuals interested in building knowledge in medical billing and coding.<\/p>\n          <\/div>\n        <\/div>\n        <div class=\"service-card reveal\">\n          <img decoding=\"async\" class=\"service-img\" src=\"https:\/\/images.unsplash.com\/photo-1454165804606-c3d57bc86b40?w=800&auto=format&fit=crop\" alt=\"Medical Administrative Training\" \/>\n          <div class=\"service-body\">\n            <div class=\"service-icon\">\ud83d\udccb<\/div>\n            <h3>Medical Administrative Assistant Training<\/h3>\n            <p>Support for learners pursuing foundational office and administrative skills used in medical environments.<\/p>\n          <\/div>\n        <\/div>\n        <div class=\"service-card reveal\">\n          <img decoding=\"async\" class=\"service-img\" src=\"https:\/\/images.unsplash.com\/photo-1521791136064-7986c2920216?w=800&auto=format&fit=crop\" alt=\"Job Readiness\" \/>\n          <div class=\"service-body\">\n            <div class=\"service-icon\">\ud83d\udcbc<\/div>\n            <h3>Job Readiness &amp; Workforce Development<\/h3>\n            <p>Practical training designed to strengthen workplace confidence, job preparedness, and long-term employability.<\/p>\n          <\/div>\n        <\/div>\n        <div class=\"service-card reveal\">\n          <img decoding=\"async\" class=\"service-img\" src=\"https:\/\/eclecticmedicalbilling.geeksquared.dev\/wp-content\/uploads\/2026\/03\/Untitled-design.png\" alt=\"Community Reentry Support\" \/>\n          <div class=\"service-body\">\n            <div class=\"service-icon\">\ud83e\udd1d<\/div>\n            <h3>Community Reentry Support<\/h3>\n            <p>Education-centered services for community partners and reentry organizations seeking to provide sustainable skill-building.<\/p>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- MISSION \/ VISION -->\n  <section id=\"mission\">\n    <div class=\"wrap\">\n      <div class=\"mission-grid\">\n        <div class=\"mission-card reveal\">\n          <span class=\"tag\">Our Mission<\/span>\n          <h2>Restoring Dignity &amp; Independence<\/h2>\n          <div class=\"mission-divider\"><\/div>\n          <p>Ecclesia Workforce Restoration Institute equips individuals returning to the community with faith-based workforce training, life skills education, and career pathways that restore dignity, financial independence, and community impact.<\/p>\n        <\/div>\n        <div class=\"mission-card reveal\">\n          <span class=\"tag\">Our Vision<\/span>\n          <h2>Transforming Reentry into Renewal<\/h2>\n          <div class=\"mission-divider\"><\/div>\n          <p>To transform reentry into renewal through a faith-based workforce development approach \u2014 addressing gaps in recidivism through wraparound services and sustainable career opportunities that empower individuals to become productive citizens and leaders in their homes and communities.<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- CONTACT -->\n  <section id=\"contact\">\n    <div class=\"wrap\">\n      <div class=\"contact-centered reveal\">\n        <span class=\"tag\">Contact Us<\/span>\n        <h2>Let's Connect<\/h2>\n        <p>Whether you are an individual seeking a new direction or an organization interested in workforce development support, we would love to connect. Reach out today to learn more about services, training opportunities, and partnership options.<\/p>\n\n        <!-- 5. Fluent Form shortcode \u2014 renders natively in WordPress\/Elementor -->\n        <div class=\"contact-form-wrap\">\n          <div class='fluentform ff-default fluentform_wrapper_1 ffs_default_wrap'><form data-form_id=\"1\" id=\"fluentform_1\" class=\"frm-fluent-form fluent_form_1 ff-el-form-top ff_form_instance_1_1 ff-form-loading ffs_default\" data-form_instance=\"ff_form_instance_1_1\" method=\"POST\" ><fieldset  style=\"border: none!important;margin: 0!important;padding: 0!important;background-color: transparent!important;box-shadow: none!important;outline: none!important; min-inline-size: 100%;\">\n                    <legend class=\"ff_screen_reader_title\" style=\"display: block; margin: 0!important;padding: 0!important;height: 0!important;text-indent: -999999px;width: 0!important;overflow:hidden;\">Contact Form Demo<\/legend><input type='hidden' name='__fluent_form_embded_post_id' value='23' \/><input type=\"hidden\" id=\"_fluentform_1_fluentformnonce\" name=\"_fluentform_1_fluentformnonce\" value=\"1dc5afb16c\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/index.php?rest_route=%2Fwp%2Fv2%2Fpages%2F23\" \/><div data-type=\"name-element\" data-name=\"names\" class=\" ff-field_container ff-name-field-wrapper\" ><div class='ff-t-container'><div class='ff-t-cell '><div class='ff-el-group'><div class=\"ff-el-input--label ff-el-is-required asterisk-right\"><label for='ff_1_names_first_name_' id='label_ff_1_names_first_name_' >Name<\/label><\/div><div class='ff-el-input--content'><input type=\"text\" name=\"names[first_name]\" id=\"ff_1_names_first_name_\" class=\"ff-el-form-control\" placeholder=\"Name\" aria-invalid=\"false\" aria-required=true><\/div><\/div><\/div><\/div><\/div><div data-name=\"ff_cn_id_1\"  class='ff-t-container ff-column-container ff_columns_total_2 '><div class='ff-t-cell ff-t-column-1' style='flex-basis: 50%;'><div class='ff-el-group'><div class=\"ff-el-input--label ff-el-is-required asterisk-right\"><label for='ff_1_email' id='label_ff_1_email' aria-label=\"Email\">Email<\/label><\/div><div class='ff-el-input--content'><input type=\"email\" name=\"email\" id=\"ff_1_email\" class=\"ff-el-form-control\" placeholder=\"Email Address\" data-name=\"email\"  aria-invalid=\"false\" aria-required=true><\/div><\/div><\/div><div class='ff-t-cell ff-t-column-2' style='flex-basis: 50%;'><div class='ff-el-group'><div class=\"ff-el-input--label ff-el-is-required asterisk-right\"><label for='ff_1_numeric_field' id='label_ff_1_numeric_field' aria-label=\"Phone\">Phone<\/label><\/div><div class='ff-el-input--content'><input type=\"number\" name=\"numeric_field\" id=\"ff_1_numeric_field\" class=\"ff-el-form-control\" data-name=\"numeric_field\" inputmode=\"numeric\" step=\"any\"  aria-invalid=\"false\" aria-required=true><\/div><\/div><\/div><\/div><div class='ff-el-group'><div class=\"ff-el-input--label ff-el-is-required asterisk-right\"><label for='ff_1_message' id='label_ff_1_message' aria-label=\"Location\">Location<\/label><\/div><div class='ff-el-input--content'><textarea aria-required=\"true\" aria-labelledby=\"label_ff_1_message\" name=\"message\" id=\"ff_1_message\" class=\"ff-el-form-control\" placeholder=\"Your Message\" rows=\"4\" cols=\"2\" data-name=\"message\" ><\/textarea><\/div><\/div><div class='ff-el-group ff-text-left ff_submit_btn_wrapper'><button type=\"submit\" class=\"ff-btn ff-btn-submit ff-btn-md ff_btn_style\"  aria-label=\"Submit Form\">Submit Form<\/button><\/div><\/fieldset><\/form><div id='fluentform_1_errors' class='ff-errors-in-stack ff_form_instance_1_1 ff-form-loading_errors ff_form_instance_1_1_errors'><\/div><\/div>            <script type=\"text\/javascript\">\n                window.fluent_form_ff_form_instance_1_1 = {\"id\":\"1\",\"settings\":{\"layout\":{\"labelPlacement\":\"top\",\"helpMessagePlacement\":\"with_label\",\"errorMessagePlacement\":\"inline\",\"cssClassName\":\"\",\"asteriskPlacement\":\"asterisk-right\"},\"restrictions\":{\"denyEmptySubmission\":{\"enabled\":false}}},\"form_instance\":\"ff_form_instance_1_1\",\"form_id_selector\":\"fluentform_1\",\"rules\":{\"names[first_name]\":{\"required\":{\"value\":true,\"message\":\"This field is required\",\"global\":false,\"global_message\":\"This field is required\"}},\"names[middle_name]\":{\"required\":{\"value\":false,\"message\":\"This field is required\",\"global\":false,\"global_message\":\"This field is required\"}},\"names[last_name]\":{\"required\":{\"value\":false,\"message\":\"This field is required\",\"global\":false,\"global_message\":\"This field is required\"}},\"email\":{\"required\":{\"value\":true,\"message\":\"This field is required\",\"global\":false,\"global_message\":\"This field is required\"},\"email\":{\"value\":true,\"message\":\"This field must contain a valid email\",\"global\":false,\"global_message\":\"This field must contain a valid email\"}},\"numeric_field\":{\"required\":{\"value\":true,\"message\":\"This field is required\",\"global_message\":\"This field is required\",\"global\":true},\"numeric\":{\"value\":true,\"message\":\"This field must contain numeric value\",\"global_message\":\"This field must contain numeric value\",\"global\":true},\"min\":{\"value\":\"\",\"message\":\"Validation fails for minimum value\",\"global_message\":\"Validation fails for minimum value\",\"global\":true},\"max\":{\"value\":\"\",\"message\":\"Validation fails for maximum value\",\"global_message\":\"Validation fails for maximum value\",\"global\":true},\"digits\":{\"value\":\"\",\"message\":\"Validation fails for limited digits\",\"global_message\":\"Validation fails for limited digits\",\"global\":true}},\"message\":{\"required\":{\"value\":true,\"message\":\"This field is required\",\"global\":false,\"global_message\":\"This field is required\"}}},\"debounce_time\":300};\n                            <\/script>\n            \n        <\/div>\n\n        <div class=\"contact-cards\">\n          <div class=\"contact-card reveal\">\n            <div class=\"contact-card-icon\">\ud83d\udce7<\/div>\n            <strong>Email<\/strong>\n            <a href=\"mailto:angie@eclecticmedicalbilling.com\">angie@eclecticmedicalbilling.com<\/a>\n          <\/div>\n          <div class=\"contact-card reveal\">\n            <div class=\"contact-card-icon\">\ud83d\udcde<\/div>\n            <strong>Phone<\/strong>\n            <a href=\"tel:2162058983\">216.205.8983<\/a>\n          <\/div>\n          <div class=\"contact-card reveal\">\n            <div class=\"contact-card-icon\">\ud83d\udccd<\/div>\n            <strong>Location<\/strong>\n            <span>Cleveland, Ohio<\/span>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- FOOTER -->\n  <footer>\n    <div class=\"wrap\">\n      <div class=\"footer-inner\">\n        <div class=\"footer-brand\">\n          <img decoding=\"async\" src=\"https:\/\/eclecticmedicalbilling.geeksquared.dev\/wp-content\/uploads\/2026\/03\/Eclectic-Medical-Billing-amp.png\" alt=\"Eclectic Medical Billing & Coding\" \/>\n          <p>From Reentry to Renewal \u2014 building practical pathways into healthcare careers across Cleveland, Ohio.<\/p>\n        <\/div>\n        <div class=\"footer-links\">\n          <a href=\"#about\">About Andrea<\/a>\n          <a href=\"#services\">Services<\/a>\n          <a href=\"#mission\">Mission &amp; Vision<\/a>\n          <a href=\"#contact\">Contact<\/a>\n        <\/div>\n      <\/div>\n      <div class=\"footer-bottom\">\n        <span class=\"footer-copy\">\n          &copy; 2026 Eclectic Medical Billing &amp; Coding LLC &middot; Cleveland, Ohio<br>\n          Powered by <a href=\"https:\/\/www.geeksquared2.com\/\" target=\"_blank\" rel=\"noopener\">Geek Squared<\/a>\n        <\/span>\n      <\/div>\n    <\/div>\n  <\/footer>\n\n  <script>\n    const navbar = document.getElementById('navbar');\n    window.addEventListener('scroll', () => {\n      navbar.classList.toggle('scrolled', window.scrollY > 20);\n    });\n\n    const ham = document.getElementById('ham');\n    const mob = document.getElementById('mobileMenu');\n    ham.addEventListener('click', () => {\n      ham.classList.toggle('open');\n      mob.classList.toggle('open');\n    });\n    function closeMob() {\n      ham.classList.remove('open');\n      mob.classList.remove('open');\n    }\n\n    const reveals = document.querySelectorAll('.reveal');\n    const io = new IntersectionObserver((entries) => {\n      entries.forEach(e => {\n        if (e.isIntersecting) {\n          const siblings = [...e.target.parentElement.querySelectorAll('.reveal:not(.visible)')];\n          const idx = siblings.indexOf(e.target);\n          setTimeout(() => e.target.classList.add('visible'), idx * 90);\n          io.unobserve(e.target);\n        }\n      });\n    }, { threshold: 0.1 });\n    reveals.forEach(el => io.observe(el));\n  <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d2c99fe e-flex e-con-boxed e-con e-parent\" data-id=\"d2c99fe\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b127220 elementor-widget elementor-widget-html\" data-id=\"b127220\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\/* \u2500\u2500 Andrea photo: always flush to bottom of hero \u2500\u2500 *\/\n\n.hero-photo-wrap {\n  position: absolute !important;\n  right: var(--pad) !important;\n  top: 86px !important; \/* nav height *\/\n  width: 50% !important;\n  display: flex !important;\n  align-items: flex-end !important;\n  justify-content: center !important;\n  pointer-events: none !important;\n}\n\n.hero-photo {\n  display: block !important;\n  height: 100% !important;\n  max-height: 100% !important;\n  width: auto !important;\n  max-width: 100% !important;\n  object-fit: contain !important;\n  object-position: bottom center !important;\n  margin: 0 !important;\n  padding: 0 !important;\n  vertical-align: bottom !important;\n}\n\n\/* Keep text column from overlapping the absolute image *\/\n.hero-content {\n  position: relative !important;\n  grid-template-columns: 1fr 1fr !important;\n  align-items: center !important;\n  height: 100% !important;\n}\n\n.hero-text {\n  pointer-events: all !important;\n}\n\n\/* Tablet *\/\n@media (max-width: 1024px) {\n  .hero-photo-wrap {\n    width: 48% !important;\n    right: 20px !important;\n  }\n}\n\n\/* Mobile \u2014 stack layout, photo flush to bottom *\/\n@media (max-width: 768px) {\n  .hero-photo-wrap {\n    position: relative !important;\n    top: auto !important;\n    right: auto !important;\n    width: 100% !important;\n    height: 340px !important;\n    margin-top: 16px !important;\n  }\n\n  .hero-photo {\n    height: 340px !important;\n    max-height: 340px !important;\n    margin: 0 auto !important;\n  }\n}\n\n@media (max-width: 480px) {\n  .hero-photo-wrap {\n    height: 280px !important;\n  }\n  .hero-photo {\n    height: 280px !important;\n    max-height: 280px !important;\n  }\n}\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-55ee4ad elementor-widget elementor-widget-html\" data-id=\"55ee4ad\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n@media (max-width: 768px) {\n  #hero {\n    height: auto !important;\n    min-height: 100svh !important;\n    display: flex !important;\n    flex-direction: column !important;\n    padding-bottom: 0 !important;\n  }\n\n  .hero-content {\n    grid-template-columns: 1fr !important;\n    grid-template-rows: auto auto !important;\n    align-items: start !important;\n    flex: 1 !important;\n    display: flex !important;\n    flex-direction: column !important;\n    padding-bottom: 0 !important;\n  }\n\n  .hero-text {\n    order: 1 !important;\n    padding: 28px 0 16px !important;\n    text-align: center !important;\n  }\n\n  .hero-btns {\n    justify-content: center !important;\n  }\n\n  .hero-photo-wrap {\n    order: 2 !important;\n    width: 100% !important;\n    justify-content: center !important;\n    align-items: flex-end !important;\n    margin-top: auto !important;\n    flex: 1 !important;\n    min-height: 0 !important;\n  }\n\n  .hero-photo {\n    height: 260px !important;\n    max-height: 260px !important;\n    width: auto !important;\n    margin-bottom: 0 !important;\n  }\n}\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Eclectic Medical Billing &#038; Coding LLC About Services Mission Get in Touch About Services Mission Get in Touch From Reentryto Renewal Eclectic Medical Billing &#038; Coding helps individuals, community programs, and workforce initiatives build practical pathways into medical billing, coding, and administrative healthcare careers. Based in Cleveland, Ohio, Andrea Darrington provides education-focused support, workforce development [&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-23","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/eclecticmedicalbilling.geeksquared.dev\/index.php?rest_route=\/wp\/v2\/pages\/23","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eclecticmedicalbilling.geeksquared.dev\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/eclecticmedicalbilling.geeksquared.dev\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/eclecticmedicalbilling.geeksquared.dev\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eclecticmedicalbilling.geeksquared.dev\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=23"}],"version-history":[{"count":118,"href":"https:\/\/eclecticmedicalbilling.geeksquared.dev\/index.php?rest_route=\/wp\/v2\/pages\/23\/revisions"}],"predecessor-version":[{"id":159,"href":"https:\/\/eclecticmedicalbilling.geeksquared.dev\/index.php?rest_route=\/wp\/v2\/pages\/23\/revisions\/159"}],"wp:attachment":[{"href":"https:\/\/eclecticmedicalbilling.geeksquared.dev\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=23"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}