/* Approved 2026-10-17 mobile cover: use the user's exact 9:16 artwork, uncropped.
   Semantic title remains in DOM; clickable controls align with printed CTA artwork. */
@media (max-width: 740px) {
  .hero {
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 9 / 16 !important;
    width: 100% !important;
    margin: 69px 0 0 !important;
    padding: 0 !important;
    background-color: #fff6ee !important;
    background-image: url('https://static.wixstatic.com/media/b90053_6b85dafc0842417d822e9320c6c70140~mv2.jpg') !important;
    background-position: center top !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    overflow: hidden !important;
  }
  .hero .hero-gold-sun { display:none !important; }
  .hero::after { content: none !important; }
  .hero::before {
    content: '' !important;
    display: block !important;
    z-index: 1 !important;
    position: absolute !important;
    inset: auto -5% 0 !important;
    width: 110% !important;
    height: 22% !important;
    background-image:
      radial-gradient(ellipse 19% 9% at 50% 40%, rgba(255,244,197,.65), transparent 77%),
      repeating-linear-gradient(96deg,transparent 0 56px,rgba(255,242,199,.12) 74px, transparent 111px),
      linear-gradient(90deg, transparent 23%,rgba(255,255,236,.15) 50%,transparent 73%) !important;
    background-size: 100% 100%, 155% 100%, 155% 100% !important;
    background-position: 0 0 !important;
    background-repeat: no-repeat !important;
    opacity: .42 !important;
    mix-blend-mode: screen !important;
    pointer-events: none !important;
    animation: kagura-surface-drift 13s ease-in-out infinite alternate !important;
    -webkit-mask-image: linear-gradient(transparent,black 28%,black) !important;
    mask-image: linear-gradient(transparent,black 28%,black) !important;
  }
  .hero .hero-inner {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 3 !important;
  }
  .hero .hero-copy {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .hero .hero-copy > :not(.cta) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  .hero .hero-copy .cta {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
  }
  .hero .hero-copy .cta .button,
  .hero .hero-copy .cta .button.fill {
    position: absolute !important;
    left: 21.55% !important;
    top: 56.30% !important;
    display: block !important;
    width: 56.9% !important;
    height: 5.15% !important;
    min-height: 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    color: transparent !important;
    opacity: 0 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    text-decoration: none !important;
    z-index: 5 !important;
    transform: none !important;
  }
  .hero .hero-copy .cta .button:last-child {
    top: 62.02% !important;
  }
  .hero .hero-copy .cta .button:focus-visible {
    opacity: 1 !important;
    background: rgba(255,255,255,.18) !important;
    outline: 3px solid #a36f38 !important;
    outline-offset: 2px !important;
  }
  .hero .hero-bottom { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .hero::before { animation: none !important; }
}