/* "One envelope, three disciplines" — boxed width, three images that follow scroll / tab clicks */
.disc-scroll{--hdr:68px; position:relative;}
.disc-sticky{padding-top:96px; padding-bottom:96px;}
@media (min-width:900px){ .disc-sticky{padding-top:128px; padding-bottom:128px;} }
.disc-stage{position:relative; aspect-ratio:3/2; background:#fff; overflow:hidden;}
.disc-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.03); transition:opacity .6s ease, transform .9s ease;}
.disc-img.contain{object-fit:contain; background:#fff;}
.disc-img.is-on{opacity:1; transform:none;}
/* pinned scroll mode (desktop) */
@media (min-width:900px){
  .disc-scroll.is-live{height:300vh;}
  .disc-scroll.is-live .disc-sticky{position:sticky; top:var(--hdr); height:calc(100vh - var(--hdr)); height:calc(100svh - var(--hdr)); padding-top:0; padding-bottom:0; display:flex; align-items:center;}
  .disc-scroll.is-live .disciplines{width:100%;}
}
/* tabs */
.discipline-list li{transition:opacity .35s ease;}
.disc-scroll.is-ready .discipline-list li{opacity:.4;}
.disc-scroll.is-ready .discipline-list li.is-on, .disc-scroll.is-ready .discipline-list li:hover{opacity:1;}
.disc-scroll.is-ready .discipline-list li.is-on b{color:var(--accent); box-shadow:inset 0 -2px 0 var(--accent);}
.disc-tab{display:flex; gap:16px; align-items:baseline; width:100%; margin:0; padding:0; background:none; border:0; font:inherit; color:inherit; text-align:left; cursor:pointer;}
.disc-tab b{transition:box-shadow .25s ease, color .25s ease;}
.disc-tab:hover b{color:var(--accent); box-shadow:inset 0 -2px 0 var(--accent);}
.disc-tab:focus-visible{outline:2px solid var(--accent); outline-offset:6px;}
@media (prefers-reduced-motion:reduce){ .disc-img, .discipline-list li{transition:none;} }