diff --git a/src/routes/events/[event_id]/(badges)/badges/[badge_id]/ae_comp__badge_obj_view.svelte b/src/routes/events/[event_id]/(badges)/badges/[badge_id]/ae_comp__badge_obj_view.svelte
index 514bd530..3c4b2d9b 100644
--- a/src/routes/events/[event_id]/(badges)/badges/[badge_id]/ae_comp__badge_obj_view.svelte
+++ b/src/routes/events/[event_id]/(badges)/badges/[badge_id]/ae_comp__badge_obj_view.svelte
@@ -670,37 +670,40 @@ const code_to_icon: {
 
             <!-- Punch-out hole markers: X overlays at physical badge clip slot positions.
                  Slots: 5/8in wide × 1/8in tall, 1/4in from top, 3/8in from left/right edges.
-                 Center slot: horizontally centered. Markers print so attendees know to push them out. -->
+                 Center slot: horizontally centered. Markers print so attendees know to push them out.
+                 z-index: 10 keeps markers above the header image regardless of DOM order.
+                 Inset ~1mm on all sides from the physical hole boundary — safety margin for printer
+                 registration variance (slots are only 3mm tall, registration matters). -->
             {#if punch_holes_left}
                 <div class="punch_hole_marker pointer-events-none absolute"
                      aria-hidden="true"
-                     style="top: 0.25in; left: 0.375in; width: 0.625in; height: 0.125in;">
-                    <svg width="100%" height="100%" viewBox="0 0 50 10" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
-                        <rect x="0.5" y="0.5" width="49" height="9" fill="rgba(255,255,255,0.4)" stroke="#777" stroke-width="1" stroke-dasharray="4,2"/>
-                        <line x1="0" y1="0" x2="50" y2="10" stroke="#777" stroke-width="1"/>
-                        <line x1="50" y1="0" x2="0" y2="10" stroke="#777" stroke-width="1"/>
+                     style="top: calc(0.25in + 1mm); left: calc(0.375in + 1mm); width: calc(0.625in - 2mm); height: calc(0.125in - 2mm); z-index: 10;">
+                    <svg width="100%" height="100%" viewBox="0 0 50 8" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
+                        <rect x="0.5" y="0.5" width="49" height="7" fill="rgba(255,255,255,0.4)" stroke="#777" stroke-width="1" stroke-dasharray="4,2"/>
+                        <line x1="0" y1="0" x2="50" y2="8" stroke="#777" stroke-width="1"/>
+                        <line x1="50" y1="0" x2="0" y2="8" stroke="#777" stroke-width="1"/>
                     </svg>
                 </div>
             {/if}
             {#if punch_holes_right}
                 <div class="punch_hole_marker pointer-events-none absolute"
                      aria-hidden="true"
-                     style="top: 0.25in; right: 0.375in; width: 0.625in; height: 0.125in;">
-                    <svg width="100%" height="100%" viewBox="0 0 50 10" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
-                        <rect x="0.5" y="0.5" width="49" height="9" fill="rgba(255,255,255,0.4)" stroke="#777" stroke-width="1" stroke-dasharray="4,2"/>
-                        <line x1="0" y1="0" x2="50" y2="10" stroke="#777" stroke-width="1"/>
-                        <line x1="50" y1="0" x2="0" y2="10" stroke="#777" stroke-width="1"/>
+                     style="top: calc(0.25in + 1mm); right: calc(0.375in + 1mm); width: calc(0.625in - 2mm); height: calc(0.125in - 2mm); z-index: 10;">
+                    <svg width="100%" height="100%" viewBox="0 0 50 8" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
+                        <rect x="0.5" y="0.5" width="49" height="7" fill="rgba(255,255,255,0.4)" stroke="#777" stroke-width="1" stroke-dasharray="4,2"/>
+                        <line x1="0" y1="0" x2="50" y2="8" stroke="#777" stroke-width="1"/>
+                        <line x1="50" y1="0" x2="0" y2="8" stroke="#777" stroke-width="1"/>
                     </svg>
                 </div>
             {/if}
             {#if punch_holes_center}
                 <div class="punch_hole_marker pointer-events-none absolute"
                      aria-hidden="true"
-                     style="top: 0.25in; left: 50%; transform: translateX(-50%); width: 0.625in; height: 0.125in;">
-                    <svg width="100%" height="100%" viewBox="0 0 50 10" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
-                        <rect x="0.5" y="0.5" width="49" height="9" fill="rgba(255,255,255,0.4)" stroke="#777" stroke-width="1" stroke-dasharray="4,2"/>
-                        <line x1="0" y1="0" x2="50" y2="10" stroke="#777" stroke-width="1"/>
-                        <line x1="50" y1="0" x2="0" y2="10" stroke="#777" stroke-width="1"/>
+                     style="top: calc(0.25in + 1mm); left: 50%; transform: translateX(-50%); width: calc(0.625in - 2mm); height: calc(0.125in - 2mm); z-index: 10;">
+                    <svg width="100%" height="100%" viewBox="0 0 50 8" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
+                        <rect x="0.5" y="0.5" width="49" height="7" fill="rgba(255,255,255,0.4)" stroke="#777" stroke-width="1" stroke-dasharray="4,2"/>
+                        <line x1="0" y1="0" x2="50" y2="8" stroke="#777" stroke-width="1"/>
+                        <line x1="50" y1="0" x2="0" y2="8" stroke="#777" stroke-width="1"/>
                     </svg>
                 </div>
             {/if}