.logo-stage-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 60vh;
    padding: 40px 20px;
    background: #ffffff;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }
.logo-stage-outer {
    position: relative;
    width: 380px;
    max-width: 100%;
    height: 200px;
  }
  .logo-stage {
    position: absolute;
  top: 50%;
  left: 50%;
  width: 380px;
  height: 200px;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  }

  /* Each ring: outer div handles POSITION (left/top fixed at final
     grid slot, transform handles the entrance offset/travel).
     This keeps position math simple and keeps the pulse animation
     on a separate inner element so the two transforms never fight. */
  .ring {
    position: absolute;
    width: 70px;
    height: 70px;
    opacity: 0;
    transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1),
                opacity 500ms ease-out;
  }

  .ring.is-visible {
    opacity: 1;
  }

  .ring.in-place {
    transform: translate(0, 0) scale(1) !important;
  }

  /* Final grid slots (row 1: rings 1-4, row 2: rings 5-8) */
  #ring1 { left: 20px;  top: 20px;  }
  #ring2 { left: 110px; top: 20px;  }
  #ring3 { left: 200px; top: 20px;  }
  #ring4 { left: 290px; top: 20px;  }
  #ring5 { left: 20px;  top: 110px; }
  #ring6 { left: 110px; top: 110px; }
  #ring7 { left: 200px; top: 110px; }
  #ring8 { left: 290px; top: 110px; }

  /* Hero ring starts centered in the stage and slightly larger.
     Center of stage minus half hero size (90/2=45):
     stage 380x200 -> center (190,100) -> (190-45, 100-45) = (145,55)
     Offset from ring1 final slot (20,20): dx=125, dy=35 */
  #ring1 {
    transform: translate(125px, 35px) scale(1.28);
  }

  /* Rings 2-4 start stacked at ring1's slot (20,20) and separate
     to the right. Offset = ring1_x - own_final_x, dy = 0 */
  #ring2 { transform: translate(-90px, 0) scale(1); }
  #ring3 { transform: translate(-180px, 0) scale(1); }
  #ring4 { transform: translate(-270px, 0) scale(1); }

  /* Rings 5-8 start directly above their own slot (row above),
     same x, dy = -90px (one row height) -> "falling" illusion */
  #ring5 { transform: translate(0, -90px) scale(1); }
  #ring6 { transform: translate(0, -90px) scale(1); }
  #ring7 { transform: translate(0, -90px) scale(1); }
  #ring8 { transform: translate(0, -90px) scale(1); }

  /* Inner pulse wrapper - infinite scale loop, independent of the
     outer positional transform */
  .ring-pulse {
    width: 100%;
    height: 100%;
    animation: ringPulse 1.3s ease-in-out infinite;
    transform-origin: 50% 50%;
  }

  .ring.settled .ring-pulse {
    animation: none;
    transform: scale(1);
  }

  @keyframes ringPulse {
    0%   { transform: scale(1);    }
    50%  { transform: scale(1.1);  }
    100% { transform: scale(1);    }
  }

  /* One-shot bigger pulse played right before settling */
  .ring.final-pulse .ring-pulse {
    animation: finalPulse 500ms ease-in-out 1;
  }

  @keyframes finalPulse {
    0%   { transform: scale(1);   }
    50%  { transform: scale(1.22);}
    100% { transform: scale(1);   }
  }

  /* Ring visual - plain circle outline, no images required */
  .ring-face {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 6px solid #000;
    box-sizing: border-box;
    background: transparent;
    transition: opacity 450ms ease, transform 450ms ease;
  }

  /* Letter overlay - hidden by default, crossfades in for B / C.
     Uses the uploaded logo images instead of text characters. */
  .ring-letter {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 500ms ease, transform 500ms ease;
  }

  /* Every ring (both rows) uses this exact same image box size,
     so B and C read at identical scale to the plain ring circles */
  .ring-letter img {
    object-fit: contain;
    display: block;
  }

  .ring.is-letter .ring-face {
    opacity: 0;
    transform: scale(0.7);
  }

  .ring.is-letter .ring-letter {
    opacity: 1;
    transform: scale(1);
  }

  #ring2 .ring-letter,#ring7 .ring-letter {
  overflow: visible; /* let the bigger image extend past the 70px ring box */
}

#ring2 .ring-letter img,
#ring7 .ring-letter img{
  width: 120px;   /* up from 70px - tweak until it visually matches */
 height: 112px;
}
 #ring2 .ring-letter img {
    margin-top: -9px;
  }

 /* Tablet */
  @media (max-width: 600px) {
    .logo-stage-outer { height: 150px; } /* 200 * 0.75 */
    .logo-stage { transform: translateX(-50%) scale(0.75); }
  }
 
  /* Phone */
  @media (max-width: 420px) {
    .logo-stage-outer { height: 116px; } /* 200 * 0.58 */
    .logo-stage { transform: translateX(-50%) scale(0.58); }
  }
 
  /* Small phone */
  @media (max-width: 340px) {
    .logo-stage-outer { height: 96px; } /* 200 * 0.48 */
    .logo-stage { transform: translateX(-50%) scale(0.48); }
  }