Illustrator SVG export tossing around path locations / rotations

Question

I'm trying to export a pretty simple icon I made in illustrator to svg for use on a webpage, but when I export it, two of the thick curved lines in my graphic are tossed off to the side and rotated away.

This is what it looks like in illustrator

And this is what is looks like exported

For reference here is what the anchor points for the paths look like in illustrator and I'll give a description below

The shape consists of 2 compound paths, each as a clipping mask to simple rectangles with a gradient for coloring:

1. the 3 lines in top right (as one compound path) This is just 3 paths with thick stroke that I used expand appearance on and made into compound path for clipping mask.

2. the phone object (with the disconnected speaker portions) This is more complicated but was built with shape builder tool, cut with some thick lines and made into compound path for clipping mask.

Things I have attempted to fix this:

1. expand appearance
2. make everything one compound path and put the clipping mask on all together with a less appealing gradient
3. use simplify tool on lines
4. increase decimal places on svg export
5. use "save as" instead of export artboard
6. search stackexchange for similar issues
7. wonder why I'm spending so much time on this
8. rethink my life choices

Code of svg file:

<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
  <defs>
    <style>
      .cls-1 {
        fill: url(#linear-gradient-2);
      }

      .cls-2 {
        clip-path: url(#clippath-1);
      }

      .cls-3 {
        clip-path: url(#clippath);
      }

      .cls-4 {
        fill: none;
      }

      .cls-5 {
        fill: url(#linear-gradient);
      }
    </style>
    <clipPath id="clippath">
      <path class="cls-4" d="m220.757,381.513l21.119-25.22,125.015,59.463c.571,4.622.715,9.35.423,14.081-.235,4.475-.849,8.999-1.861,13.5-.599,2.663-1.327,5.262-2.165,7.801l-142.53-69.626Zm-108.896-171.933l31.887-8.329-.238-138.436c-3.934-2.494-8.145-4.649-12.545-6.409-4.145-1.703-8.497-3.084-12.998-4.096-3.137-.705-6.27-1.199-9.391-1.531l3.285,158.8Zm98.074,184.856l-.015.019c-63.537-39.472-105.865-106.305-114.345-180.623l.007-.032h.001s-3.374-163.11-3.374-163.11c-34.254,3.278-64.04,28.089-71.999,63.492-39.639,176.325,71.16,351.388,247.485,391.027,35.891,8.069,71.557-8.786,88.929-39.116l-146.689-71.657Z"/>
    </clipPath>
    <linearGradient id="linear-gradient" x1="-61.788" y1="294.859" x2="531.414" y2="294.859" gradientTransform="translate(-28.517 .542) scale(.925 1)" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#2b559a"/>
      <stop offset=".263" stop-color="#2e74b4"/>
      <stop offset=".551" stop-color="#328fcb"/>
      <stop offset=".807" stop-color="#34a0d9"/>
      <stop offset="1" stop-color="#35a6de"/>
    </linearGradient>
    <clipPath id="clippath-1">
      <path class="cls-4" d="m274.818,108.322,93.449,169.235c-5.192-.831-8.728-5.714-7.897-10.906,9.54-59.617-31.201-115.882-90.818-125.423-5.192-.831-8.728-5.714-7.897-10.906s5.714-8.728,10.906-7.897c69.985,11.2,117.812,77.249,106.613,147.235-.831,5.192-5.714,8.728-10.906,7.897Zm54.035,8.647c-5.192-.831-8.728-5.714-7.897-10.906,14.308-89.412-46.793-173.795-136.206-188.103-5.192-.831-8.728-5.714-7.897-10.906.831-5.192,5.714-8.728,10.906-7.897,99.781,15.968,167.968,110.136,152.001,209.916-.831,5.192-5.714,8.728-10.906,7.897Zm-143.724-201.387,207.211,211.547c-5.192-.831-8.728-5.714-7.897-10.907,19.911-124.42-65.114-241.841-189.534-261.752-5.192-.831-8.728-5.714-7.897-10.906s5.714-8.728,10.906-7.897c134.788,21.57,226.898,148.776,205.328,283.564-.831,5.193-5.714,8.729-10.906,7.898Z"/>
    </clipPath>
    <linearGradient id="linear-gradient-2" x1="465.671" y1="347.081" x2="313.48" y2="-34.829" gradientTransform="matrix(1, 0, 0, 1, 0, 0)" xlink:href="#linear-gradient"/>
  </defs>
  <g class="cls-3">
    <rect class="cls-5" x="-85.68" y="-15.282" width="548.8" height="621.366" transform="translate(-15.833 580.068) rotate(-111.727)"/>
  </g>
  <g class="cls-2">
    <rect class="cls-1" x="239.366" y="-5.295" width="300.418" height="322.842"/>
  </g>
</svg>

EDIT: Solved, kinda. figured out a workaround. details of how i made these line the first time and the second time that worked below:

A - Broken method

1. create 3 circles with thick black stroke
2. make interecting lines with line tool at 90 deg ngle to give me intersecting anchor points
3. use scissor tool to cut circles to 1/4 circles at intersecting points
4. group lines
5. give stroke round cap
6. expand appearance
7. turn lines into compound path
8. put square with gradient behind lines
9. clipping mask compound path (lines) with gradient behind
10. export - broken file

B - working method

1. create 3 circles with thick black stroke
2. make interecting lines with line tool at 90 deg ngle to give me intersecting anchor points
3. use scissor tool to cut circles to 1/4 circles at intersecting points
4. give each line's stroke round cap individually
5. expand appearance on each line
6. put 3 identical squares with the same gradient on top of each other behind lines
7. clipping mask each line individually with it's own gradient square
8. export - svg file works

Answer 1

Solved, kinda. figured out a workaround. details of how i made these line the first time and the second time that worked below:

shoutout to @BillyKerr who pointed out excessive grouping was probably what caused the issue here.

A - Broken method

1. create 3 circles with thick black stroke
2. make interecting lines with line tool at 90 deg ngle to give me intersecting anchor points
3. use scissor tool to cut circles to 1/4 circles at intersecting points
4. group lines
5. give stroke round cap
6. expand appearance
7. turn lines into compound path
8. put square with gradient behind lines
9. clipping mask compound path (lines) with gradient behind
10. export - broken file

B - working method

1. create 3 circles with thick black stroke
2. make interecting lines with line tool at 90 deg ngle to give me intersecting anchor points
3. use scissor tool to cut circles to 1/4 circles at intersecting points
4. give each line's stroke round cap individually
5. expand appearance on each line
6. put 3 identical squares with the same gradient on top of each other behind lines
7. clipping mask each line individually with it's own gradient square
8. export - svg file works