/* ============================================================
   VIDEO EDITING section (#video-work), below Work on the homepage.
   Standalone file so the live styles.css / theme-2026.css stay untouched.
   Uses the 2026 light tokens: navy = light surfaces, cream = dark ink.
   ============================================================ */
.reels{background:var(--navy-2);padding:120px var(--pad) 110px;border-top:1px solid rgba(16,27,38,.08);}
.reels__head .display{font-size:clamp(2rem,4vw,3rem);line-height:1.05;}
.reels__grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,340px));justify-content:center;
  gap:clamp(28px,6vw,96px);max-width:var(--maxw);margin:64px auto 0;
}
.reel:nth-child(2){margin-top:72px;}

/* phone-style frame: dark bezel reads well on the light page */
.reel__frame{
  position:relative;aspect-ratio:9/16;border-radius:26px;overflow:hidden;
  background:var(--ink-hard,#080909);border:7px solid #0B131C;
  box-shadow:0 40px 70px -30px rgba(16,27,38,.45),0 12px 24px -12px rgba(16,27,38,.25);
}
.reel__video{display:block;width:100%;height:100%;object-fit:cover;background:var(--ink-hard,#080909);}

.reel__play{
  position:absolute;inset:0;border:0;padding:0 0 18% 0;margin:0;
  display:flex;align-items:flex-end;justify-content:center;
  background:linear-gradient(180deg,rgba(5,5,5,0) 50%,rgba(5,5,5,.55) 100%);
  transition:opacity .4s var(--ease);cursor:pointer;
}
/* white pill play button, matching the hero CTA */
.reel__btn{
  display:inline-flex;align-items:center;gap:10px;
  background:#fff;color:#080909;border-radius:999px;padding:13px 22px 13px 18px;
  font-family:var(--ui,'Manrope',system-ui,sans-serif);font-weight:700;font-size:14px;letter-spacing:.2px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .5s var(--ease),box-shadow .3s;
}
.reel__btn::before{
  content:"";width:0;height:0;border-style:solid;border-width:7px 0 7px 11px;
  border-color:transparent transparent transparent #080909;
}
.reel__play:hover .reel__btn,.reel__play:focus-visible .reel__btn{transform:translateY(-2px) scale(1.04);box-shadow:0 14px 34px rgba(0,0,0,.45);}
.reel__play:focus-visible{outline:3px solid #fff;outline-offset:-10px;}
.reel__dur{
  position:absolute;right:14px;top:14px;pointer-events:none;
  font-family:var(--ui,'Manrope',system-ui,sans-serif);font-weight:700;font-size:11px;letter-spacing:1px;
  color:#fff;background:rgba(5,5,5,.55);padding:5px 10px;border-radius:999px;transition:opacity .3s;
}
.reel.is-playing .reel__play,.reel.is-playing .reel__dur{opacity:0;pointer-events:none;}

.reel__info{margin-top:26px;}
.reel__name{font-family:var(--serif);font-style:italic;font-weight:600;font-size:1.7rem;line-height:1.1;color:var(--cream);margin:0 0 10px;}
.reel__meta{font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.5px;color:var(--gold);}

.reels__foot{display:flex;justify-content:center;gap:28px;flex-wrap:wrap;margin-top:64px;}
.reels__foot a{font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.5px;color:var(--gold);
  border-bottom:1px solid transparent;padding-bottom:2px;transition:border-color .25s;}
.reels__foot a:hover{border-bottom-color:var(--gold);}

@media (max-width:760px){
  .reels{padding:90px 18px 80px;}
  .reels__grid{grid-template-columns:minmax(0,320px);gap:56px;}
  .reel:nth-child(2){margin-top:0;}
}