:root{
    --bg: #FFF7EF;        /* matches your site */
    --ink: #1B1B1B;
    --muted: #6B7280;
    --accent: #D70654;
    --card-bg: rgba(255,255,255,0.9);
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
    background: linear-gradient(135deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 92%, #FFF 100%) 100%);
    -webkit-font-smoothing:antialiased;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--ink);
  }

  /* container */
  .wrap {
    width:min(1100px, 96%);
    height:min(680px, 86vh);
    border-radius:18px;
    background:var(--card-bg);
    box-shadow: 0 30px 80px rgba(11,12,13,0.08);
    overflow: hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
  }

  /* center stage */
  .stage {
    width:100%;
    height:100%;
    display:grid;
    place-items:center;
    position:relative;
    padding:36px;
  }

  /* single scene layout: image above, text below */
  .scene {
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:20px;
    pointer-events:none;
    opacity:0;
    transform: translateY(12px) scale(.995);
  }

  .scene.in {
    opacity:1;
    transform: translateY(0) scale(1);
    transition: transform .50s cubic-bezier(.16,1,.3,1), opacity .45s ease;
  }

  .scene.out {
    opacity:0;
    transform: translateY(-8px) scale(.997);
    transition: transform .36s ease, opacity .36s ease;
  }

  /* image box */
  /* ===== Replace existing .img / .img img rules with this ===== */
.img {
  width: 100%;
  max-width: 1100px;        /* controls how wide the image area can grow */
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;  /* no inner "card" or background */
  box-shadow: none;         /* remove the framed box look */
  border-radius: 0;         /* full-bleed feel on the white background */
  overflow: visible;        /* IMPORTANT — allow the image to be visible, not clipped */
  padding: 0;
}

/* Use containment so transparent PNG shows fully and is never cropped */
.img img {
  width: auto;
  max-width: 85%;           /* scale to fit nicely on larger screens */
  height: auto;
  max-height: 60vh;         /* prevents giant images from overflowing vertically */
  object-fit: contain;      /* do not crop — maintain full image */
  object-position: center;
  transform: none;          /* remove any translateY/nudge that caused crop illusion */
  transition: transform .6s cubic-bezier(.2,.9,.2,1), opacity .4s ease;
  display: block;
}

/* Mobile tweak */
@media (max-width:880px){
  .img img { max-width: 92%; max-height: 50vh; }
}


  /* text */
  .label {
    font-weight:700;
    font-size: clamp(20px, 3.6vw, 28px);
    color:var(--ink);
    text-align:center;
    letter-spacing: 0.01em;
    pointer-events:auto;
  }
  .sub { color:var(--muted); font-weight:500; margin-top:4px; font-size:14px; text-align:center; max-width:56ch; }

  /* progress strip at bottom */
  .progress-wrap {
    position:absolute;
    left:24px;
    right:24px;
    bottom:20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    z-index:6;
  }
  .progress {
    flex:1;
    height:8px;
    background: rgba(11,12,13,0.06);
    border-radius:999px;
    overflow:hidden;
  }
  .progress > i {
    display:block;
    height:100%;
    width:0%;
    background: linear-gradient(90deg, var(--accent) 0%, #FFD166 60%);
    transition: width .18s linear;
  }

  .enter {
    margin-left:12px;
    background:var(--accent);
    color:white;
    border:0;
    padding:8px 12px;
    border-radius:10px;
    font-weight:700;
    box-shadow:0 10px 26px rgba(215,6,84,0.16);
    cursor:pointer;
  }

  /* skip link for accessibility */
  .skip {
    position:absolute;
    top:14px;
    left:18px;
    font-size:13px;
    color:var(--muted);
    text-decoration:none;
    z-index:8;
  }

  /* minimal responsive */
  @media (max-width:880px){
    .img { width:88%; aspect-ratio: 4/3; }
    .wrap { height:auto; min-height:520px; padding:24px 12px; }
    .progress-wrap { left:12px; right:12px; bottom:14px; }
  }

  /* reduced motion: skip animation quickly */
  @media (prefers-reduced-motion: reduce){
    .scene { transition:none !important; transform:none !important; }
  }