{"id":98,"date":"2026-09-30T04:14:00","date_gmt":"2026-09-30T04:14:00","guid":{"rendered":"https:\/\/gameartoutsource.co.uk\/?page_id=98"},"modified":"2026-09-30T04:15:27","modified_gmt":"2026-09-30T04:15:27","slug":"2d-3d-game-art-animation-vfx-ui-ux-game-development","status":"publish","type":"page","link":"https:\/\/gameartoutsource.co.uk\/sv\/2d-3d-game-art-animation-vfx-ui-ux-game-development\/","title":{"rendered":"2D &amp; 3D Game Art, Animation, VFX, UI\/UX &amp; Game Development"},"content":{"rendered":"\n<!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>Game Art Outsourcing Services | 2D &#038; 3D Game Art, Animation, VFX, UI\/UX &#038; Game Development<\/title>\n  <meta name=\"description\" content=\"Professional game art outsourcing for studios worldwide. 2D character art, 3D modeling, environments, concept art, animation, rigging, VFX, UI\/UX, game assets, technical art and full-cycle game development for PC, console, mobile, VR and more.\">\n  <meta name=\"keywords\" content=\"game art outsourcing, game art outsourcing studio, game development outsourcing, 2D game art outsourcing, 3D game art outsourcing, 3D character modeling, 3D environment modeling, game character design, game animation outsourcing, game VFX outsourcing, game UI UX design, concept art outsourcing, Unity game art, Unreal Engine game art, mobile game art, indie game outsourcing, AAA game art outsourcing, game asset production, game development company, technical art outsourcing\">\n  \n  <style>\n    :root {\n      --bg-dark: #080b12;\n      --bg-card: #0f1626;\n      --bg-card-hover: #162238;\n      --bg-accent: #131c31;\n      --primary: #00f2fe;\n      --primary-hover: #4facfe;\n      --purple: #8a2be2;\n      --accent-glow: rgba(0, 242, 254, 0.25);\n      --purple-glow: rgba(138, 43, 226, 0.25);\n      --text-main: #f1f5f9;\n      --text-muted: #94a3b8;\n      --border-color: #1e293b;\n      --border-focus: #00f2fe;\n      --success: #10b981;\n      --font-stack: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n    }\n\n    * {\n      box-sizing: border-box;\n      margin: 0;\n      padding: 0;\n    }\n\n    html {\n      scroll-behavior: smooth;\n    }\n\n    body {\n      font-family: var(--font-stack);\n      background-color: var(--bg-dark);\n      color: var(--text-main);\n      line-height: 1.6;\n      overflow-x: hidden;\n    }\n\n    a {\n      color: var(--primary);\n      text-decoration: none;\n      transition: color 0.2s ease;\n    }\n\n    a:hover {\n      color: var(--primary-hover);\n    }\n\n    \/* Container *\/\n    .container {\n      max-width: 1280px;\n      margin: 0 auto;\n      padding: 0 24px;\n    }\n\n    \/* Header & Navigation *\/\n    header.site-header {\n      position: sticky;\n      top: 0;\n      z-index: 1000;\n      background: rgba(8, 11, 18, 0.92);\n      backdrop-filter: blur(12px);\n      border-bottom: 1px solid var(--border-color);\n    }\n\n    .nav-wrapper {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      height: 72px;\n    }\n\n    .brand-logo {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      font-size: 1.25rem;\n      font-weight: 800;\n      letter-spacing: -0.5px;\n      color: #fff;\n    }\n\n    .brand-logo span.badge {\n      background: linear-gradient(135deg, var(--primary), var(--purple));\n      -webkit-background-clip: text;\n      -webkit-text-fill-color: transparent;\n    }\n\n    nav.main-nav {\n      display: flex;\n      align-items: center;\n      gap: 24px;\n    }\n\n    .nav-item {\n      position: relative;\n      font-size: 0.9rem;\n      font-weight: 500;\n      color: var(--text-muted);\n      cursor: pointer;\n      padding: 10px 0;\n      transition: color 0.2s;\n    }\n\n    .nav-item:hover {\n      color: #fff;\n    }\n\n    \/* Dropdown Menus *\/\n    .dropdown {\n      position: relative;\n    }\n\n    .dropdown-content {\n      display: none;\n      position: absolute;\n      top: 100%;\n      left: 0;\n      min-width: 230px;\n      background: var(--bg-card);\n      border: 1px solid var(--border-color);\n      border-radius: 8px;\n      padding: 12px;\n      box-shadow: 0 10px 30px rgba(0,0,0,0.5);\n    }\n\n    .dropdown:hover .dropdown-content {\n      display: block;\n    }\n\n    .dropdown-content a {\n      display: block;\n      padding: 8px 12px;\n      color: var(--text-muted);\n      border-radius: 4px;\n      font-size: 0.85rem;\n    }\n\n    .dropdown-content a:hover {\n      color: #fff;\n      background: var(--bg-accent);\n    }\n\n    .header-cta-btn {\n      background: linear-gradient(135deg, var(--primary), #0072ff);\n      color: #080b12;\n      font-weight: 700;\n      padding: 10px 20px;\n      border-radius: 6px;\n      font-size: 0.85rem;\n      box-shadow: 0 4px 15px var(--accent-glow);\n      transition: transform 0.2s, box-shadow 0.2s;\n    }\n\n    .header-cta-btn:hover {\n      transform: translateY(-2px);\n      box-shadow: 0 6px 20px rgba(0, 242, 254, 0.4);\n      color: #080b12;\n    }\n\n    \/* Hero Section *\/\n    section.hero-section {\n      padding: 60px 0 90px;\n      background: radial-gradient(circle at 80% 20%, rgba(138, 43, 226, 0.15) 0%, transparent 60%),\n                  radial-gradient(circle at 10% 50%, rgba(0, 242, 254, 0.12) 0%, transparent 60%);\n    }\n\n    .hero-grid {\n      display: grid;\n      grid-template-columns: 1fr 1.1fr;\n      gap: 48px;\n      align-items: start;\n    }\n\n    .hero-content h1 {\n      font-size: 2.85rem;\n      line-height: 1.15;\n      font-weight: 900;\n      margin-bottom: 20px;\n      letter-spacing: -1px;\n    }\n\n    .hero-content h1 .gradient-text {\n      background: linear-gradient(135deg, #fff 30%, var(--primary) 100%);\n      -webkit-background-clip: text;\n      -webkit-text-fill-color: transparent;\n    }\n\n    .hero-subheadline {\n      font-size: 1.15rem;\n      font-weight: 600;\n      color: var(--primary);\n      margin-bottom: 16px;\n    }\n\n    .hero-desc {\n      color: var(--text-muted);\n      font-size: 1rem;\n      margin-bottom: 28px;\n      line-height: 1.7;\n    }\n\n    .hero-tags {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 8px;\n      margin-bottom: 30px;\n    }\n\n    .hero-tag {\n      background: var(--bg-card);\n      border: 1px solid var(--border-color);\n      padding: 4px 12px;\n      border-radius: 20px;\n      font-size: 0.78rem;\n      color: var(--text-muted);\n    }\n\n    .hero-actions {\n      display: flex;\n      gap: 16px;\n      align-items: center;\n      margin-bottom: 30px;\n    }\n\n    .btn-primary {\n      background: linear-gradient(135deg, var(--primary), #0072ff);\n      color: #080b12;\n      font-weight: 700;\n      padding: 14px 26px;\n      border-radius: 6px;\n      font-size: 0.95rem;\n      border: none;\n      cursor: pointer;\n      display: inline-flex;\n      align-items: center;\n      gap: 8px;\n      transition: all 0.2s;\n    }\n\n    .btn-primary:hover {\n      transform: translateY(-2px);\n      box-shadow: 0 8px 25px rgba(0, 242, 254, 0.4);\n      color: #080b12;\n    }\n\n    .btn-secondary {\n      background: var(--bg-card);\n      color: #fff;\n      font-weight: 600;\n      padding: 14px 24px;\n      border-radius: 6px;\n      font-size: 0.95rem;\n      border: 1px solid var(--border-color);\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n\n    .btn-secondary:hover {\n      border-color: var(--primary);\n      background: var(--bg-card-hover);\n    }\n\n    \/* Calculator Box (Visually Prominent) *\/\n    .calculator-card {\n      background: var(--bg-card);\n      border: 1px solid rgba(0, 242, 254, 0.3);\n      border-radius: 12px;\n      padding: 30px;\n      box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6), 0 0 35px var(--accent-glow);\n      position: relative;\n    }\n\n    .calculator-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 20px;\n      padding-bottom: 14px;\n      border-bottom: 1px solid var(--border-color);\n    }\n\n    .calculator-header h2 {\n      font-size: 1.35rem;\n      font-weight: 700;\n      color: #fff;\n    }\n\n    .currency-switch {\n      display: flex;\n      background: var(--bg-dark);\n      border: 1px solid var(--border-color);\n      border-radius: 6px;\n      overflow: hidden;\n    }\n\n    .currency-btn {\n      background: transparent;\n      border: none;\n      padding: 6px 14px;\n      font-size: 0.8rem;\n      font-weight: 700;\n      color: var(--text-muted);\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n\n    .currency-btn.active {\n      background: var(--primary);\n      color: #080b12;\n    }\n\n    .calc-form-group {\n      margin-bottom: 16px;\n    }\n\n    .calc-label {\n      display: block;\n      font-size: 0.85rem;\n      font-weight: 600;\n      color: var(--text-muted);\n      margin-bottom: 6px;\n    }\n\n    .calc-select, .calc-input {\n      width: 100%;\n      background: var(--bg-dark);\n      border: 1px solid var(--border-color);\n      color: #fff;\n      padding: 10px 14px;\n      border-radius: 6px;\n      font-size: 0.9rem;\n      outline: none;\n      transition: border 0.2s;\n    }\n\n    .calc-select:focus, .calc-input:focus {\n      border-color: var(--border-focus);\n    }\n\n    .calc-grid-2 {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 14px;\n    }\n\n    .calc-pills {\n      display: flex;\n      gap: 6px;\n      flex-wrap: wrap;\n    }\n\n    .calc-pill {\n      background: var(--bg-dark);\n      border: 1px solid var(--border-color);\n      padding: 6px 12px;\n      border-radius: 6px;\n      font-size: 0.78rem;\n      color: var(--text-muted);\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n\n    .calc-pill.active {\n      border-color: var(--primary);\n      background: rgba(0, 242, 254, 0.1);\n      color: var(--primary);\n      font-weight: 600;\n    }\n\n    .calc-result-box {\n      margin-top: 24px;\n      padding: 20px;\n      background: linear-gradient(135deg, rgba(0, 242, 254, 0.08), rgba(138, 43, 226, 0.08));\n      border: 1px solid rgba(0, 242, 254, 0.3);\n      border-radius: 8px;\n      text-align: center;\n    }\n\n    .calc-result-label {\n      font-size: 0.85rem;\n      text-transform: uppercase;\n      letter-spacing: 1px;\n      color: var(--text-muted);\n      margin-bottom: 6px;\n    }\n\n    .calc-result-value {\n      font-size: 2rem;\n      font-weight: 800;\n      color: var(--primary);\n      text-shadow: 0 0 20px var(--accent-glow);\n    }\n\n    .calc-disclaimer {\n      font-size: 0.75rem;\n      color: var(--text-muted);\n      margin-top: 8px;\n    }\n\n    .calc-cta-btn {\n      width: 100%;\n      margin-top: 18px;\n      padding: 14px;\n      background: linear-gradient(135deg, var(--primary), var(--purple));\n      border: none;\n      border-radius: 6px;\n      color: #fff;\n      font-weight: 700;\n      font-size: 1rem;\n      cursor: pointer;\n      box-shadow: 0 6px 20px rgba(138, 43, 226, 0.35);\n      transition: transform 0.2s, box-shadow 0.2s;\n      display: inline-block;\n      text-align: center;\n    }\n\n    .calc-cta-btn:hover {\n      transform: translateY(-2px);\n      box-shadow: 0 8px 25px rgba(138, 43, 226, 0.5);\n      color: #fff;\n    }\n\n    \/* Section Styling *\/\n    section {\n      padding: 80px 0;\n      border-bottom: 1px solid var(--border-color);\n    }\n\n    .section-badge {\n      display: inline-block;\n      text-transform: uppercase;\n      font-size: 0.75rem;\n      font-weight: 700;\n      letter-spacing: 1.5px;\n      color: var(--primary);\n      margin-bottom: 10px;\n    }\n\n    .section-title {\n      font-size: 2.2rem;\n      font-weight: 800;\n      margin-bottom: 16px;\n      letter-spacing: -0.5px;\n    }\n\n    .section-sub {\n      color: var(--text-muted);\n      max-width: 780px;\n      font-size: 1.05rem;\n      margin-bottom: 40px;\n    }\n\n    \/* Grid Layouts *\/\n    .grid-4 {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));\n      gap: 24px;\n    }\n\n    .grid-3 {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));\n      gap: 28px;\n    }\n\n    .grid-2 {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 36px;\n      align-items: center;\n    }\n\n    \/* Cards *\/\n    .card {\n      background: var(--bg-card);\n      border: 1px solid var(--border-color);\n      border-radius: 10px;\n      padding: 24px;\n      transition: all 0.2s ease;\n      position: relative;\n    }\n\n    .card:hover {\n      border-color: rgba(0, 242, 254, 0.5);\n      transform: translateY(-3px);\n      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);\n    }\n\n    .card h3 {\n      font-size: 1.2rem;\n      font-weight: 700;\n      margin-bottom: 10px;\n      color: #fff;\n    }\n\n    .card p {\n      color: var(--text-muted);\n      font-size: 0.9rem;\n      line-height: 1.6;\n    }\n\n    .card-list {\n      list-style: none;\n      margin-top: 14px;\n    }\n\n    .card-list li {\n      position: relative;\n      padding-left: 20px;\n      font-size: 0.85rem;\n      color: var(--text-muted);\n      margin-bottom: 6px;\n    }\n\n    .card-list li::before {\n      content: \"\u25b9\";\n      position: absolute;\n      left: 0;\n      color: var(--primary);\n    }\n\n    \/* Pipeline Step Graphic *\/\n    .pipeline-container {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 12px;\n      margin: 30px 0;\n    }\n\n    .pipeline-step {\n      flex: 1;\n      min-width: 140px;\n      background: var(--bg-card);\n      border: 1px solid var(--border-color);\n      padding: 16px;\n      border-radius: 8px;\n      text-align: center;\n      position: relative;\n    }\n\n    .pipeline-num {\n      font-size: 0.75rem;\n      font-weight: 800;\n      color: var(--primary);\n      margin-bottom: 4px;\n    }\n\n    .pipeline-name {\n      font-size: 0.9rem;\n      font-weight: 700;\n      color: #fff;\n    }\n\n    \/* Comparison Table *\/\n    .table-container {\n      overflow-x: auto;\n      background: var(--bg-card);\n      border: 1px solid var(--border-color);\n      border-radius: 10px;\n      margin-top: 24px;\n    }\n\n    table.service-table {\n      width: 100%;\n      border-collapse: collapse;\n      text-align: left;\n    }\n\n    table.service-table th, table.service-table td {\n      padding: 16px 20px;\n      border-bottom: 1px solid var(--border-color);\n      font-size: 0.9rem;\n    }\n\n    table.service-table th {\n      background: var(--bg-dark);\n      color: var(--text-muted);\n      text-transform: uppercase;\n      font-size: 0.75rem;\n      letter-spacing: 1px;\n    }\n\n    table.service-table tr:hover td {\n      background: var(--bg-card-hover);\n    }\n\n    .check-mark {\n      color: var(--success);\n      font-weight: 800;\n    }\n\n    \/* Portfolio Section *\/\n    .portfolio-filters {\n      display: flex;\n      gap: 10px;\n      flex-wrap: wrap;\n      margin-bottom: 30px;\n    }\n\n    .filter-btn {\n      background: var(--bg-card);\n      border: 1px solid var(--border-color);\n      color: var(--text-muted);\n      padding: 8px 18px;\n      border-radius: 20px;\n      font-size: 0.85rem;\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n\n    .filter-btn.active, .filter-btn:hover {\n      border-color: var(--primary);\n      color: #fff;\n      background: rgba(0, 242, 254, 0.1);\n    }\n\n    .portfolio-card {\n      background: var(--bg-card);\n      border: 1px solid var(--border-color);\n      border-radius: 10px;\n      overflow: hidden;\n      transition: all 0.2s;\n    }\n\n    .portfolio-card:hover {\n      border-color: var(--primary);\n      transform: translateY(-4px);\n    }\n\n    .portfolio-thumb {\n      height: 190px;\n      background: linear-gradient(135deg, #1e293b, #0f172a);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-weight: 700;\n      color: var(--text-muted);\n      position: relative;\n    }\n\n    .portfolio-badge {\n      position: absolute;\n      top: 12px;\n      right: 12px;\n      background: rgba(0,0,0,0.7);\n      padding: 4px 10px;\n      border-radius: 4px;\n      font-size: 0.7rem;\n      color: var(--primary);\n      border: 1px solid var(--border-color);\n    }\n\n    .portfolio-details {\n      padding: 20px;\n    }\n\n    .portfolio-details h4 {\n      font-size: 1.1rem;\n      color: #fff;\n      margin-bottom: 6px;\n    }\n\n    .portfolio-details p {\n      font-size: 0.85rem;\n      color: var(--text-muted);\n      margin-bottom: 12px;\n    }\n\n    .portfolio-meta {\n      display: flex;\n      justify-content: space-between;\n      font-size: 0.75rem;\n      color: var(--primary);\n      border-top: 1px solid var(--border-color);\n      padding-top: 10px;\n    }\n\n    \/* FAQ Accordion *\/\n    .faq-container {\n      max-width: 900px;\n      margin: 0 auto;\n    }\n\n    .faq-category-title {\n      font-size: 1.3rem;\n      color: var(--primary);\n      margin: 40px 0 16px;\n      padding-bottom: 8px;\n      border-bottom: 1px solid var(--border-color);\n    }\n\n    .faq-item {\n      background: var(--bg-card);\n      border: 1px solid var(--border-color);\n      border-radius: 8px;\n      margin-bottom: 12px;\n      overflow: hidden;\n    }\n\n    .faq-question {\n      padding: 18px 24px;\n      font-weight: 700;\n      font-size: 1rem;\n      cursor: pointer;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      transition: background 0.2s;\n    }\n\n    .faq-question:hover {\n      background: var(--bg-card-hover);\n    }\n\n    .faq-question::after {\n      content: \"+\";\n      font-size: 1.4rem;\n      color: var(--primary);\n      transition: transform 0.2s;\n    }\n\n    .faq-item.active .faq-question::after {\n      content: \"\u2212\";\n    }\n\n    .faq-answer {\n      display: none;\n      padding: 0 24px 20px;\n      font-size: 0.92rem;\n      color: var(--text-muted);\n      line-height: 1.7;\n    }\n\n    .faq-item.active .faq-answer {\n      display: block;\n    }\n\n    \/* Lead Form *\/\n    .lead-form-box {\n      background: var(--bg-card);\n      border: 1px solid var(--border-color);\n      border-radius: 12px;\n      padding: 40px;\n      max-width: 860px;\n      margin: 0 auto;\n      box-shadow: 0 10px 40px rgba(0,0,0,0.5);\n    }\n\n    .form-grid-2 {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 20px;\n      margin-bottom: 20px;\n    }\n\n    .form-group {\n      margin-bottom: 18px;\n    }\n\n    .form-group label {\n      display: block;\n      font-size: 0.85rem;\n      font-weight: 600;\n      color: var(--text-muted);\n      margin-bottom: 8px;\n    }\n\n    .form-control {\n      width: 100%;\n      background: var(--bg-dark);\n      border: 1px solid var(--border-color);\n      border-radius: 6px;\n      padding: 12px 16px;\n      color: #fff;\n      font-size: 0.9rem;\n      outline: none;\n    }\n\n    .form-control:focus {\n      border-color: var(--primary);\n    }\n\n    textarea.form-control {\n      resize: vertical;\n      min-height: 120px;\n    }\n\n    \/* Footer *\/\n    footer.site-footer {\n      background: #05070d;\n      padding: 80px 0 40px;\n      border-top: 1px solid var(--border-color);\n    }\n\n    .footer-grid {\n      display: grid;\n      grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr;\n      gap: 40px;\n      margin-bottom: 60px;\n    }\n\n    .footer-col h4 {\n      font-size: 0.95rem;\n      font-weight: 700;\n      color: #fff;\n      margin-bottom: 18px;\n      letter-spacing: 0.5px;\n    }\n\n    .footer-links {\n      list-style: none;\n    }\n\n    .footer-links li {\n      margin-bottom: 10px;\n    }\n\n    .footer-links a {\n      color: var(--text-muted);\n      font-size: 0.85rem;\n    }\n\n    .footer-links a:hover {\n      color: #fff;\n    }\n\n    .footer-bottom {\n      border-top: 1px solid var(--border-color);\n      padding-top: 30px;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      font-size: 0.8rem;\n      color: var(--text-muted);\n    }\n\n    \/* Responsive *\/\n    @media (max-width: 1024px) {\n      .hero-grid {\n        grid-template-columns: 1fr;\n      }\n      .grid-2 {\n        grid-template-columns: 1fr;\n      }\n      .footer-grid {\n        grid-template-columns: 1fr 1fr;\n      }\n      .main-nav {\n        display: none;\n      }\n    }\n\n    @media (max-width: 640px) {\n      .calc-grid-2, .form-grid-2 {\n        grid-template-columns: 1fr;\n      }\n      .hero-content h1 {\n        font-size: 2.1rem;\n      }\n      .footer-grid {\n        grid-template-columns: 1fr;\n      }\n    }\n  <\/style>\n<\/head>\n<body>\n\n  <!-- Site Header -->\n  <header class=\"site-header\">\n    <div class=\"container nav-wrapper\">\n      <a href=\"#\" class=\"brand-logo\">\n        <span class=\"badge\">GAMEARTOUTSOURCE<\/span>.CO.UK\n      <\/a>\n      \n      <nav class=\"main-nav\">\n        <div class=\"nav-item dropdown\">\n          2D Game Art \u25be\n          <div class=\"dropdown-content\">\n            <a href=\"#services-2d\">Character Concepts<\/a>\n            <a href=\"#services-2d\">Environment &#038; Backgrounds<\/a>\n            <a href=\"#services-2d\">Pixel &#038; Isometric Art<\/a>\n            <a href=\"#services-2d\">Casual &#038; Mobile Assets<\/a>\n            <a href=\"#spine-animation\">2D Spine Animation<\/a>\n            <a href=\"#live2d\">Live2D Rigging<\/a>\n          <\/div>\n        <\/div>\n\n        <div class=\"nav-item dropdown\">\n          3D Production \u25be\n          <div class=\"dropdown-content\">\n            <a href=\"#services-3d\">3D Characters &#038; Creatures<\/a>\n            <a href=\"#services-3d\">Modular Environments<\/a>\n            <a href=\"#services-3d\">Weapons &#038; Vehicles<\/a>\n            <a href=\"#services-3d\">Hard-Surface &#038; Organic<\/a>\n            <a href=\"#services-3d\">PBR Texturing &#038; Shading<\/a>\n            <a href=\"#rigging-animation\">Rigging &#038; 3D Animation<\/a>\n          <\/div>\n        <\/div>\n\n        <div class=\"nav-item dropdown\">\n          VFX &#038; Tech Art \u25be\n          <div class=\"dropdown-content\">\n            <a href=\"#vfx-section\">Combat &#038; Magic VFX<\/a>\n            <a href=\"#vfx-section\">Niagara &#038; Shuriken Particles<\/a>\n            <a href=\"#tech-art\">Custom Shaders &#038; Materials<\/a>\n            <a href=\"#tech-art\">Engine Integration<\/a>\n            <a href=\"#tech-art\">Asset Optimization &#038; LODs<\/a>\n          <\/div>\n        <\/div>\n\n        <a href=\"#calculator\" class=\"nav-item\">Budget Calculator<\/a>\n        <a href=\"#portfolio\" class=\"nav-item\">Portfolio<\/a>\n        <a href=\"#workflow\" class=\"nav-item\">Pipeline<\/a>\n        <a href=\"#faq\" class=\"nav-item\">FAQ<\/a>\n      <\/nav>\n\n      <a href=\"#calculator\" class=\"header-cta-btn\">GET ESTIMATE<\/a>\n    <\/div>\n  <\/header>\n\n  <!-- SECTION 01: HERO & INTERACTIVE PRICING CALCULATOR -->\n  <section class=\"hero-section\" id=\"hero\">\n    <div class=\"container hero-grid\">\n      \n      <!-- Hero Left Side -->\n      <div class=\"hero-content\">\n        <div class=\"section-badge\">Production-Ready Game Art Studio<\/div>\n        <h1>Game Art Outsourcing Services for <span class=\"gradient-text\">Global Game Studios<\/span><\/h1>\n        <div class=\"hero-subheadline\">\n          2D Art \u2022 3D Art \u2022 Characters \u2022 Environments \u2022 Animation \u2022 VFX \u2022 UI\/UX \u2022 Technical Art \u2022 Full-Cycle Game Development\n        <\/div>\n        <p class=\"hero-desc\">\n          From a single character concept to complete outsourced multi-platform production pipelines. Gameartoutsourcestudio delivers high-end, engine-ready assets for indie studios, mobile publishers, AAA teams, and VR\/AR developers worldwide.\n        <\/p>\n\n        <div class=\"hero-tags\">\n          <span class=\"hero-tag\">Unreal Engine 5<\/span>\n          <span class=\"hero-tag\">Unity<\/span>\n          <span class=\"hero-tag\">PC &#038; Console<\/span>\n          <span class=\"hero-tag\">Mobile &#038; Casual<\/span>\n          <span class=\"hero-tag\">PBR &#038; Stylized<\/span>\n          <span class=\"hero-tag\">Rigging &#038; Spine<\/span>\n          <span class=\"hero-tag\">Strict NDA &#038; IP Safety<\/span>\n        <\/div>\n\n        <div class=\"hero-actions\">\n          <a href=\"#calculator\" class=\"btn-primary\">Calculate Project Cost \u25be<\/a>\n          <a href=\"mailto:info@gameartoutsource.co.uk?subject=Game%20Art%20Outsourcing%20Inquiry\" class=\"btn-secondary\">Email Production Team<\/a>\n        <\/div>\n      <\/div>\n\n      <!-- Hero Right Side: Interactive Game Outsourcing Price Calculator -->\n      <div class=\"calculator-card\" id=\"calculator\">\n        <div class=\"calculator-header\">\n          <div>\n            <h2>Game Art Budget Estimator<\/h2>\n            <p style=\"font-size:0.8rem; color:var(--text-muted);\">Indicative production budgeting tool<\/p>\n          <\/div>\n          <div class=\"currency-switch\">\n            <button type=\"button\" class=\"currency-btn active\" id=\"currEUR\" onclick=\"setCurrency('EUR')\">EUR \u20ac<\/button>\n            <button type=\"button\" class=\"currency-btn\" id=\"currUSD\" onclick=\"setCurrency('USD')\">USD $<\/button>\n          <\/div>\n        <\/div>\n\n        <form id=\"calcForm\" onsubmit=\"return false;\">\n          <div class=\"calc-form-group\">\n            <label class=\"calc-label\" for=\"calcService\">Select Service Category &#038; Asset Type<\/label>\n            <select class=\"calc-select\" id=\"calcService\" onchange=\"calculateBudget()\">\n              <optgroup label=\"2D Game Art\">\n                <option value=\"50,150\" data-name=\"2D Character Sketch\">2D Character Sketch (\u20ac50\u2013\u20ac150)<\/option>\n                <option value=\"120,400\" data-name=\"2D Character Concept\" selected>2D Character Concept (\u20ac120\u2013\u20ac400)<\/option>\n                <option value=\"250,900\" data-name=\"Fully Rendered 2D Character\">Fully Rendered 2D Character (\u20ac250\u2013\u20ac900)<\/option>\n                <option value=\"250,800\" data-name=\"Character Turnaround\">Character Turnaround (\u20ac250\u2013\u20ac800)<\/option>\n                <option value=\"200,1000\" data-name=\"2D Environment\">2D Environment (\u20ac200\u2013\u20ac1,000)<\/option>\n                <option value=\"150,700\" data-name=\"Background Illustration\">Background Illustration (\u20ac150\u2013\u20ac700)<\/option>\n                <option value=\"50,300\" data-name=\"Isometric Asset\">Isometric Asset (\u20ac50\u2013\u20ac300)<\/option>\n                <option value=\"80,350\" data-name=\"Pixel Art Character\">Pixel Art Character (\u20ac80\u2013\u20ac350)<\/option>\n                <option value=\"150,800\" data-name=\"Pixel Environment\">Pixel Environment (\u20ac150\u2013\u20ac800)<\/option>\n                <option value=\"15,80\" data-name=\"Game Icon\">Game Icon (\u20ac15\u2013\u20ac80)<\/option>\n                <option value=\"30,150\" data-name=\"Game Item Illustration\">Game Item Illustration (\u20ac30\u2013\u20ac150)<\/option>\n                <option value=\"300,1500\" data-name=\"Splash Art\">Splash Art (\u20ac300\u2013\u20ac1,500)<\/option>\n                <option value=\"500,2500\" data-name=\"Promotional Key Art\">Promotional Key Art (\u20ac500\u2013\u20ac2,500)<\/option>\n              <\/optgroup>\n              <optgroup label=\"3D Game Art\">\n                <option value=\"40,180\" data-name=\"Low-Poly Prop\">Low-Poly Prop (\u20ac40\u2013\u20ac180)<\/option>\n                <option value=\"100,400\" data-name=\"Mid-Poly Prop\">Mid-Poly Prop (\u20ac100\u2013\u20ac400)<\/option>\n                <option value=\"200,800\" data-name=\"High-Poly Prop\">High-Poly Prop (\u20ac200\u2013\u20ac800)<\/option>\n                <option value=\"150,700\" data-name=\"Game-Ready Weapon\">Game-Ready Weapon (\u20ac150\u2013\u20ac700)<\/option>\n                <option value=\"500,2500\" data-name=\"Game-Ready Vehicle\">Game-Ready Vehicle (\u20ac500\u2013\u20ac2,500)<\/option>\n                <option value=\"600,3000\" data-name=\"3D Character (PBR)\">3D Character PBR (\u20ac600\u2013\u20ac3,000)<\/option>\n                <option value=\"1500,6000\" data-name=\"AAA Realistic Character\">AAA Realistic Character (\u20ac1,500\u2013\u20ac6,000+)<\/option>\n                <option value=\"500,3000\" data-name=\"3D Creature \/ Monster\">3D Creature \/ Monster (\u20ac500\u2013\u20ac3,000)<\/option>\n                <option value=\"100,800\" data-name=\"Environment Asset\">Environment Asset (\u20ac100\u2013\u20ac800)<\/option>\n                <option value=\"800,5000\" data-name=\"Modular Environment Kit\">Modular Environment Kit (\u20ac800\u2013\u20ac5,000+)<\/option>\n                <option value=\"300,2000\" data-name=\"Architectural Building\">Architectural Building (\u20ac300\u2013\u20ac2,000)<\/option>\n                <option value=\"1000,8000\" data-name=\"3D Environment Scene\">Complete 3D Scene (\u20ac1,000\u2013\u20ac8,000+)<\/option>\n              <\/optgroup>\n              <optgroup label=\"Animation &#038; Rigging\">\n                <option value=\"150,500\" data-name=\"2D Spine Rig\">2D Spine Rig (\u20ac150\u2013\u20ac500)<\/option>\n                <option value=\"80,250\" data-name=\"Spine Idle Animation\">Spine Idle Animation (\u20ac80\u2013\u20ac250)<\/option>\n                <option value=\"150,500\" data-name=\"Spine Combat Animation\">Spine Combat Animation (\u20ac150\u2013\u20ac500)<\/option>\n                <option value=\"300,1500\" data-name=\"Live2D Character Rig\">Live2D Character Rig (\u20ac300\u2013\u20ac1,500)<\/option>\n                <option value=\"250,1000\" data-name=\"3D Character Rig\">3D Character Rig (\u20ac250\u2013\u20ac1,000)<\/option>\n                <option value=\"200,700\" data-name=\"Combat Animation per sec\">Combat Animation (\u20ac200\u2013\u20ac700\/s)<\/option>\n                <option value=\"200,1000\" data-name=\"Facial Rig &#038; Animation\">Facial Rig &#038; Animation (\u20ac200\u2013\u20ac1,000)<\/option>\n                <option value=\"300,1500\" data-name=\"Cinematic Animation per sec\">Cinematic Animation (\u20ac300\u2013\u20ac1,500\/s)<\/option>\n                <option value=\"50,250\" data-name=\"Mocap Cleanup per min\">Mocap Cleanup (\u20ac50\u2013\u20ac250\/min)<\/option>\n              <\/optgroup>\n              <optgroup label=\"UI\/UX &#038; Interface\">\n                <option value=\"50,200\" data-name=\"UI Wireframe\">UI Wireframe (\u20ac50\u2013\u20ac200)<\/option>\n                <option value=\"100,500\" data-name=\"Game UI Screen\">Game UI Screen (\u20ac100\u2013\u20ac500)<\/option>\n                <option value=\"250,900\" data-name=\"Premium UI Screen\">Premium UI Screen (\u20ac250\u2013\u20ac900)<\/option>\n                <option value=\"200,1000\" data-name=\"Custom Gameplay HUD\">Custom Gameplay HUD (\u20ac200\u2013\u20ac1,000)<\/option>\n                <option value=\"300,1500\" data-name=\"Inventory UI System\">Inventory UI System (\u20ac300\u2013\u20ac1,500)<\/option>\n                <option value=\"15,70\" data-name=\"UI Icon Set\">UI Icon Set (\u20ac15\u2013\u20ac70)<\/option>\n                <option value=\"500,3000\" data-name=\"UI Design System\">UI Design System (\u20ac500\u2013\u20ac3,000)<\/option>\n                <option value=\"2000,15000\" data-name=\"Full Game UI Package\">Full Game UI Package (\u20ac2,000\u2013\u20ac15,000+)<\/option>\n              <\/optgroup>\n              <optgroup label=\"VFX &#038; Technical Art\">\n                <option value=\"50,200\" data-name=\"Simple Particle VFX\">Simple Particle VFX (\u20ac50\u2013\u20ac200)<\/option>\n                <option value=\"100,500\" data-name=\"Combat VFX\">Combat VFX (\u20ac100\u2013\u20ac500)<\/option>\n                <option value=\"100,600\" data-name=\"Magic Spell Effect\">Magic Spell Effect (\u20ac100\u2013\u20ac600)<\/option>\n                <option value=\"150,800\" data-name=\"Environmental VFX\">Environmental VFX (\u20ac150\u2013\u20ac800)<\/option>\n                <option value=\"200,1000\" data-name=\"Custom Engine Shader\">Custom Engine Shader (\u20ac200\u2013\u20ac1,000)<\/option>\n                <option value=\"1000,8000\" data-name=\"Complete VFX Pack\">Complete VFX Pack (\u20ac1,000\u2013\u20ac8,000+)<\/option>\n              <\/optgroup>\n              <optgroup label=\"Full-Cycle &#038; Dedicated Teams\">\n                <option value=\"3000,15000\" data-name=\"Playable Prototype\">Playable Prototype (\u20ac3,000\u2013\u20ac15,000+)<\/option>\n                <option value=\"10000,50000\" data-name=\"Small Mobile Game Production\">Small Mobile Game (\u20ac10,000\u2013\u20ac50,000+)<\/option>\n                <option value=\"30000,150000\" data-name=\"Mid-Scope Game Full Dev\">Mid-Scope Game (\u20ac30,000\u2013\u20ac150,000+)<\/option>\n                <option value=\"1500,5000\" data-name=\"Dedicated Artist \/ Month\">Dedicated Artist (\u20ac1,500\u2013\u20ac5,000+\/mo)<\/option>\n                <option value=\"5000,20000\" data-name=\"Dedicated 2D Team \/ Month\">Dedicated 2D Team (\u20ac5,000\u2013\u20ac20,000+\/mo)<\/option>\n                <option value=\"8000,30000\" data-name=\"Dedicated 3D Team \/ Month\">Dedicated 3D Team (\u20ac8,000\u2013\u20ac30,000+\/mo)<\/option>\n              <\/optgroup>\n            <\/select>\n          <\/div>\n\n          <div class=\"calc-grid-2\">\n            <div class=\"calc-form-group\">\n              <label class=\"calc-label\" for=\"calcQty\">Quantity of Assets<\/label>\n              <input type=\"number\" class=\"calc-input\" id=\"calcQty\" value=\"1\" min=\"1\" max=\"1000\" oninput=\"calculateBudget()\">\n            <\/div>\n            <div class=\"calc-form-group\">\n              <label class=\"calc-label\" for=\"calcComplexity\">Complexity Tier<\/label>\n              <select class=\"calc-select\" id=\"calcComplexity\" onchange=\"calculateBudget()\">\n                <option value=\"0.8\">Basic (Casual \/ Low-Poly) [0.8x]<\/option>\n                <option value=\"1.0\" selected>Standard (Indie \/ Mid-Poly) [1.0x]<\/option>\n                <option value=\"1.5\">Advanced (Semi-Realistic \/ Detailed) [1.5x]<\/option>\n                <option value=\"2.5\">AAA \/ Cinematic \/ High-Detail [2.5x]<\/option>\n              <\/select>\n            <\/div>\n          <\/div>\n\n          <div class=\"calc-grid-2\">\n            <div class=\"calc-form-group\">\n              <label class=\"calc-label\" for=\"calcPlatform\">Target Platform<\/label>\n              <select class=\"calc-select\" id=\"calcPlatform\" onchange=\"calculateBudget()\">\n                <option value=\"1.0\" selected>Mobile \/ Web (iOS, Android, HTML5)<\/option>\n                <option value=\"1.1\">PC (Steam, Epic, GOG)<\/option>\n                <option value=\"1.15\">Console (PS5, Xbox Series, Switch)<\/option>\n                <option value=\"1.25\">VR \/ AR (Meta Quest, Vision Pro, OpenXR)<\/option>\n              <\/select>\n            <\/div>\n            <div class=\"calc-form-group\">\n              <label class=\"calc-label\" for=\"calcDeadline\">Production Schedule<\/label>\n              <select class=\"calc-select\" id=\"calcDeadline\" onchange=\"calculateBudget()\">\n                <option value=\"1.0\" selected>Standard Timeline<\/option>\n                <option value=\"1.15\">Fast Track (+15%)<\/option>\n                <option value=\"1.4\">Rush \/ Crunch Sprint (+40%)<\/option>\n              <\/select>\n            <\/div>\n          <\/div>\n\n          <div class=\"calc-result-box\">\n            <div class=\"calc-result-label\">Indicative Budget Range<\/div>\n            <div class=\"calc-result-value\" id=\"calcDisplay\">\u20ac120 \u2013 \u20ac400<\/div>\n            <div class=\"calc-disclaimer\">\n              *Estimator only. Final pricing is customized by art style, topology, texture resolution, engine specs, and deadline.\n            <\/div>\n          <\/div>\n\n          <a href=\"#\" id=\"quoteMailBtn\" class=\"calc-cta-btn\">\n            REQUEST CUSTOM QUOTATION \u2709\n          <\/a>\n        <\/form>\n      <\/div>\n\n    <\/div>\n  <\/section>\n\n  <!-- SECTION 02: COMPLETE GAME OUTSOURCING SERVICES -->\n  <section id=\"services\">\n    <div class=\"container\">\n      <div class=\"section-badge\">Section 02 \u2014 End-to-End Capabilities<\/div>\n      <h2 class=\"section-title\">One Studio. Your Complete Game Production Pipeline.<\/h2>\n      <p class=\"section-sub\">\n        Gameartoutsourcestudio provides modular outsourcing services that can be engaged individually for discrete asset batches or integrated into a comprehensive, co-development art department.\n      <\/p>\n\n      <div class=\"grid-4\">\n        <div class=\"card\">\n          <h3>2D Game Art<\/h3>\n          <p>Concept art, character design, background illustrations, isometric maps, pixel art, sprite sheets, splash art, and marketing keyframes.<\/p>\n          <ul class=\"card-list\">\n            <li>Character &#038; NPC Design<\/li>\n            <li>Environment &#038; Level Art<\/li>\n            <li>Splash Screens &#038; Key Art<\/li>\n            <li>Marketing &#038; Steam Banners<\/li>\n          <\/ul>\n        <\/div>\n\n        <div class=\"card\">\n          <h3>3D Production<\/h3>\n          <p>Game-ready character modeling, organic creatures, hard-surface vehicles, weapons, and modular architectural kits with full PBR maps.<\/p>\n          <ul class=\"card-list\">\n            <li>Hi-Poly Sculpt to Low-Poly Game Mesh<\/li>\n            <li>Modular Environment Kits<\/li>\n            <li>Weapons, Armor &#038; Vehicles<\/li>\n            <li>PBR Texturing &#038; Baking<\/li>\n          <\/ul>\n        <\/div>\n\n        <div class=\"card\">\n          <h3>Animation &#038; Rigging<\/h3>\n          <p>Full 2D Spine and Live2D skeletal workflows, plus 3D humanoid, creature, mechanical rigging, mocap cleanup, and combat animation.<\/p>\n          <ul class=\"card-list\">\n            <li>Spine 2D Skeletal Animation<\/li>\n            <li>Live2D VTuber &#038; Anime Rigging<\/li>\n            <li>3D Combat &#038; Locomotion Cycles<\/li>\n            <li>Facial Rigging &#038; Blendshapes<\/li>\n          <\/ul>\n        <\/div>\n\n        <div class=\"card\">\n          <h3>UI\/UX &#038; Iconography<\/h3>\n          <p>Gamer-first UX architecture, complete wireframing, custom HUDs, responsive screens, inventory systems, and coherent icon design systems.<\/p>\n          <ul class=\"card-list\">\n            <li>Wireframing &#038; Prototypes<\/li>\n            <li>Custom HUD &#038; Gameplay Overlays<\/li>\n            <li>Icon Packs (Skills, Items, Coins)<\/li>\n            <li>Unity &#038; Unreal UI Engine Handoff<\/li>\n          <\/ul>\n        <\/div>\n\n        <div class=\"card\">\n          <h3>VFX &#038; Shaders<\/h3>\n          <p>Real-time visual effects built in Unreal Niagara and Unity Shuriken. Custom shaders for magic, combat impacts, water, dissipation, and forcefields.<\/p>\n          <ul class=\"card-list\">\n            <li>Niagara &#038; Shuriken Systems<\/li>\n            <li>Elemental, Combat &#038; Magic FX<\/li>\n            <li>Custom HLSL \/ Shader Graph<\/li>\n            <li>Post-Processing &#038; Optimization<\/li>\n          <\/ul>\n        <\/div>\n\n        <div class=\"card\">\n          <h3>Technical Art<\/h3>\n          <p>Performance profiling, draw call reduction, texture atlas packing, custom naming validation, automated LOD generation, and engine setup.<\/p>\n          <ul class=\"card-list\">\n            <li>Draw Call &#038; Overdraw Reduction<\/li>\n            <li>LODs &#038; Collision Geometry<\/li>\n            <li>Engine Prefab &#038; Material Setup<\/li>\n            <li>Batching &#038; Memory Optimization<\/li>\n          <\/ul>\n        <\/div>\n\n        <div class=\"card\">\n          <h3>Full Game Dev<\/h3>\n          <p>From prototype creation to full-cycle engineering in Unity, Unreal Engine, and Godot. Gameplay mechanics, backend integration, and live-ops.<\/p>\n          <ul class=\"card-list\">\n            <li>Playable Vertical Slices<\/li>\n            <li>Core Mechanics &#038; Physics<\/li>\n            <li>Multiplayer &#038; Netcode Setup<\/li>\n            <li>Multi-Platform Porting<\/li>\n          <\/ul>\n        <\/div>\n\n        <div class=\"card\">\n          <h3>Dedicated Teams<\/h3>\n          <p>Scale up your internal capacity instantly. Fully managed pods of 2D\/3D artists, animators, tech artists, and art directors dedicated to your game.<\/p>\n          <ul class=\"card-list\">\n            <li>Small, Medium, Large Pods<\/li>\n            <li>Transparent Daily Standups<\/li>\n            <li>Dedicated Art Directors<\/li>\n            <li>Fixed Monthly Retainer Rates<\/li>\n          <\/ul>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- SECTIONS 03 - 05: 2D GAME ART, CHARACTERS & CONCEPT ART -->\n  <section id=\"services-2d\">\n    <div class=\"container\">\n      <div class=\"section-badge\">Sections 03\u201305 \u2014 Visual Direction &#038; 2D Art<\/div>\n      <h2 class=\"section-title\">Professional 2D Game Art &#038; Concept Design<\/h2>\n      <p class=\"section-sub\">\n        Transforming raw scripts, gameplay mechanics, and moodboards into captivating, production-ready 2D game assets and definitive visual direction.\n      <\/p>\n\n      <div class=\"grid-3\">\n        <div class=\"card\">\n          <h3>2D Character Design<\/h3>\n          <p>Memorable hero characters, menacing antagonists, versatile NPCs, and fantastic creatures tailored specifically to your gameplay genre.<\/p>\n          <ul class=\"card-list\">\n            <li>Silhouette exploration &#038; thumbnailing<\/li>\n            <li>Costume, armor, and hairstyle variations<\/li>\n            <li>Character turnarounds (front, back, 3\/4)<\/li>\n            <li>Expression sheets &#038; personality poses<\/li>\n          <\/ul>\n        <\/div>\n\n        <div class=\"card\">\n          <h3>World-Building &#038; Concept Art<\/h3>\n          <p>Establishing the mood, architectural vernacular, lighting keys, and narrative textures of your game universe before 3D production.<\/p>\n          <ul class=\"card-list\">\n            <li>Environment &#038; architectural concepts<\/li>\n            <li>Cinematic keyframes &#038; color scripts<\/li>\n            <li>Prop &#038; weapon conceptual breakdowns<\/li>\n            <li>Vehicle &#038; mechanical blue-sky sketches<\/li>\n          <\/ul>\n        <\/div>\n\n        <div class=\"card\">\n          <h3>2D Production Pipeline<\/h3>\n          <p>Every asset follows a strict iterative production cycle ensuring complete artistic fidelity and frictionless delivery into your pipeline.<\/p>\n          <div class=\"pipeline-container\" style=\"margin: 15px 0 0 0; display: block;\">\n            <p style=\"font-size:0.8rem; color:var(--primary); line-height: 1.8;\">\n              <strong>Brief &#038; Moodboard<\/strong> \u2794 <strong>Thumbnail Sketches<\/strong> \u2794 <strong>Art Direction Signoff<\/strong> \u2794 <strong>Detailed Rendering<\/strong> \u2794 <strong>Layer Separation<\/strong> \u2794 <strong>QA Check<\/strong> \u2794 <strong>Engine Delivery<\/strong>\n            <\/p>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- SECTIONS 06 - 11: 3D MODELING, ENVIRONMENTS, PROPS & PBR -->\n  <section id=\"services-3d\">\n    <div class=\"container\">\n      <div class=\"section-badge\">Sections 06\u201311 \u2014 3D Asset Production<\/div>\n      <h2 class=\"section-title\">Production-Ready 3D Models &#038; Immersive Worlds<\/h2>\n      <p class=\"section-sub\">\n        High\/low-poly modeling, optimized topology, realistic and stylized PBR texturing, modular building kits, and complete engine-ready environments.\n      <\/p>\n\n      <div class=\"grid-3\">\n        <div class=\"card\">\n          <h3>3D Characters &#038; Creatures<\/h3>\n          <p>Sculpted in ZBrush, retopologized for optimal edge loops, and textured for modern high-performance rendering engines.<\/p>\n          <ul class=\"card-list\">\n            <li>AAA Realistic &#038; Stylized heroes<\/li>\n            <li>Creatures, monsters, and fantasy beasts<\/li>\n            <li>Optimized polygon count budgets<\/li>\n            <li>Engine-ready skinning &#038; LOD hierarchies<\/li>\n          <\/ul>\n        <\/div>\n\n        <div class=\"card\">\n          <h3>Modular 3D Environments<\/h3>\n          <p>Grid-snapped modular architecture and reusable environmental kits that allow level designers to build immense worlds rapidly.<\/p>\n          <ul class=\"card-list\">\n            <li>Interiors, dungeons, sci-fi corridors<\/li>\n            <li>Natural terrain, foliage &#038; rock formations<\/li>\n            <li>Trim sheets &#038; tileable PBR materials<\/li>\n            <li>Nanite &#038; custom LOD implementations<\/li>\n          <\/ul>\n        <\/div>\n\n        <div class=\"card\">\n          <h3>Weapons, Props &#038; Vehicles<\/h3>\n          <p>From vintage firearms and enchanted swords to futuristic mechs and drivable high-speed vehicles.<\/p>\n          <ul class=\"card-list\">\n            <li>Hard-surface precision modeling<\/li>\n            <li>Mechanical articulable parts<\/li>\n            <li>Damage &#038; wear material weathering<\/li>\n            <li>Collision mesh creation (UCX)<\/li>\n          <\/ul>\n        <\/div>\n      <\/div>\n\n      <!-- PBR Texturing Breakdown -->\n      <div style=\"margin-top: 40px;\" class=\"card\">\n        <h3>Physically Based Rendering (PBR) Texturing Standards<\/h3>\n        <p style=\"margin-bottom: 15px;\">We author high-fidelity materials that react authentically across dynamic lighting scenarios, supporting both Metallic\/Roughness and Specular\/Glossiness pipelines.<\/p>\n        <div class=\"hero-tags\">\n          <span class=\"hero-tag\">Base Color \/ Albedo<\/span>\n          <span class=\"hero-tag\">Normal (DirectX \/ OpenGL)<\/span>\n          <span class=\"hero-tag\">Roughness<\/span>\n          <span class=\"hero-tag\">Metallic<\/span>\n          <span class=\"hero-tag\">Ambient Occlusion (Channel Packed ORM)<\/span>\n          <span class=\"hero-tag\">Height \/ Displacement<\/span>\n          <span class=\"hero-tag\">Emissive<\/span>\n          <span class=\"hero-tag\">Subsurface Scattering (Skin\/Wax)<\/span>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- SECTIONS 12 - 13: UI\/UX DESIGN & ICONS -->\n  <section id=\"ui-ux\">\n    <div class=\"container\">\n      <div class=\"section-badge\">Sections 12\u201313 \u2014 Interfaces &#038; Systems<\/div>\n      <h2 class=\"section-title\">Game UI\/UX Design &#038; Icon Systems<\/h2>\n      <p class=\"section-sub\">\n        Intuitive, immersive user experiences designed to keep players locked in the game loop while communicating complex mechanics with clarity.\n      <\/p>\n\n      <div class=\"grid-3\">\n        <div class=\"card\">\n          <h3>In-Game HUD &#038; Menus<\/h3>\n          <p>Complete interface packages crafted for PC, Console, Mobile, and VR with resolution-independent vector fidelity.<\/p>\n          <ul class=\"card-list\">\n            <li>Action combat HUDs &#038; status bars<\/li>\n            <li>Main menus, settings, and audio controls<\/li>\n            <li>Gacha, store, and battle pass layouts<\/li>\n            <li>Quest logs, dialog trees, and maps<\/li>\n          <\/ul>\n        <\/div>\n\n        <div class=\"card\">\n          <h3>UX Architecture &#038; Wireframing<\/h3>\n          <p>Scientific user flow engineering designed to minimize friction, lower bounce rates, and maximize player retention.<\/p>\n          <ul class=\"card-list\">\n            <li>Interactive Figma \/ Adobe XD prototypes<\/li>\n            <li>Ergonomic mobile thumb-zone layout<\/li>\n            <li>Accessibility &#038; colorblind compliance<\/li>\n            <li>Localization-ready text containers<\/li>\n          <\/ul>\n        <\/div>\n\n        <div class=\"card\">\n          <h3>Game Iconography &#038; Item Packs<\/h3>\n          <p>Cohesive icon suites designed in high volume, keeping distinct readability even at micro scale on mobile screens.<\/p>\n          <ul class=\"card-list\">\n            <li>Skill, spell, and ability icons<\/li>\n            <li>Inventory weapons, potions, and gear<\/li>\n            <li>In-game currencies &#038; gem assets<\/li>\n            <li>Achievement &#038; trophy badges<\/li>\n          <\/ul>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- SECTIONS 14 - 20: ANIMATION, SPINE, LIVE2D, RIGGING -->\n  <section id=\"animation-rigging\">\n    <div class=\"container\">\n      <div class=\"section-badge\">Sections 14\u201320 \u2014 Motion &#038; Character Life<\/div>\n      <h2 class=\"section-title\">2D Spine, Live2D &#038; 3D Character Animation<\/h2>\n      <p class=\"section-sub\">\n        Bringing characters to life with fluid kinematics, expressive facial performances, and combat animations that translate gameplay feedback instantly.\n      <\/p>\n\n      <div class=\"grid-3\">\n        <div class=\"card\" id=\"spine-animation\">\n          <h3>2D Spine Animation<\/h3>\n          <p>Lightweight, skeletal 2D animations optimized for mobile games, gacha titles, and sidescrollers.<\/p>\n          <ul class=\"card-list\">\n            <li>Mesh deformation &#038; FFD bones<\/li>\n            <li>IK \/ FK setup &#038; weight painting<\/li>\n            <li>Idle, run, combat, hit, and death cycles<\/li>\n            <li>JSON &#038; texture atlas export for Unity\/Unreal<\/li>\n          <\/ul>\n        <\/div>\n\n        <div class=\"card\" id=\"live2d\">\n          <h3>Live2D Character Rigging<\/h3>\n          <p>Premier interactive rigging for visual novels, VTuber avatars, gacha portraits, and anime games.<\/p>\n          <ul class=\"card-list\">\n            <li>PSD layer decomposition &#038; slicing<\/li>\n            <li>Dynamic hair &#038; clothing physics<\/li>\n            <li>Smooth head &#038; eye rotation angles (X\/Y\/Z)<\/li>\n            <li>Expression &#038; breathing parameters<\/li>\n          <\/ul>\n        <\/div>\n\n        <div class=\"card\" id=\"rigging-animation\">\n          <h3>3D Rigging &#038; Mocap Cleanup<\/h3>\n          <p>Humanoid and non-humanoid rigging pipelines equipped with custom control rigs and mocap retargeting.<\/p>\n          <ul class=\"card-list\">\n            <li>Modular FK\/IK rigs with twist bones<\/li>\n            <li>Facial blendshapes &#038; ARKit phonemes<\/li>\n            <li>Motion capture cleanup &#038; foot-slide repair<\/li>\n            <li>Root motion setup for Unity &#038; Unreal<\/li>\n          <\/ul>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- SECTIONS 21 - 23: VFX, PARTICLES & TECHNICAL SHADERS -->\n  <section id=\"vfx-section\">\n    <div class=\"container\">\n      <div class=\"section-badge\">Sections 21\u201323 \u2014 Visual Effects<\/div>\n      <h2 class=\"section-title\">Game VFX &#038; Real-Time Technical Shaders<\/h2>\n      <p class=\"section-sub\">\n        Stylized and realistic real-time visual effects built directly inside Unity Shuriken\/VFX Graph and Unreal Engine Niagara systems.\n      <\/p>\n\n      <div class=\"grid-3\">\n        <div class=\"card\">\n          <h3>Combat &#038; Magic VFX<\/h3>\n          <p>Spellcasting, weapon impacts, slash ribbons, projectile blasts, explosions, and healing auras designed for combat gameplay.<\/p>\n          <ul class=\"card-list\">\n            <li>Melee slash trails &#038; impact flashes<\/li>\n            <li>Elemental magic (Fire, Ice, Lightning, Dark)<\/li>\n            <li>Area-of-Effect (AoE) ground decals<\/li>\n            <li>Dynamic GPU particle simulations<\/li>\n          <\/ul>\n        <\/div>\n\n        <div class=\"card\">\n          <h3>Environmental &#038; Atmospheric FX<\/h3>\n          <p>World effects that elevate environmental storytelling and atmospheric depth without crippling framerates.<\/p>\n          <ul class=\"card-list\">\n            <li>Volumetric smoke, fog, and fire<\/li>\n            <li>Dynamic weather (rain, snow, sandstorms)<\/li>\n            <li>Interactive dust motes and falling leaves<\/li>\n            <li>Waterfalls, splashes, and fluid foam<\/li>\n          <\/ul>\n        <\/div>\n\n        <div class=\"card\" id=\"tech-art\">\n          <h3>Custom Shaders &#038; Technical Art<\/h3>\n          <p>Custom mathematical shaders created via HLSL or Shader Graph to deliver distinct art styles and visual polish.<\/p>\n          <ul class=\"card-list\">\n            <li>Dissolve, teleport, and spawn shaders<\/li>\n            <li>Toon &#038; anime cel-shading with outlines<\/li>\n            <li>Interactive water with caustics and depth<\/li>\n            <li>Hologram, forcefield, and scanline shaders<\/li>\n          <\/ul>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- SECTIONS 24 - 27: MOBILE, PIXEL ART, CASUAL & ISOMETRIC -->\n  <section id=\"casual-mobile\">\n    <div class=\"container\">\n      <div class=\"section-badge\">Sections 24\u201327 \u2014 Mobile &#038; Casual Art<\/div>\n      <h2 class=\"section-title\">High-Volume Casual, Mobile &#038; Pixel Art Production<\/h2>\n      <p class=\"section-sub\">\n        Specialized asset production designed around aggressive mobile performance constraints, rapid content roadmaps, and addictive casual gameplay.\n      <\/p>\n\n      <div class=\"grid-4\">\n        <div class=\"card\">\n          <h3>Match-3 &#038; Merge Games<\/h3>\n          <p>Vibrant tiles, boosters, progression chains, reward popups, and themed event assets that drive in-app purchases.<\/p>\n        <\/div>\n        <div class=\"card\">\n          <h3>Authentic Pixel Art<\/h3>\n          <p>Hand-crafted 8-bit, 16-bit, and modern high-res pixel art. Character sprites, retro tilesets, and frame-by-frame animation.<\/p>\n        <\/div>\n        <div class=\"card\">\n          <h3>Isometric Worlds<\/h3>\n          <p>City builders, tycoon games, and tactical RPGs. 2D\/3D isometric modular buildings, roads, terrain, and resource nodes.<\/p>\n        <\/div>\n        <div class=\"card\">\n          <h3>Mobile Performance QA<\/h3>\n          <p>Draw call optimization, power-of-two texture packing, atlas generation, memory profiling, and low vertex counts.<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- SECTIONS 30 - 35: TECH ART, ENGINE SUPPORT & FULL-CYCLE GAME DEV -->\n  <section id=\"engine-dev\">\n    <div class=\"container\">\n      <div class=\"section-badge\">Sections 30\u201335 \u2014 Engineering &#038; Development<\/div>\n      <h2 class=\"section-title\">Engine-Ready Integration &#038; Full-Cycle Development<\/h2>\n      <p class=\"section-sub\">\n        We bridge the gap between creative art and software engineering. Receive assets pre-configured into prefabs, blueprints, and materials ready for runtime.\n      <\/p>\n\n      <div class=\"grid-2\">\n        <div>\n          <div class=\"card\" style=\"margin-bottom: 20px;\">\n            <h3>Unity Game Art Services<\/h3>\n            <p>Prefab assembly, ScriptableObject data hookups, Animator controllers, Universal Render Pipeline (URP) &#038; HDRP material conversion, and Addressables packaging.<\/p>\n          <\/div>\n          <div class=\"card\">\n            <h3>Unreal Engine 5 Services<\/h3>\n            <p>Skeletal mesh setups, Animation Blueprints, Nanite geometry configuration, Lumen lighting bake\/real-time setup, Niagara particle binding, and Chaos destruction.<\/p>\n          <\/div>\n        <\/div>\n\n        <div class=\"card\" style=\"height: 100%;\">\n          <h3>Full-Cycle Game Production Phases<\/h3>\n          <p style=\"margin-bottom: 20px;\">Beyond standalone art assets, Gameartoutsourcestudio acts as a co-development partner managing multi-stage technical game production:<\/p>\n          \n          <div class=\"card-list\">\n            <li><strong>Phase 01: Pre-Production:<\/strong> GDD analysis, tech stack validation, art bible formulation, and rapid vertical-slice prototyping.<\/li>\n            <li><strong>Phase 02: Visual Development:<\/strong> Concept art, character exploration, environment color keys, and UI wireframing.<\/li>\n            <li><strong>Phase 03: Asset Production:<\/strong> 2D\/3D models, textures, rigs, animation cycles, VFX, and audio integration.<\/li>\n            <li><strong>Phase 04: Technical Optimization:<\/strong> Memory profiling, draw call reduction, shader optimization, and LOD generation.<\/li>\n            <li><strong>Phase 05: QA, Testing &#038; Release:<\/strong> Multi-device testing, store submission packages, and post-launch live-ops support.<\/li>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- SECTIONS 36 - 39: GENRES & DEDICATED TEAM MODELS -->\n  <section id=\"dedicated-teams\">\n    <div class=\"container\">\n      <div class=\"section-badge\">Sections 36\u201339 \u2014 Scale &#038; Dedicated Teams<\/div>\n      <h2 class=\"section-title\">Dedicated Game Art Pods Built for Long-Term Scale<\/h2>\n      <p class=\"section-sub\">\n        Eliminate recruiting bottlenecks and overhead. Seamlessly spin up a dedicated external art department managed by veteran Art Directors and Producers.\n      <\/p>\n\n      <div class=\"grid-3\">\n        <div class=\"card\">\n          <div style=\"font-size: 0.8rem; color: var(--primary); font-weight: 700; margin-bottom: 8px;\">FLEXIBLE CO-DEV<\/div>\n          <h3>Small Production Pod<\/h3>\n          <p>Ideal for indie studios, prototype sprints, and targeted asset expansions.<\/p>\n          <ul class=\"card-list\">\n            <li>1 Dedicated Art Director \/ Lead<\/li>\n            <li>1\u20132 Generalist 2D \/ 3D Artists<\/li>\n            <li>1 Part-Time Technical Artist \/ QA<\/li>\n            <li>Weekly sprints &#038; daily Slack comms<\/li>\n          <\/ul>\n          <div style=\"margin-top: 15px; font-weight: 800; color: #fff;\">From \u20ac5,000 \/ month<\/div>\n        <\/div>\n\n        <div class=\"card\" style=\"border-color: var(--primary); box-shadow: 0 0 25px var(--accent-glow);\">\n          <div style=\"font-size: 0.8rem; color: var(--primary); font-weight: 700; margin-bottom: 8px;\">MOST POPULAR<\/div>\n          <h3>Full Production Team<\/h3>\n          <p>Comprehensive art department handling characters, environments, UI, and animation simultaneously.<\/p>\n          <ul class=\"card-list\">\n            <li>1 Dedicated Producer + Art Director<\/li>\n            <li>2 3D Character &#038; Environment Artists<\/li>\n            <li>1 2D Concept \/ UI Artist<\/li>\n            <li>1 Technical Animator (Rigging + Cycles)<\/li>\n            <li>Dedicated QA &#038; engine integration<\/li>\n          <\/ul>\n          <div style=\"margin-top: 15px; font-weight: 800; color: var(--primary);\">Custom Monthly Retainer<\/div>\n        <\/div>\n\n        <div class=\"card\">\n          <div style=\"font-size: 0.8rem; color: var(--primary); font-weight: 700; margin-bottom: 8px;\">AAA &#038; PUBLISHER SCALE<\/div>\n          <h3>Enterprise Studio Division<\/h3>\n          <p>High-volume multi-discipline studio pod scaled for live-service expansions, MMORPGs, and AAA titles.<\/p>\n          <ul class=\"card-list\">\n            <li>Multi-department lead structure<\/li>\n            <li>10+ dedicated artists across disciplines<\/li>\n            <li>Strict ISO \/ NDA security isolation<\/li>\n            <li>Direct integration into Jira\/Perforce\/Git<\/li>\n          <\/ul>\n          <div style=\"margin-top: 15px; font-weight: 800; color: #fff;\">Enterprise Agreement<\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- SECTIONS 43 - 46: CLIENT WORKFLOW, NDA & QUALITY CONTROL -->\n  <section id=\"workflow\">\n    <div class=\"container\">\n      <div class=\"section-badge\">Sections 43\u201346 \u2014 Process &#038; Governance<\/div>\n      <h2 class=\"section-title\">Transparent 8-Step Outsourcing Workflow<\/h2>\n      <p class=\"section-sub\">\n        Zero surprises, full IP protection, and structured milestone signoffs. How your game moves from raw brief to engine integration.\n      <\/p>\n\n      <div class=\"pipeline-container\">\n        <div class=\"pipeline-step\">\n          <div class=\"pipeline-num\">STEP 01<\/div>\n          <div class=\"pipeline-name\">Project Brief<\/div>\n          <p style=\"font-size:0.75rem; color:var(--text-muted); margin-top:6px;\">GDD, art bible, asset list &#038; deadlines.<\/p>\n        <\/div>\n        <div class=\"pipeline-step\">\n          <div class=\"pipeline-num\">STEP 02<\/div>\n          <div class=\"pipeline-name\">NDA &#038; Scope<\/div>\n          <p style=\"font-size:0.75rem; color:var(--text-muted); margin-top:6px;\">Mutual NDA signing and technical scoping.<\/p>\n        <\/div>\n        <div class=\"pipeline-step\">\n          <div class=\"pipeline-num\">STEP 03<\/div>\n          <div class=\"pipeline-name\">Proposal<\/div>\n          <p style=\"font-size:0.75rem; color:var(--text-muted); margin-top:6px;\">Transparent quotation, milestone schedule.<\/p>\n        <\/div>\n        <div class=\"pipeline-step\">\n          <div class=\"pipeline-num\">STEP 04<\/div>\n          <div class=\"pipeline-name\">Pilot Sample<\/div>\n          <p style=\"font-size:0.75rem; color:var(--text-muted); margin-top:6px;\">Benchmark asset to establish style alignment.<\/p>\n        <\/div>\n        <div class=\"pipeline-step\">\n          <div class=\"pipeline-num\">STEP 05<\/div>\n          <div class=\"pipeline-name\">Production<\/div>\n          <p style=\"font-size:0.75rem; color:var(--text-muted); margin-top:6px;\">Active asset production with daily updates.<\/p>\n        <\/div>\n        <div class=\"pipeline-step\">\n          <div class=\"pipeline-num\">STEP 06<\/div>\n          <div class=\"pipeline-name\">Review Cycles<\/div>\n          <p style=\"font-size:0.75rem; color:var(--text-muted); margin-top:6px;\">Collaborative feedback and iterative revision.<\/p>\n        <\/div>\n        <div class=\"pipeline-step\">\n          <div class=\"pipeline-num\">STEP 07<\/div>\n          <div class=\"pipeline-name\">Technical QA<\/div>\n          <p style=\"font-size:0.75rem; color:var(--text-muted); margin-top:6px;\">Topology, UV, texture &#038; engine validation.<\/p>\n        <\/div>\n        <div class=\"pipeline-step\">\n          <div class=\"pipeline-num\">STEP 08<\/div>\n          <div class=\"pipeline-name\">Final Delivery<\/div>\n          <p style=\"font-size:0.75rem; color:var(--text-muted); margin-top:6px;\">Clean folder structure, source files &#038; prefabs.<\/p>\n        <\/div>\n      <\/div>\n\n      <div class=\"grid-2\" style=\"margin-top: 40px;\">\n        <div class=\"card\">\n          <h3>Dual-Gate Quality Assurance<\/h3>\n          <p style=\"margin-bottom: 12px;\"><strong>Visual QA:<\/strong> Verification of anatomy, silhouette, color grading, surface roughness, and alignment with the Art Bible.<\/p>\n          <p><strong>Technical QA:<\/strong> Rigorous validation of polygon budgets, non-manifold geometry, UV overlaps, texture dilation, bone weighting, and draw call profiling.<\/p>\n        <\/div>\n        <div class=\"card\">\n          <h3>Strict NDA &#038; IP Confidentiality<\/h3>\n          <p style=\"margin-bottom: 12px;\">We treat your intellectual property with enterprise-grade security protocols:<\/p>\n          <ul class=\"card-list\">\n            <li>Strict bilateral Non-Disclosure Agreements prior to any brief exchange<\/li>\n            <li>Role-based access controls on isolated, encrypted cloud repositories<\/li>\n            <li>Zero unauthorized public portfolio usage without explicit written consent<\/li>\n            <li>Complete handoff of all raw source project files (PSD, Maya, Blender, ZTL)<\/li>\n          <\/ul>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- SECTION 61: PORTFOLIO SHOWCASE -->\n  <section id=\"portfolio\">\n    <div class=\"container\">\n      <div class=\"section-badge\">Section 61 \u2014 Portfolio Grid<\/div>\n      <h2 class=\"section-title\">Explore Our Game Art Capabilities<\/h2>\n      <p class=\"section-sub\">\n        A glimpse into past production benchmarks across stylized, realistic, mobile, and AAA pipelines.\n      <\/p>\n\n      <div class=\"portfolio-filters\">\n        <button type=\"button\" class=\"filter-btn active\" onclick=\"filterPortfolio('all')\">All Disciplines<\/button>\n        <button type=\"button\" class=\"filter-btn\" onclick=\"filterPortfolio('3d')\">3D Characters &#038; Creatures<\/button>\n        <button type=\"button\" class=\"filter-btn\" onclick=\"filterPortfolio('env')\">Environments &#038; Props<\/button>\n        <button type=\"button\" class=\"filter-btn\" onclick=\"filterPortfolio('2d')\">2D Concept &#038; Spine<\/button>\n        <button type=\"button\" class=\"filter-btn\" onclick=\"filterPortfolio('ui')\">UI\/UX &#038; VFX<\/button>\n      <\/div>\n\n      <div class=\"grid-3\" id=\"portfolioGrid\">\n        <div class=\"portfolio-card\" data-cat=\"3d\">\n          <div class=\"portfolio-thumb\">\n            <span class=\"portfolio-badge\">AAA 3D<\/span>\n            [ Cyberpunk Assassin Character ]\n          <\/div>\n          <div class=\"portfolio-details\">\n            <h4>Cyberpunk Operative<\/h4>\n            <p>Full-cycle AAA character production: high-poly sculpt, optimized 45k poly mesh, 4K PBR textures, and combat rig.<\/p>\n            <div class=\"portfolio-meta\">\n              <span>PC \/ Console<\/span>\n              <span>Unreal Engine 5<\/span>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"portfolio-card\" data-cat=\"env\">\n          <div class=\"portfolio-thumb\">\n            <span class=\"portfolio-badge\">Modular Kit<\/span>\n            [ Gothic Cathedral Scene ]\n          <\/div>\n          <div class=\"portfolio-details\">\n            <h4>Gothic Catacomb Kit<\/h4>\n            <p>120-piece modular architectural kit with trim sheets, custom collision, and tileable stone materials.<\/p>\n            <div class=\"portfolio-meta\">\n              <span>PC \/ PS5<\/span>\n              <span>Lumen \/ Nanite<\/span>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"portfolio-card\" data-cat=\"2d\">\n          <div class=\"portfolio-thumb\">\n            <span class=\"portfolio-badge\">Spine 2D<\/span>\n            [ Anime RPG Heroine ]\n          <\/div>\n          <div class=\"portfolio-details\">\n            <h4>Anime Gacha Heroine<\/h4>\n            <p>2D illustration, full PSD layer separation, Spine 2D skeletal rig, and 8 combat animation cycles.<\/p>\n            <div class=\"portfolio-meta\">\n              <span>Mobile (iOS\/Android)<\/span>\n              <span>Unity 2D<\/span>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"portfolio-card\" data-cat=\"ui\">\n          <div class=\"portfolio-thumb\">\n            <span class=\"portfolio-badge\">UI\/UX<\/span>\n            [ Sci-Fi Tactical HUD ]\n          <\/div>\n          <div class=\"portfolio-details\">\n            <h4>Sci-Fi Tactical Interface<\/h4>\n            <p>Complete game UI package: responsive HUD, inventory system, skill trees, and 60+ vector game icons.<\/p>\n            <div class=\"portfolio-meta\">\n              <span>Multi-Platform<\/span>\n              <span>Figma &#038; Unity UI<\/span>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"portfolio-card\" data-cat=\"3d\">\n          <div class=\"portfolio-thumb\">\n            <span class=\"portfolio-badge\">Stylized 3D<\/span>\n            [ Fantasy Beast Boss ]\n          <\/div>\n          <div class=\"portfolio-details\">\n            <h4>Stylized Chimera Boss<\/h4>\n            <p>Hand-painted PBR creature with full quadrupede skeletal rig, cloth simulation, and dynamic combat VFX.<\/p>\n            <div class=\"portfolio-meta\">\n              <span>Action RPG<\/span>\n              <span>Unity URP<\/span>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"portfolio-card\" data-cat=\"ui\">\n          <div class=\"portfolio-thumb\">\n            <span class=\"portfolio-badge\">VFX &#038; Shaders<\/span>\n            [ Arcane Spellcasting Pack ]\n          <\/div>\n          <div class=\"portfolio-details\">\n            <h4>Niagara Magic VFX Suite<\/h4>\n            <p>18 high-impact combat visual effects built in Niagara, featuring GPU particle ribbons and custom distortion shaders.<\/p>\n            <div class=\"portfolio-meta\">\n              <span>PC \/ Console<\/span>\n              <span>Unreal Niagara<\/span>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- SECTION 64: SERVICE COMPARISON MATRIX -->\n  <section id=\"matrix\">\n    <div class=\"container\">\n      <div class=\"section-badge\">Section 64 \u2014 Service Delivery Matrix<\/div>\n      <h2 class=\"section-title\">Comprehensive Service Comparison<\/h2>\n      <p class=\"section-sub\">\n        Clear visualization of deliverables included across our primary game art outsourcing disciplines.\n      <\/p>\n\n      <div class=\"table-container\">\n        <table class=\"service-table\">\n          <thead>\n            <tr>\n              <th>Service Discipline<\/th>\n              <th>2D Source<\/th>\n              <th>3D Geometry<\/th>\n              <th>Rigging &#038; Motion<\/th>\n              <th>Engine-Ready<\/th>\n              <th>Target Deliverables<\/th>\n            <\/tr>\n          <\/thead>\n          <tbody>\n            <tr>\n              <td><strong>2D Character Art<\/strong><\/td>\n              <td><span class=\"check-mark\">\u2713<\/span> PSD \/ PNG<\/td>\n              <td>\u2014<\/td>\n              <td>Optional (Spine\/Live2D)<\/td>\n              <td><span class=\"check-mark\">\u2713<\/span> Yes<\/td>\n              <td>Concept art, turnaround sheets, promotional illustrations<\/td>\n            <\/tr>\n            <tr>\n              <td><strong>3D Character Modeling<\/strong><\/td>\n              <td><span class=\"check-mark\">\u2713<\/span> Concept Ref<\/td>\n              <td><span class=\"check-mark\">\u2713<\/span> FBX \/ OBJ \/ ZTL<\/td>\n              <td><span class=\"check-mark\">\u2713<\/span> Humanoid \/ Mocap<\/td>\n              <td><span class=\"check-mark\">\u2713<\/span> Yes<\/td>\n              <td>Hi-poly sculpt, optimized game mesh, PBR textures, LODs<\/td>\n            <\/tr>\n            <tr>\n              <td><strong>Environment Production<\/strong><\/td>\n              <td><span class=\"check-mark\">\u2713<\/span> Moodboards<\/td>\n              <td><span class=\"check-mark\">\u2713<\/span> Modular FBX<\/td>\n              <td>Optional (Wind\/Props)<\/td>\n              <td><span class=\"check-mark\">\u2713<\/span> Yes<\/td>\n              <td>Modular kits, level blockouts, trim sheets, terrain prefabs<\/td>\n            <\/tr>\n            <tr>\n              <td><strong>Weapons &#038; Vehicles<\/strong><\/td>\n              <td><span class=\"check-mark\">\u2713<\/span> Orthographics<\/td>\n              <td><span class=\"check-mark\">\u2713<\/span> High\/Low Poly<\/td>\n              <td><span class=\"check-mark\">\u2713<\/span> Articulation Rigs<\/td>\n              <td><span class=\"check-mark\">\u2713<\/span> Yes<\/td>\n              <td>PBR textures, collision meshes, mechanical attachment points<\/td>\n            <\/tr>\n            <tr>\n              <td><strong>Game UI\/UX<\/strong><\/td>\n              <td><span class=\"check-mark\">\u2713<\/span> Figma \/ SVG<\/td>\n              <td>Optional (3D HUD)<\/td>\n              <td><span class=\"check-mark\">\u2713<\/span> State Transitions<\/td>\n              <td><span class=\"check-mark\">\u2713<\/span> Yes<\/td>\n              <td>Wireframes, complete HUD screens, sliced UI atlases, icons<\/td>\n            <\/tr>\n            <tr>\n              <td><strong>Real-Time VFX<\/strong><\/td>\n              <td><span class=\"check-mark\">\u2713<\/span> Particle Sprites<\/td>\n              <td><span class=\"check-mark\">\u2713<\/span> Emitter Meshes<\/td>\n              <td><span class=\"check-mark\">\u2713<\/span> Dynamic Sim<\/td>\n              <td><span class=\"check-mark\">\u2713<\/span> Yes<\/td>\n              <td>Niagara systems, Shuriken prefabs, HLSL\/Shader Graph files<\/td>\n            <\/tr>\n            <tr>\n              <td><strong>Full-Cycle Development<\/strong><\/td>\n              <td><span class=\"check-mark\">\u2713<\/span> Full VisDev<\/td>\n              <td><span class=\"check-mark\">\u2713<\/span> Complete Pipeline<\/td>\n              <td><span class=\"check-mark\">\u2713<\/span> End-to-End<\/td>\n              <td><span class=\"check-mark\">\u2713<\/span> Yes<\/td>\n              <td>Playable builds, integrated code, multiplayer netcode, QA<\/td>\n            <\/tr>\n          <\/tbody>\n        <\/table>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- SECTIONS 68 - 71: COMPREHENSIVE FAQS -->\n  <section id=\"faq\">\n    <div class=\"container faq-container\">\n      <div class=\"section-badge\" style=\"text-align: center; display: block;\">Frequently Asked Questions<\/div>\n      <h2 class=\"section-title\" style=\"text-align: center;\">Got Questions? We Have Answers.<\/h2>\n      <p class=\"section-sub\" style=\"text-align: center; margin: 0 auto 40px;\">\n        Everything you need to know about our production workflows, budgeting, intellectual property, and technical formats.\n      <\/p>\n\n      <div class=\"faq-category-title\">General &#038; Studio Questions<\/div>\n      \n      <div class=\"faq-item\">\n        <div class=\"faq-question\">What game art services does Gameartoutsourcestudio provide?<\/div>\n        <div class=\"faq-answer\">\n          We provide end-to-end 2D and 3D game art, including character concepts, 3D modeling, modular environments, props, weapons, game UI\/UX, 2D Spine &#038; Live2D animation, 3D rigging, motion capture cleanup, combat visual effects (VFX), custom shaders, technical art optimization, and full-cycle game development support in Unity, Unreal Engine, and Godot.\n        <\/div>\n      <\/div>\n\n      <div class=\"faq-item\">\n        <div class=\"faq-question\">Can you match and adapt to our game&#8217;s existing art style?<\/div>\n        <div class=\"faq-answer\">\n          Yes, absolutely. We regularly work with established Art Bibles, in-game asset references, and style guides. We begin engagements with a small pilot or benchmark asset to guarantee complete aesthetic and technical alignment with your internal team before ramping up full production.\n        <\/div>\n      <\/div>\n\n      <div class=\"faq-item\">\n        <div class=\"faq-question\">Do you sign NDAs to protect our intellectual property?<\/div>\n        <div class=\"faq-answer\">\n          Yes. Client confidentiality is paramount. We sign mutual Non-Disclosure Agreements prior to reviewing Game Design Documents (GDDs) or project briefs. All intellectual property, source files, and production assets remain 100% owned by the client upon completion.\n        <\/div>\n      <\/div>\n\n      <div class=\"faq-category-title\">Pricing &#038; Budgeting<\/div>\n\n      <div class=\"faq-item\">\n        <div class=\"faq-question\">How does your pricing model work, and is the calculator price fixed?<\/div>\n        <div class=\"faq-answer\">\n          The calculator above provides an indicative budget range to help you plan your production estimates. Final quotations are custom-crafted based on your exact art style, polycount constraints, texture resolutions, animation length, required revisions, and deadline requirements.\n        <\/div>\n      <\/div>\n\n      <div class=\"faq-item\">\n        <div class=\"faq-question\">Why do two characters or environments have differing prices?<\/div>\n        <div class=\"faq-answer\">\n          A simple stylized low-poly prop takes significantly less production time than a complex AAA character featuring high-frequency anatomical sculpting, multi-layered cloth simulations, hair card grooming, and blendshape facial rigs. We price fairly according to real production effort and complexity.\n        <\/div>\n      <\/div>\n\n      <div class=\"faq-category-title\">Technical Specifications &#038; Engine Integration<\/div>\n\n      <div class=\"faq-item\">\n        <div class=\"faq-question\">Do you provide direct Unity and Unreal Engine integration?<\/div>\n        <div class=\"faq-answer\">\n          Yes. Rather than delivering loose raw files, we can assemble Unity Prefabs with materials and colliders, or configure Unreal Engine 5 Nanite meshes, Animation Blueprints, and Niagara particle emitters directly in your project repository via Git or Perforce.\n        <\/div>\n      <\/div>\n\n      <div class=\"faq-item\">\n        <div class=\"faq-question\">What file formats are delivered at project completion?<\/div>\n        <div class=\"faq-answer\">\n          We deliver complete industry-standard formats: 2D (layered PSD, PNG, SVG, Figma, Spine JSON\/Atlas), 3D (FBX, OBJ, ZTL, Maya .ma, Blender .blend, GLB\/glTF), Textures (TGA, PNG, packed ORM maps), and Animation (FBX with root motion, Spine exports, mocap BVH).\n        <\/div>\n      <\/div>\n\n      <div class=\"faq-category-title\">Project Management &#038; Pilot Sprints<\/div>\n\n      <div class=\"faq-item\">\n        <div class=\"faq-question\">Can we start with a small pilot or test asset?<\/div>\n        <div class=\"faq-answer\">\n          Yes! We actively encourage new partners to begin with a paid pilot sprint (such as 1 character, 1 prop, or a small UI screen). This allows your leads to evaluate our quality, communication speed, and pipeline adherence with minimal commitment.\n        <\/div>\n      <\/div>\n\n      <div class=\"faq-item\">\n        <div class=\"faq-question\">How do revisions and feedback cycles work?<\/div>\n        <div class=\"faq-answer\">\n          Each production milestone includes structured review stages: Blockout\/Silhouette Review \u2794 Detailed Polish Review \u2794 Final QA Approval. Standard packages include 2 rounds of iterative revisions per stage to ensure the asset matches your exact vision.\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- SECTION 74: EMAIL LEAD GENERATOR & CONTACT FORM -->\n  <section id=\"contact\">\n    <div class=\"container\">\n      <div class=\"section-badge\" style=\"text-align: center; display: block;\">Section 74 \u2014 Start Production<\/div>\n      <h2 class=\"section-title\" style=\"text-align: center;\">Tell Us About Your Game Project<\/h2>\n      <p class=\"section-sub\" style=\"text-align: center; margin: 0 auto 40px;\">\n        Receive a comprehensive production estimate, timeline, and team proposal within 24\u201348 hours.\n      <\/p>\n\n      <div class=\"lead-form-box\">\n        <form id=\"leadForm\" onsubmit=\"handleFormSubmit(event)\">\n          <div class=\"form-grid-2\">\n            <div class=\"form-group\">\n              <label for=\"clientName\">Your Name *<\/label>\n              <input type=\"text\" class=\"form-control\" id=\"clientName\" placeholder=\"e.g., Alex Mercer\" required>\n            <\/div>\n            <div class=\"form-group\">\n              <label for=\"clientCompany\">Studio \/ Company Name<\/label>\n              <input type=\"text\" class=\"form-control\" id=\"clientCompany\" placeholder=\"e.g., Nexus Interactive\">\n            <\/div>\n          <\/div>\n\n          <div class=\"form-grid-2\">\n            <div class=\"form-group\">\n              <label for=\"clientEmail\">Email Address *<\/label>\n              <input type=\"email\" class=\"form-control\" id=\"clientEmail\" placeholder=\"e.g., alex@nexusgame.com\" required>\n            <\/div>\n            <div class=\"form-group\">\n              <label for=\"clientGenre\">Game Genre &#038; Platform<\/label>\n              <input type=\"text\" class=\"form-control\" id=\"clientGenre\" placeholder=\"e.g., Sci-Fi RPG \/ PC &#038; PS5\">\n            <\/div>\n          <\/div>\n\n          <div class=\"form-grid-2\">\n            <div class=\"form-group\">\n              <label for=\"clientServices\">Required Services<\/label>\n              <select class=\"form-control\" id=\"clientServices\">\n                <option value=\"3D Game Art &#038; Characters\">3D Game Art &#038; Characters<\/option>\n                <option value=\"2D Concept &#038; Spine Art\">2D Concept &#038; Spine Art<\/option>\n                <option value=\"Modular 3D Environments\">Modular 3D Environments<\/option>\n                <option value=\"Game UI\/UX &#038; Icons\">Game UI\/UX &#038; Icons<\/option>\n                <option value=\"VFX &#038; Technical Art\">VFX &#038; Technical Art<\/option>\n                <option value=\"Full-Cycle Game Development\">Full-Cycle Game Development<\/option>\n                <option value=\"Dedicated Art Team Pod\">Dedicated Art Team Pod<\/option>\n              <\/select>\n            <\/div>\n            <div class=\"form-group\">\n              <label for=\"clientDeadline\">Target Deadline \/ Release Window<\/label>\n              <input type=\"text\" class=\"form-control\" id=\"clientDeadline\" placeholder=\"e.g., Q3 2027 or 3 months sprint\">\n            <\/div>\n          <\/div>\n\n          <div class=\"form-group\">\n            <label for=\"clientBrief\">Project Overview, Asset Volume &#038; Style References<\/label>\n            <textarea class=\"form-control\" id=\"clientBrief\" placeholder=\"Describe your game concept, asset count, preferred art style (stylized, PBR, pixel art), engine, and link to GDD\/moodboards...\"><\/textarea>\n          <\/div>\n\n          <button type=\"submit\" class=\"btn-primary\" style=\"width: 100%; justify-content: center; padding: 16px; font-size: 1.05rem;\">\n            SEND PROJECT TO GAMEARTOUTSOURCE \u2709\n          <\/button>\n          \n          <div style=\"text-align: center; margin-top: 14px; font-size: 0.8rem; color: var(--text-muted);\">\n            Direct Email: <a href=\"mailto:info@gameartoutsource.co.uk\">info@gameartoutsource.co.uk<\/a> \u2022 Strict NDA Guarantee\n          <\/div>\n        <\/form>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- SECTION 75: RICH FOOTER & SEO CLUSTER DIRECTORY -->\n  <footer class=\"site-footer\">\n    <div class=\"container\">\n      <div class=\"footer-grid\">\n        <div class=\"footer-col\">\n          <div class=\"brand-logo\" style=\"margin-bottom: 14px;\">\n            <span class=\"badge\">GAMEARTOUTSOURCE<\/span>.CO.UK\n          <\/div>\n          <p style=\"font-size:0.85rem; color:var(--text-muted); line-height:1.7; margin-bottom: 16px;\">\n            Complete game art outsourcing and full-cycle co-development for international game publishers, AAA teams, and ambitious indie studios worldwide.\n          <\/p>\n          <div style=\"font-size: 0.85rem; color: #fff;\">\n            <strong>Email:<\/strong> <a href=\"mailto:info@gameartoutsource.co.uk\">info@gameartoutsource.co.uk<\/a>\n          <\/div>\n        <\/div>\n\n        <div class=\"footer-col\">\n          <h4>2D &#038; 3D ART<\/h4>\n          <ul class=\"footer-links\">\n            <li><a href=\"#services-2d\">2D Character Concepts<\/a><\/li>\n            <li><a href=\"#services-3d\">3D Character Modeling<\/a><\/li>\n            <li><a href=\"#services-3d\">Modular Environments<\/a><\/li>\n            <li><a href=\"#services-3d\">Weapon &#038; Vehicle Art<\/a><\/li>\n            <li><a href=\"#services-3d\">Hard-Surface &#038; Props<\/a><\/li>\n            <li><a href=\"#casual-mobile\">Pixel &#038; Isometric Art<\/a><\/li>\n          <\/ul>\n        <\/div>\n\n        <div class=\"footer-col\">\n          <h4>TECH ART &#038; MOTION<\/h4>\n          <ul class=\"footer-links\">\n            <li><a href=\"#animation-rigging\">Spine 2D Animation<\/a><\/li>\n            <li><a href=\"#animation-rigging\">Live2D Rigging<\/a><\/li>\n            <li><a href=\"#animation-rigging\">3D Rigging &#038; Mocap<\/a><\/li>\n            <li><a href=\"#vfx-section\">Niagara &#038; Unity VFX<\/a><\/li>\n            <li><a href=\"#vfx-section\">Custom HLSL Shaders<\/a><\/li>\n            <li><a href=\"#engine-dev\">Engine Optimization<\/a><\/li>\n          <\/ul>\n        <\/div>\n\n        <div class=\"footer-col\">\n          <h4>DEVELOPMENT<\/h4>\n          <ul class=\"footer-links\">\n            <li><a href=\"#engine-dev\">Unity Game Production<\/a><\/li>\n            <li><a href=\"#engine-dev\">Unreal Engine 5 Co-Dev<\/a><\/li>\n            <li><a href=\"#dedicated-teams\">Dedicated Art Pods<\/a><\/li>\n            <li><a href=\"#ui-ux\">Game UI\/UX Systems<\/a><\/li>\n            <li><a href=\"#casual-mobile\">Mobile Asset Scaling<\/a><\/li>\n            <li><a href=\"#workflow\">NDA &#038; IP Security<\/a><\/li>\n          <\/ul>\n        <\/div>\n\n        <div class=\"footer-col\">\n          <h4>GLOBAL HUBS &#038; REGIONS<\/h4>\n          <p style=\"font-size:0.8rem; color:var(--text-muted); line-height: 1.6;\">\n            Serving studio partners across the United Kingdom, United States, Canada, Germany, France, Spain, Japan, South Korea, Singapore, and MENA regions.\n          <\/p>\n        <\/div>\n      <\/div>\n\n      <div class=\"footer-bottom\">\n        <div>\u00a9 2026 Gameartoutsourcestudio (gameartoutsource.co.uk). All rights reserved.<\/div>\n        <div>Built for high-performance PC, Console, Mobile, and VR\/AR production pipelines.<\/div>\n      <\/div>\n    <\/div>\n  <\/footer>\n\n  <!-- Interactive JavaScript Engine -->\n  <script>\n    \/\/ State variables\n    let currentCurrency = 'EUR';\n    const EUR_TO_USD = 1.17;\n\n    \/\/ Currency Switcher\n    function setCurrency(curr) {\n      currentCurrency = curr;\n      document.getElementById('currEUR').classList.toggle('active', curr === 'EUR');\n      document.getElementById('currUSD').classList.toggle('active', curr === 'USD');\n      calculateBudget();\n    }\n\n    \/\/ Dynamic Price Calculator Function\n    function calculateBudget() {\n      const serviceSelect = document.getElementById('calcService');\n      const serviceValue = serviceSelect.value;\n      const [baseMinEUR, baseMaxEUR] = serviceValue.split(',').map(Number);\n      \n      const qtyInput = document.getElementById('calcQty');\n      let qty = parseInt(qtyInput.value) || 1;\n      if (qty < 1) qty = 1;\n\n      const complexityFactor = parseFloat(document.getElementById('calcComplexity').value);\n      const platformFactor = parseFloat(document.getElementById('calcPlatform').value);\n      const deadlineFactor = parseFloat(document.getElementById('calcDeadline').value);\n\n      \/\/ Volume discount curve: larger batches reduce average unit cost slightly\n      let volumeDiscount = 1.0;\n      if (qty >= 10 && qty < 50) volumeDiscount = 0.95;\n      else if (qty >= 50 && qty < 100) volumeDiscount = 0.90;\n      else if (qty >= 100) volumeDiscount = 0.85;\n\n      const finalMinEUR = Math.round(baseMinEUR * qty * complexityFactor * platformFactor * deadlineFactor * volumeDiscount);\n      const finalMaxEUR = Math.round(baseMaxEUR * qty * complexityFactor * platformFactor * deadlineFactor * volumeDiscount);\n\n      const symbol = currentCurrency === 'EUR' ? '\u20ac' : '$';\n      const rate = currentCurrency === 'EUR' ? 1.0 : EUR_TO_USD;\n\n      const displayMin = Math.round(finalMinEUR * rate).toLocaleString();\n      const displayMax = Math.round(finalMaxEUR * rate).toLocaleString();\n\n      document.getElementById('calcDisplay').innerText = `${symbol}${displayMin} \u2013 ${symbol}${displayMax}`;\n\n      \/\/ Update mailto dynamic CTA link\n      const selectedOption = serviceSelect.options[serviceSelect.selectedIndex];\n      const serviceName = selectedOption.getAttribute('data-name');\n      const complexityText = document.getElementById('calcComplexity').options[document.getElementById('calcComplexity').selectedIndex].text;\n      const platformText = document.getElementById('calcPlatform').options[document.getElementById('calcPlatform').selectedIndex].text;\n      const deadlineText = document.getElementById('calcDeadline').options[document.getElementById('calcDeadline').selectedIndex].text;\n\n      const subject = encodeURIComponent(\"Game Art Outsourcing Quote Request\");\n      const body = encodeURIComponent(\n`Hello Gameartoutsourcestudio,\n\nI would like to request an official quotation for game art outsourcing services.\n\nService: ${serviceName}\nQuantity: ${qty}\nComplexity: ${complexityText}\nPlatform: ${platformText}\nProduction Schedule: ${deadlineText}\nCalculated Indicative Budget: ${symbol}${displayMin} - ${symbol}${displayMax} (${currentCurrency})\n\nPlease review my requirements and advise on availability and next steps.\n\nBest regards,`\n      );\n\n      document.getElementById('quoteMailBtn').href = `mailto:info@gameartoutsource.co.uk?subject=${subject}&body=${body}`;\n    }\n\n    \/\/ Portfolio Filter Tab Switcher\n    function filterPortfolio(category) {\n      const buttons = document.querySelectorAll('.portfolio-filters .filter-btn');\n      buttons.forEach(btn => btn.classList.remove('active'));\n      event.target.classList.add('active');\n\n      const cards = document.querySelectorAll('#portfolioGrid .portfolio-card');\n      cards.forEach(card => {\n        if (category === 'all' || card.getAttribute('data-cat') === category) {\n          card.style.display = 'block';\n        } else {\n          card.style.display = 'none';\n        }\n      });\n    }\n\n    \/\/ Accordion Toggle Handler\n    document.querySelectorAll('.faq-question').forEach(item => {\n      item.addEventListener('click', () => {\n        const parent = item.parentElement;\n        parent.classList.toggle('active');\n      });\n    });\n\n    \/\/ Lead Form Handler\n    function handleFormSubmit(e) {\n      e.preventDefault();\n      const name = document.getElementById('clientName').value;\n      const company = document.getElementById('clientCompany').value;\n      const email = document.getElementById('clientEmail').value;\n      const genre = document.getElementById('clientGenre').value;\n      const service = document.getElementById('clientServices').value;\n      const deadline = document.getElementById('clientDeadline').value;\n      const brief = document.getElementById('clientBrief').value;\n\n      const subject = encodeURIComponent(`Project Brief: ${name} (${company || 'Studio'})`);\n      const body = encodeURIComponent(\n`Hello Gameartoutsourcestudio,\n\nWe would like to submit our game project brief for review:\n\nContact Name: ${name}\nCompany \/ Studio: ${company}\nEmail: ${email}\nGame Genre & Platform: ${genre}\nPrimary Service: ${service}\nTarget Deadline: ${deadline}\n\nProject Brief & Asset Scope:\n${brief}\n\nPlease confirm receipt and let us know when we can schedule a project kickoff review.\n\nBest regards,\n${name}`\n      );\n\n      window.location.href = `mailto:info@gameartoutsource.co.uk?subject=${subject}&body=${body}`;\n    }\n\n    \/\/ Initialize on page load\n    window.addEventListener('DOMContentLoaded', () => {\n      calculateBudget();\n    });\n  <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Game Art Outsourcing Services | 2D &#038; 3D Game Art, Animation, VFX, UI\/UX &#038; Game Development GAMEARTOUTSOURCE.CO.UK 2D Game Art [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-98","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"trp-custom-language-flag":false},"uagb_author_info":{"display_name":"wangjianchen02@gmail.com","author_link":"https:\/\/gameartoutsource.co.uk\/sv\/author\/wangjianchen02gmail-com\/"},"uagb_comment_info":0,"uagb_excerpt":"Game Art Outsourcing Services | 2D &#038; 3D Game Art, Animation, VFX, UI\/UX &#038; Game Development GAMEARTOUTSOURCE.CO.UK 2D Game Art [&hellip;]","_links":{"self":[{"href":"https:\/\/gameartoutsource.co.uk\/sv\/wp-json\/wp\/v2\/pages\/98","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gameartoutsource.co.uk\/sv\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gameartoutsource.co.uk\/sv\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gameartoutsource.co.uk\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gameartoutsource.co.uk\/sv\/wp-json\/wp\/v2\/comments?post=98"}],"version-history":[{"count":2,"href":"https:\/\/gameartoutsource.co.uk\/sv\/wp-json\/wp\/v2\/pages\/98\/revisions"}],"predecessor-version":[{"id":102,"href":"https:\/\/gameartoutsource.co.uk\/sv\/wp-json\/wp\/v2\/pages\/98\/revisions\/102"}],"wp:attachment":[{"href":"https:\/\/gameartoutsource.co.uk\/sv\/wp-json\/wp\/v2\/media?parent=98"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}