<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 620" role="img" aria-label="Line-art illustration of certified personal protective equipment: safety helmet, full-face respirator, protective gloves, safety boots, hearing protection and eye protection">
  <defs>
    <linearGradient id="pg1" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#F4F9FC"/><stop offset="1" stop-color="#DCE9F2"/>
    </linearGradient>
    <linearGradient id="pg2" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#00A2A4"/><stop offset="1" stop-color="#00696B"/>
    </linearGradient>
    <linearGradient id="pg3" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#1E6EA6"/><stop offset="1" stop-color="#01325D"/>
    </linearGradient>
  </defs>

  <!-- faint layout grid -->
  <g stroke="#B9D2E4" stroke-width="1" opacity=".35">
    <line x1="300" y1="40" x2="300" y2="580"/>
    <line x1="600" y1="40" x2="600" y2="580"/>
    <line x1="40" y1="310" x2="860" y2="310"/>
  </g>

  <g stroke="#0B4E80" stroke-width="2.2" stroke-linejoin="round" stroke-linecap="round" fill="none">

    <!-- ============ 1. SAFETY HELMET ============ -->
    <g transform="translate(60,90)">
      <path d="M18 96 q0 -78 71 -78 t71 78" fill="url(#pg2)" stroke="#00696B"/>
      <path d="M62 22 q27 -10 54 0" stroke="#FFFFFF" stroke-width="2.6" opacity=".75"/>
      <path d="M89 18 v78" stroke="#FFFFFF" stroke-width="2.4" opacity=".55"/>
      <rect x="4" y="96" width="170" height="17" rx="8" fill="url(#pg1)"/>
      <path d="M40 96 v17M138 96 v17" opacity=".5"/>
      <!-- chin strap -->
      <path d="M22 108 q-10 30 20 40M156 108 q10 30 -20 40" stroke="#0B4E80" stroke-width="2"/>
      <rect x="76" y="140" width="26" height="12" rx="3" fill="url(#pg1)"/>
    </g>

    <!-- ============ 2. FULL-FACE RESPIRATOR ============ -->
    <g transform="translate(350,80)">
      <path d="M100 8 q76 0 76 74 q0 62 -76 84 q-76 -22 -76 -84 q0 -74 76 -74Z" fill="url(#pg1)"/>
      <!-- visor -->
      <path d="M100 26 q56 0 56 50 q0 16 -8 26 l-96 0 q-8 -10 -8 -26 q0 -50 56 -50Z"
            fill="url(#pg3)" opacity=".9"/>
      <path d="M62 44 q26 -12 52 0" stroke="#7FC4C5" stroke-width="2.4" opacity=".7"/>
      <!-- exhale valve -->
      <circle cx="100" cy="128" r="18" fill="url(#pg2)" stroke="#00696B"/>
      <path d="M92 128 h16M100 120 v16" stroke="#FFFFFF" stroke-width="2.2"/>
      <!-- cartridges -->
      <ellipse cx="46" cy="120" rx="20" ry="15" fill="url(#pg1)"/>
      <ellipse cx="154" cy="120" rx="20" ry="15" fill="url(#pg1)"/>
      <path d="M32 120 h28M140 120 h28" opacity=".45"/>
      <!-- head harness -->
      <path d="M26 70 q-18 26 -6 58M174 70 q18 26 6 58" stroke-width="2"/>
    </g>

    <!-- ============ 3. EYE PROTECTION ============ -->
    <g transform="translate(660,110)">
      <path d="M8 34 q66 -22 132 0 q6 26 -14 34 q-30 10 -46 -14 q-6 -8 -12 0 q-16 24 -46 14 q-20 -8 -14 -34Z"
            fill="url(#pg3)" opacity=".92"/>
      <path d="M8 34 q66 -22 132 0" stroke="#7FC4C5" stroke-width="2.4"/>
      <path d="M0 30 q-14 6 -16 26M148 30 q14 6 16 26" stroke-width="2"/>
      <path d="M30 44 q22 -8 42 0" stroke="#7FC4C5" stroke-width="2" opacity=".55"/>
    </g>

    <!-- ============ 4. HEARING PROTECTION ============ -->
    <g transform="translate(660,290)">
      <path d="M20 74 q0 -66 54 -66 t54 66" stroke-width="2.6"/>
      <rect x="2" y="70" width="38" height="62" rx="16" fill="url(#pg2)" stroke="#00696B"/>
      <rect x="108" y="70" width="38" height="62" rx="16" fill="url(#pg2)" stroke="#00696B"/>
      <rect x="10" y="82" width="22" height="38" rx="10" fill="#FFFFFF" opacity=".35" stroke="none"/>
      <rect x="116" y="82" width="22" height="38" rx="10" fill="#FFFFFF" opacity=".35" stroke="none"/>
    </g>

    <!-- ============ 5. PROTECTIVE GLOVES ============ -->
    <g transform="translate(70,330)">
      <path d="M30 132 v-52 q0 -12 12 -12 t12 12 v-34 q0 -12 12 -12 t12 12 v-14 q0 -12 12 -12 t12 12 v14
               q0 -10 11 -10 t11 12 v76 q0 34 -34 34 h-26 q-34 0 -34 -30Z" fill="url(#pg1)"/>
      <path d="M54 80 v34M78 46 v54M102 46 v54" opacity=".45"/>
      <rect x="26" y="132" width="98" height="20" rx="7" fill="url(#pg2)" stroke="#00696B"/>
      <!-- second glove, offset behind -->
      <path d="M150 152 v-46 q0 -11 11 -11 t11 11 v-30 q0 -11 11 -11 t11 11 v-12 q0 -11 11 -11 t11 11 v12
               q0 -9 10 -9 t10 11 v68 q0 30 -30 30 h-24 q-32 0 -32 -24Z"
            fill="url(#pg1)" opacity=".85"/>
      <rect x="146" y="152" width="90" height="18" rx="7" fill="url(#pg2)" stroke="#00696B" opacity=".85"/>
    </g>

    <!-- ============ 6. SAFETY BOOT ============ -->
    <g transform="translate(370,330)">
      <path d="M40 30 h50 q10 0 12 12 l8 46 q4 20 26 30 l38 18 q14 6 14 22 v14 h-172 q-8 0 -8 -8 v-118
               q0 -16 16 -16Z" fill="url(#pg1)"/>
      <path d="M24 118 h150" opacity=".45"/>
      <path d="M16 158 h172 v14 h-172Z" fill="url(#pg3)" stroke="#01325D"/>
      <!-- steel toe cap indicator -->
      <path d="M116 118 q28 12 40 34" stroke="#00A2A4" stroke-width="2.6"/>
      <!-- laces -->
      <path d="M50 46 h40M50 62 h40M50 78 h40" stroke="#0B4E80" stroke-width="2" opacity=".6"/>
      <circle cx="132" cy="150" r="7" fill="url(#pg2)" stroke="#00696B"/>
    </g>

  </g>

  <!-- ============ certification marks ============ -->
  <g font-family="'Sora',system-ui,sans-serif" font-size="12" fill="#01325D" letter-spacing="1.8">
    <text x="60" y="272">HEAD PROTECTION</text>
    <text x="350" y="272">RESPIRATORY</text>
    <text x="660" y="272">EYE PROTECTION</text>
    <text x="70" y="552">HAND PROTECTION</text>
    <text x="370" y="552">FOOT PROTECTION</text>
    <text x="660" y="552">HEARING</text>
  </g>
  <g stroke="#00898B" stroke-width="1.6" opacity=".8">
    <line x1="60" y1="252" x2="180" y2="252"/>
    <line x1="350" y1="252" x2="450" y2="252"/>
    <line x1="660" y1="252" x2="780" y2="252"/>
    <line x1="70" y1="532" x2="190" y2="532"/>
    <line x1="370" y1="532" x2="490" y2="532"/>
    <line x1="660" y1="532" x2="740" y2="532"/>
  </g>
</svg>
