/* Intro: preserve the complete portrait video and the approved slight tilt. */
.hero { display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); align-items: center; max-width: 1240px; margin: 0 auto; padding: 30px clamp(24px,4vw,60px) 55px; gap: clamp(12px,1.5vw,20px); min-height: calc(100svh - 145px); overflow: visible; }
.hero-copy { position: relative; z-index: 1; width: 100%; max-width: 620px; padding-right: 8px; text-align: center; justify-self: end; }
.hero h1 { font: 600 clamp(42px,4.2vw,66px)/1.02 var(--sans); letter-spacing: -.045em; margin: 22px 0; }
.hero h1 em { font: inherit; color: var(--peach); }
.hero-text { max-width: 490px; margin: 24px auto; color: #f0eee6; font-size: 18px; line-height: 1.75; }
.hero-buttons { display: flex; justify-content: center; }
.hero-visual { position: relative; width: 100%; max-width: 720px; height: clamp(620px,90svh,980px); justify-self: start; transform: rotate(3.5deg) scale(.96); isolation: isolate; }
.hero-video-backdrop { position: absolute; top: -8%; left: -35%; width: 170%; max-width: none; height: 116%; object-fit: cover; filter: blur(40px); opacity: .9; pointer-events: none; z-index: 0; mask-image: radial-gradient(ellipse at center,#000 48%,transparent 76%); }
.hero-video { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; background: transparent; mask-image: linear-gradient(to right,transparent var(--video-inset-x,0px),#000 calc(var(--video-inset-x,0px) + 28px),#000 calc(100% - var(--video-inset-x,0px) - 28px),transparent calc(100% - var(--video-inset-x,0px))),linear-gradient(to bottom,transparent var(--video-inset-y,0px),#000 calc(var(--video-inset-y,0px) + 36px),#000 calc(100% - var(--video-inset-y,0px) - 36px),transparent calc(100% - var(--video-inset-y,0px))); mask-composite: intersect; }
.intro-controls { position: absolute; right: 3%; bottom: 22px; display: flex; justify-content: center; gap: 8px; z-index: 2; transform: rotate(-2deg); }
.intro-controls button { border: 1px solid #ffffff35; border-radius: 30px; padding: 12px 18px; background: #343b40eb; color: var(--paper); font-size: 15px; line-height: 1.45; }
.intro-controls .card-sound { background: var(--yellow); color: var(--dark); }
@media(max-width:1100px) { .hero { gap: 14px; } .hero-visual { max-width: 660px; height: clamp(580px,86svh,900px); } }
@media(max-width:760px) {
  .hero { grid-template-columns: 1fr; padding: 30px 5% 35px; gap: 20px; min-height: 0; }
  .hero-copy { justify-self: center; padding: 0; }
  .hero h1 { font-size: 48px; }
  .hero-text { font-size: 17px; }
  .hero-visual { justify-self: center; max-width: 620px; min-height: 360px; max-height: 610px; height: clamp(500px,82svh,820px); transform: rotate(3deg) scale(.96); }
  .intro-controls { bottom: 10px; } .intro-controls button { font-size: 13px; padding: 11px 13px; }
}