@media (orientation:portrait) and (max-width:720px) {
  .hero,.slides { height:100svh; min-height:100svh }
  .slides { inset:0; max-height:none }
  .slide img { object-fit:cover }
  .slide:nth-child(1) img { object-position:59% center }
  .slide:nth-child(2) img { object-position:49% center }
  .slide:nth-child(3) img { object-position:50% center }
  .slide:nth-child(4) img { object-position:50% center }
  .shade { background:linear-gradient(180deg,rgba(18,10,7,.38),transparent 28%,transparent 67%,rgba(18,10,7,.48)) }
  .content { position:absolute; inset:0; min-height:0; padding:0; display:block }
  .panel { position:absolute; top:78px; left:10px; width:62%; padding:12px 13px; border-radius:15px; background:rgba(40,25,17,.67); backdrop-filter:blur(7px) }
  .eyebrow { margin:0 0 7px; font-size:8px; letter-spacing:.11em }
  h1 { font-size:clamp(20px,6vw,28px); line-height:1.02 }
  .lead { margin:8px 0 0; font-size:11px; line-height:1.28 }
  .divider { display:none }
  .soon { margin-top:8px; font-size:10px; line-height:1.3 }
  .hero:has(.slide:nth-child(2).active) .panel { left:auto; right:10px; top:78px }
  .hero:has(.slide:nth-child(3).active) .panel { left:auto; right:10px; top:auto; bottom:12px }
  .hero:has(.slide:nth-child(4).active) .panel { left:10px; top:78px }
  .topbar { padding:14px 15px }
  .brand { font-size:26px }
}

@media (orientation:landscape) and (max-height:600px) {
  .hero,.slides { height:100svh; min-height:100svh }
  .slides { inset:0; max-height:none }
  .slide img { object-fit:cover }
  .slide:nth-child(1) img,.slide:nth-child(2) img,.slide:nth-child(4) img { object-position:center 48% }
  .slide:nth-child(3) img { object-position:center 45% }
  .shade { background:linear-gradient(90deg,rgba(18,10,7,.32),transparent 32%,transparent 70%,rgba(18,10,7,.22)) }
  .content { position:absolute; inset:0; min-height:0; padding:0; display:block }
  .panel { position:absolute; left:14px; top:66px; width:38%; padding:11px 13px; border-radius:14px; background:rgba(40,25,17,.66); backdrop-filter:blur(7px) }
  .eyebrow { margin:0 0 6px; font-size:8px; letter-spacing:.1em }
  h1 { font-size:clamp(19px,3.2vw,29px); line-height:1 }
  .lead { margin:7px 0 0; font-size:10px; line-height:1.22 }
  .divider { display:none }
  .soon { margin-top:7px; font-size:9px; line-height:1.25 }
  .hero:has(.slide:nth-child(2).active) .panel,.hero:has(.slide:nth-child(3).active) .panel { left:auto; right:14px }
  .hero:has(.slide:nth-child(4).active) .panel { left:14px; top:auto; bottom:10px }
  .topbar { padding:10px 14px }
  .brand { font-size:25px }
}