/* ===== TEST: full-panel hero video behind the copy (dither mark off) ===== */
.hero-inner>.hero-vid{position:absolute;inset:-2.6rem -3rem;z-index:1;border-radius:32px;
  overflow:hidden;pointer-events:none;transform:translateZ(0)}
.hero-vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* scrim: keeps the copy readable, redraws the panel ring the video now covers */
.hero-vid::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(90deg,rgba(16,15,13,.78),rgba(16,15,13,.4) 50%,rgba(16,15,13,.1));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px rgba(138,158,255,.30)}
html[data-theme="light"] .hero-vid::after{
  background:linear-gradient(90deg,rgba(247,246,242,.88),rgba(247,246,242,.5) 52%,rgba(247,246,242,.1));
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(78,105,245,.22)}
/* mark hidden but keeps its box, so the panel keeps its original proportions */
.hero-mark{visibility:hidden}
/* phones: the invisible mark box just makes the panel a tall empty slab - drop it */
@media(max-width:680px){.hero-mark{display:none}}
/* balance: push the copy off the panel edge so text and mark share the space evenly */
.hero-copy{padding-left:clamp(1.25rem,3.2vw,3.75rem)}
@media(max-width:680px){.hero-copy{padding-left:0}}
@media(max-width:680px){
  .hero-inner>.hero-vid{inset:-1.4rem -1rem;border-radius:24px}
  /* phones: taller panel, copy pinned to the top, rotating glass mark below it */
  .hero{min-height:0;padding:5.75rem var(--gutter) 2.6rem}
  .hero-inner{min-height:min(84svh,800px);align-items:start;align-content:start}
  /* the glass mark lives at 67% x / 53% y of the source - with the copy up top,
     the mark reads as sitting under the text */
  .hero-vid video{height:118%;top:auto;bottom:-18%;object-position:73.2% 50%}
  /* full-width copy needs a vertical scrim, not the desktop left-to-right one */
  .hero-vid::after{background:linear-gradient(180deg,rgba(16,15,13,.74),rgba(16,15,13,.34) 58%,rgba(16,15,13,.46))}
  html[data-theme="light"] .hero-vid::after{background:linear-gradient(180deg,rgba(247,246,242,.82),rgba(247,246,242,.4) 58%,rgba(247,246,242,.5))}
}
@media (max-height:480px) and (orientation:landscape){
  .hero-inner>.hero-vid{inset:-1.1rem -1rem;border-radius:20px}
}
@media (prefers-reduced-motion: reduce){
  .hero-vid{display:none}
  .hero-mark{visibility:visible}
}