/* ═══ PHOTO · SECTION 3 — SHOWREEL ═══ */
.reel{position:relative;overflow:hidden;border-top:1px solid var(--border);
  min-height:clamp(420px,80svh,860px);display:grid;place-items:center}
.reel .media{position:absolute;inset:-8% 0;z-index:0;will-change:transform}
.reel video,.reel .vph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel video{filter:grayscale(.28) brightness(.5)}
.reel .vph{background:repeating-linear-gradient(36.5deg,#141414 0 16px,#0f0f0f 16px 32px);
  display:grid;place-items:center}
.reel .vph i{font-style:normal;font-size:10.5px;letter-spacing:.18em;font-weight:600;color:var(--dim)}
.reel::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 50%,rgba(10,10,10,.4) 0%,rgba(10,10,10,.84) 74%)}
.reel-inner{position:relative;z-index:3;text-align:center;padding:clamp(40px,8vh,90px) var(--gut)}
.reel .eyebrow{justify-content:center}
.reel h2{margin-top:clamp(20px,3.4vh,36px);
  font-family:'Archivo Expanded',Archivo,sans-serif;font-weight:900;letter-spacing:-.035em;
  font-size:clamp(1.8rem,6vw,5.2rem);line-height:.94}
.reel h2 .row{display:block;overflow:hidden}
.reel h2 .row > span{display:block;transform:translateY(106%);
  transition:transform .95s cubic-bezier(.16,1,.3,1)}
.reel.is-in h2 .row > span{transform:translateY(0)}
.reel h2 .row:nth-child(2) > span{transition-delay:.1s}
.reel h2 .dot{color:var(--cut)}
.play-btn{margin:clamp(30px,5vh,52px) auto 0;width:clamp(72px,8vw,104px);aspect-ratio:1;
  border-radius:50%;background:var(--cut);display:grid;place-items:center;cursor:pointer;
  border:0;transition:transform .4s cubic-bezier(.2,.7,.2,1);
  opacity:0;transform:scale(.85)}
.reel.is-in .play-btn{opacity:1;transform:none;
  transition:opacity .7s ease .3s,transform .7s cubic-bezier(.16,1,.3,1) .3s}
.play-btn:hover{transform:scale(1.07)}
.play-btn::after{content:"";width:0;height:0;margin-left:5px;
  border-left:22px solid #0A0A0A;border-top:14px solid transparent;border-bottom:14px solid transparent}
.reel .note{margin-top:clamp(20px,3vh,30px);font-size:10.5px;letter-spacing:.18em;color:var(--dim)}
.reel .flagbar{display:inline-flex;align-items:center;gap:9px;margin-top:20px;
  font-size:10px;letter-spacing:.16em;font-weight:700;color:#0A0A0A;background:var(--cut);
  padding:7px 11px}

@media(prefers-reduced-motion:reduce){
  .reel h2 .row > span{transform:none}
  .play-btn{opacity:1;transform:none}
  .reel .media{transform:none!important;inset:0}
}