/* Realistic build options (A video scrub, B stage wipes, C real job) */
.r3-lead{max-width:var(--max);margin:0 auto;padding:clamp(4rem,10vh,6rem) var(--gut) clamp(2.5rem,6vh,4rem);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:2rem;align-items:end}
.r3-lead .lbl{color:var(--red);grid-column:1/-1}
.r3-bar{position:absolute;left:var(--gut);right:var(--gut);bottom:2.4vh;height:2px;background:rgba(255,255,255,.25);z-index:3}
.r3-bar i{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(var(--p,0));background:var(--red)}

/* A — full-screen photoreal build, scroll scrubbed */
.r3-a{position:relative;height:420vh;background:var(--navy-2)}
.r3-a__stage{position:sticky;top:0;height:100svh;overflow:hidden}
.r3-a__cv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(var(--z,1.04));transform-origin:60% 60%}
.r3-a__scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,9,52,.84) 0%,rgba(10,9,52,.55) 28%,rgba(10,9,52,0) 52%),linear-gradient(0deg,rgba(10,9,52,.55),rgba(10,9,52,0) 30%)}
.r3-a__copy{position:absolute;left:var(--gut);top:calc(var(--hdr) + 6vh);width:min(30rem,40vw);z-index:2}
.r3-a__copy h2{margin:1rem 0 2rem}
.r3-steps{border-top:1px solid var(--line-dark)}
.r3-steps a{display:grid;grid-template-columns:1fr auto;align-items:center;padding:.62rem 0;border-bottom:1px solid var(--line-dark);color:var(--on-dark-50);transition:color .4s,padding .5s var(--e-out)}
.r3-steps a span{font-family:var(--f-disp);text-transform:uppercase;font-size:clamp(1rem,1.4vw,1.35rem);line-height:1.1}
.r3-steps a .ic{opacity:0;width:1rem;transition:opacity .3s}
.r3-steps a.is-done{color:var(--on-dark-70)}
.r3-steps a.is-on{color:#fff;padding-left:.6rem;box-shadow:inset 3px 0 0 var(--red)}
.r3-steps a.is-on .ic,.r3-steps a:hover .ic{opacity:1}
.r3-a__now{position:absolute;right:var(--gut);bottom:6vh;text-align:right;z-index:2}
.r3-a__now b{display:block;font-family:var(--f-disp);font-weight:400;text-transform:uppercase;font-size:clamp(1.8rem,4vw,4rem);line-height:1;text-shadow:0 4px 30px rgba(10,9,52,.5)}

/* B — five stages, each wiping in as flag stripes */
.r3-b{position:relative;height:460vh;background:var(--navy-2)}
.r3-b__stage{position:sticky;top:0;height:100svh;overflow:hidden}
.r3-b__shot{position:absolute;inset:0;margin:0;overflow:hidden}
.r3-b__shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(calc(1.02 + var(--k,0) * .08)) translate3d(calc(var(--k,0) * -1.2%),0,0);will-change:transform}
.r3-b__shot[data-i]:not([data-i="0"]){clip-path:inset(0 0 0 0)}
.r3-b__shot[data-i]:not([data-i="0"]) img{-webkit-mask:var(--mask);mask:var(--mask)}
.r3-b__stripes{position:absolute;inset:0;display:grid;grid-template-rows:repeat(7,1fr);pointer-events:none}
.r3-b__stripes i{display:block;position:relative;width:.9%;background:var(--c,#fff);opacity:0;box-shadow:0 0 24px rgba(10,9,52,.45)}
.r3-b__stage::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(10,9,52,.82) 0%,rgba(10,9,52,.45) 30%,rgba(10,9,52,0) 52%),linear-gradient(0deg,rgba(10,9,52,.5),rgba(10,9,52,0) 28%)}
.r3-b__copy{position:absolute;left:var(--gut);bottom:8vh;width:min(26rem,38vw);z-index:3}
.r3-b__copy h2{margin:.8rem 0 1.4rem;text-shadow:0 4px 30px rgba(10,9,52,.6)}
.r3-b__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-dark)}
.r3-b__list li{display:grid;grid-template-columns:1fr;padding:.6rem 0;border-bottom:1px solid var(--line-dark);color:var(--on-dark-50);transition:color .4s,background .4s}
.r3-b__list li b{font-family:var(--f-disp);font-weight:400;text-transform:uppercase;font-size:1.15rem}
.r3-b__list li span{font-size:.82rem;max-height:0;overflow:hidden;transition:max-height .5s var(--e-out)}
.r3-b__list li.is-on{color:#fff;padding-left:.7rem;box-shadow:inset 3px 0 0 var(--red)}
.r3-b__list li{transition:color .4s,padding .5s var(--e-out)}
.r3-b__list li.is-on span{max-height:3em}

/* C — the real job */
.r3-c{position:relative;height:340vh;background:#0e0d38}
.r3-c__stage{position:sticky;top:0;height:100svh;overflow:hidden}
.r3-c__cv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.r3-c__tags{position:absolute;left:var(--gut);top:calc(var(--hdr) + 9vh);display:flex;gap:.5rem;z-index:2}
.r3-c__tag{font-size:.9rem!important;padding:.65em 1.2em!important;box-shadow:0 10px 30px -12px rgba(10,9,52,.6)}
.r3-c__tag{background:rgba(10,9,52,.82);color:#fff;border-radius:999px;padding:.55em 1.1em;font-size:.8rem;letter-spacing:.04em;transition:opacity .5s,background .5s}
.r3-c__tag--a{opacity:var(--after,0);background:var(--red)}
.r3-c__tag--b{opacity:calc(1 - var(--after,0))}
.r3-c__note{position:absolute;right:var(--gut);bottom:5vh;margin:0;color:#fff;font-family:var(--f-it);font-style:italic;font-size:1rem;background:rgba(10,9,52,.7);padding:.5em 1em;border-radius:999px;z-index:2}
.r3-c__cmp{max-width:1200px;margin:0 auto;padding:clamp(3rem,8vh,5rem) var(--gut)}
.r3-cmp{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:6px;--x:50%}
.r3-cmp>img,.r3-cmp__b img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.r3-cmp__b{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--x)) 0 0)}
.r3-cmp__h{position:absolute;top:0;bottom:0;left:var(--x);width:2px;background:#fff;transform:translateX(-1px);pointer-events:none}
.r3-cmp__h i{position:absolute;top:50%;left:50%;width:46px;height:46px;border-radius:50%;background:var(--red);transform:translate(-50%,-50%);box-shadow:0 0 0 4px #fff}
.r3-cmp input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.r3-c__cap{margin-top:1rem;color:var(--ink-70);font-size:.95rem}
.r3-c__cap .lbl{color:var(--red);margin-right:.6rem}

@media (max-width:899px){
  .r3-lead{grid-template-columns:1fr}
  .r3-a{height:360vh}
  .r3-a__scrim{background:linear-gradient(180deg,rgba(10,9,52,.86) 0%,rgba(10,9,52,.4) 34%,rgba(10,9,52,0) 55%),linear-gradient(0deg,rgba(10,9,52,.7),rgba(10,9,52,0) 30%)}
  .r3-a__copy{top:calc(var(--hdr) + 1.5vh);width:auto;right:var(--gut)}
  .r3-a__copy h2{margin:.5rem 0 0;font-size:2rem}
  .r3-steps{display:none}
  .r3-a__cv{transform-origin:62% 62%}
  .r3-a__now{bottom:calc(64px + 4vh);left:var(--gut);text-align:left}
  .r3-a__now b{font-size:2rem}
  .r3-bar{bottom:calc(64px + 1.5vh)}
  .r3-a__scrim{display:none}
  .r3-c__note{bottom:calc(64px + 4vh);right:auto;left:var(--gut);font-size:.85rem}
  .r3-b{height:400vh}
  /* phones: the whole photo as a band near the top, the stage list underneath on navy */
  .r3-b__shot{inset:auto 0 auto 0;top:calc(var(--hdr) + 2vh);height:min(31vh,62vw)}
  .r3-b__shot img{object-position:50% 70%}
  .r3-b__stage::after{display:none}
  .r3-b__copy{width:auto;right:var(--gut);bottom:calc(64px + 3vh)}
  .r3-b__stage::after{background:linear-gradient(0deg,rgba(10,9,52,.9) 0%,rgba(10,9,52,.55) 40%,rgba(10,9,52,0) 65%)}
  .r3-b__list li span{display:none}
  .r3-b__copy h2{font-size:2rem}
  .r3-c{height:280vh}
  .r3-c__tags{flex-direction:column;align-items:flex-start;top:calc(50% - 38vw - 1rem);transform:translateY(-100%)}
}
@media (prefers-reduced-motion:reduce){ .r3-b__stripes{display:none} }